A NuxtJS blog engine like no other

pages/blog/index.vue

import { butter } from '~/plugins/buttercms'
export default {
  name: 'blog-home',
  data() {
    return {
      page_title: 'Blog',
      posts: []
    }
  },
  methods: {
    getPosts() {
      butter.post
        .list({
          page: 1,
          page_size: 10
        })
        .then((res) => {
          // console.log(res.data)
          this.posts = res.data.data
        })
    }
  },
  created() {
    this.getPosts()
  }
}

<template>
  <div id="blog-home">
    <h1>{{ page_title }}</h1>
    
    <div v-for="(post,index) in posts" :key="post.slug + '_' + index">
      <router-link :to="'/blog/' + post.slug">
        <article class="media">
          <figure>
            
            
            <img v-if="post.featured_image" :src="post.featured_image" alt="" />
            <img v-else src="http://via.placeholder.com/250x250" alt="" />
          </figure>
          <h2>{{ post.title }}</h2>
          <p>{{ post.summary }}</p>
        </article>
      </router-link>
    </div>
  </div>
</template>

pages/blog/_slug.vue

import { butter } from '~/plugins/buttercms'
export default {
  name: 'blog-post',
  data() {
    return {
      post: {
        data: {
          author: {}
        },
        meta: {}
      }
    }
  },
  methods: {
    getPost() {
      butter.post
        .retrieve(this.$route.params.slug)
        .then((res) => {
          console.log(res.data)
          this.post = res.data
        })
        .catch((res) => {
          console.log(res)
        })
    }
  },
  watch: {
    $route(to, from) {
      this.getPost()
    }
  },
  created() {
    this.getPost()
  }
}

<template>
  <div id="blog-post">
    <h1>{{ post.data.title }}</h1>
    <h4>{{ post.data.author.first_name }} {{ post.data.author.last_name }}</h4>
    <div v-html="post.data.body"></div>

    <router-link
      v-if="post.meta.previous_post"
      :to="/blog/ + post.meta.previous_post.slug"
      class="button"
    >
      {{ post.meta.previous_post.title }}
    </router-link>
    <router-link
      v-if="post.meta.next_post"
      :to="/blog/ + post.meta.next_post.slug"
      class="button"
    >
      {{ post.meta.next_post.title }}
    </router-link>
  </div>
</template>