Now that our app is almost complete we can justneed to add a few finishing touches to wrap it together.

Adding a blog list

We would like to create a /blog route which displays a list of available blog posts. Create a new file in the 'pages' folder called 'blog.vue' with the following content:

  <div class="posts">
    <div v-for="post in posts" :key="">
      <a v-bind:href="'/blog/' +">{{ post.title }}</a>

export default {
  getStaticProps() {
    return {
      posts: [
          id: "first-post",
          title: "My First Post",
          id: "second-post",
          title: "Data fetching",
        { id: "third-post", title: "Dynamic routes" },

.posts {
  text-align: center;

Notice how our Vue methods are still able to be used in our template.

Now our blog application is complete!