List posts

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

<template>
  <div class="posts">

    <!-- Your HTML codes -->

  </div>
</template>

<script>
export default {

  created() {

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

}
</script>

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

Property / Method name	type	Description
isLoadingPosts	property	Boolean value, true if is loading posts, false if loaded
postsDocument	property	A JSON:API document object of posts data
postsErrors	property	An array of error messages
postsSort	property	Default value -created_at

Example of usage

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

<template>
  <div class="posts">

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

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

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

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

    </div>

  </div>
</template>

<script>
export default {

  created() {

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

}
</script>