List pages

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

<template>
  <div class="pages">

    <!-- Your HTML codes -->

  </div>
</template>

<script>
export default {

  created() {

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

}
</script>

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

Property / Method name	type	Description
isLoadingPages	property	Boolean value, true if is loading pages, false if loaded
pagesDocument	property	A JSON:API document object of pages data
pagesErrors	property	An array of error messages
pagesSort	property	Default value -created_at

Example of usage

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

<template>
  <div class="pages">

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

    <!-- Is loading posts -->
    <div v-if="isLoadingPages">
      ...Loading...
    </div>

    <!-- Posts are loaded -->
    <div v-if="pagesDocument">

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

    </div>

  </div>
</template>

<script>
export default {

  created() {

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

}
</script>