Static Sites With Nuxt - 06 - Data From WordPress #2

nuxt.config.js

@@ -1,4 +1,5 @@
 import pkg from './package'
+import axios from 'axios'
 
 export default {
     mode: 'universal',
@@ -56,6 +57,19 @@ export default {
         ]
     },
 
+    generate: {
+        routes: () => {
+            return axios.get('http://nuxt-wp.localhost/wp-json/wp/v2/posts').then((res) => {
+                return res.data.map((post) => {
+                    return {
+                        route: 'blog/' + post.slug,
+                        payload: post
+                    }
+                })
+            })
+        }
+    },
+
     /*
     ** Build configuration
     */

pages/blog/_slug.vue

@@ -0,0 +1,36 @@
+<template>
+    <div>
+        <div class="container">
+            <div class="post">
+                <h2 class="mb-8">{{ post.title.rendered }}</h2>
+                <div v-html="post.content.rendered"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import axios from 'axios'
+
+    export default {
+        data() {
+            return {
+                post: {}
+            }
+        },
+        async asyncData({params, payload}) {
+            if(payload) {
+                return {
+                    post: payload
+                }
+            } else {
+                return axios.get('http://nuxt-wp.localhost/wp-json/wp/v2/posts/' + params.id)
+                    .then((res) => {
+                        return {
+                            post: res.data
+                        }
+                    })
+            }
+        }
+    }
+</script>

pages/index.vue

@@ -8,7 +8,10 @@
             <div class="post" v-for="post in posts" :key="post.id">
                 <h4>{{ post.title.rendered }}</h4>
 
-                <div class="post-content" v-html="post.excerpt.rendered"></div>
+                <div class="post-content" v-html="post.excerpt.rendered" />
+                <nuxt-link :to="{ name: 'blog-slug', params: { slug: post.slug, id: post.id } }">
+                    Read More
+                </nuxt-link>
             </div>
         </div>
     </section>
@@ -33,9 +36,10 @@
     }
 </script>
 
-<style>
+<style lang="scss">
     .container {
         margin: 0 auto;
         width: 960px;
+        border-bottom: 1px solid red;
     }
 </style>