[Vuejs]-Nuxt/Strapi/Shopify-API: decrease nuxt app loading time when loading data on init

by

0👍

Try to look at the Fetch Hook in Nuxt. This enables to fetch async data.
On the component side it exposes $fetchState whith the following states with in particular $fetchState.pending which is true while the fetching is ongoing. It allows you to place some data while waiting to get the data back from API.

<template>
  <div v-if="$fetchState.pending">Fetching data from Shopify ...</div>
  <div v-else>
   <div v-for="product in products" ... />
  </div>
</template>

<script>
export default {
 data() {
  return {
   products: []
  }
 },
 async fetch() {
  this.products= await strapi.services.product.search(this.query);
 }
}
</script>

Leave a comment