Post detail page

To use the SDK, open your Post.vue component and add just one simple line to component's created event.

<template>
  <div class="post">

    <!-- Your HTML codes -->

  </div>
</template>

<script>
export default {

  created() {

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

}
</script>

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

Property / Method name	type	Description
isLoadingPost	property	Boolean value, true if is loading post data, false if loaded
postDocument	property	A JSON:API document object of post data
postErrors	property	An array of error messages

Example of usage

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

<template>
  <div class="post">

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

    <!-- Post is loading -->
    <div v-if="isLoadingPost">
      ...Loading...
    </div>

    <!-- Post is loaded -->
    <div v-if="postDocument">

      <!-- Post title -->
      <h1>{{ postDocument.getData().getAttribute('title') }}</h1>

      <!-- Post content -->
      <article v-html="postDocument.getData().getAttribute('content')"></article>

    </div>

  </div>
</template>

<script>
export default {

  created() {

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

}
</script>