List products

Activate the SDK mixin by adding this.useProductsMixin(true) to created hook like below:

<template>
  <div class="products">

    <!-- Your HTML codes -->

  </div>
</template>

<script>
export default {

  created() {

    // Activate the sdk
    this.useProductsMixin(true)
  }

}
</script>

Now you'll be able to access these following data and methods:

Property / Method name	type	Description
isLoadingProducts	property	Boolean value, true if is loading products, false if loaded
productsDocument	property	A JSON:API document object of products data
productsErrors	property	An array of error messages
productsFilter	property	Product filter data
productsSort	property	Default value -created_at

Example of usage

Below is a full example of a Products.vue component:

<template>
  <div class="products">

    <!-- Errors -->
    <div v-if="productsErrors.length">
      <h1>Errors:</h1>
      <div v-for="error in productsErrors">{{ error }}</div>
    </div>

    <!-- Is loading products -->
    <div v-if="isLoadingProducts">
      ...Loading...
    </div>

    <!-- Products are loaded -->
    <div v-if="productsDocument">

      <!-- Loop through document data -->
      <div v-for="product in productsDocument.getData()" class="products__product">
        <router-link :to="$linkTo('product', product)">{{ product.getAttribute('title') }}</router-link>
      </div>

    </div>

  </div>
</template>

<script>
export default {

  created() {

    // Activate the sdk
    this.useProductsMixin(true)
  }

}
</script>