Working blog, I think!

.gitignore

@@ -69,6 +69,7 @@ typings/
 .nuxt
 
 # Nuxt generate
+public
 dist
 
 # vuepress build output

components/hero.vue

@@ -18,9 +18,9 @@ export default {
   props: {
     compact: {
       type: Boolean,
-      default: false
+      default: false,
-    }
+    },
-  }
+  },
 }
 </script>
 

content/2018-10-16-BlogWithVueNuxtNuxtent.md

@@ -1,15 +0,0 @@
----
-title: writing your own blog in Vue, powered by Nuxt, and Nuxtent
-tagline: break free from boring jekyll themes
-tags:
-  - blog
-  - vue
-  - vuejs
-  - nuxt
-  - nuxtent
-  - markdown
-  - static site
-  - github pages
-  - gitlab pages
-draft: true
----

layouts/compact.vue

@@ -10,7 +10,7 @@
 import hero from '../components/hero.vue'
 
 export default {
-  components: { hero }
+  components: { hero },
 }
 </script>
 

layouts/default.vue

@@ -10,7 +10,7 @@
 import hero from '../components/hero.vue'
 
 export default {
-  components: { hero }
+  components: { hero },
 }
 </script>
 

nuxt.config.js

@@ -14,8 +14,8 @@ export default {
       { charset: 'utf-8' },
       { 'http-equiv': 'X-UA-Compatible', content: 'IE=edge,chrome=1' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-      { hid: 'description', name: 'description', content: pkg.description }
+      { hid: 'description', name: 'description', content: pkg.description },
-    ]
+    ],
   },
 
   /*
@@ -42,7 +42,7 @@ export default {
   ** Static Site Generation configuration
   */
   generate: {
-    dir: 'public'
+    dir: 'public',
   },
 
   /*
@@ -50,11 +50,17 @@ export default {
   */
   nuxtent: {
     content: {
-      page: '/blog/_slug',
+      page: '/_slug',
-      permalink: ':slug',
+      permalink: '/blog/:slug',
-      generate: ['get', 'getAll']
+      isPost: false,
+      generate: ['get', 'getAll'],
+    },
+    api: isStatic => {
+      return {
+        browserBaseURL: isStatic ? 'https://mat.services' : '',
       }
     },
+  },
 
   /*
   ** Build configuration
@@ -63,9 +69,9 @@ export default {
     postcss: {
       preset: {
         features: {
-          customProperties: false
+          customProperties: false,
-        }
+        },
-      }
+      },
     },
     /*
     ** You can extend webpack config here
@@ -77,9 +83,9 @@ export default {
           enforce: 'pre',
           test: /\.(js|vue)$/,
           loader: 'eslint-loader',
-          exclude: /(node_modules)/
+          exclude: /(node_modules)/,
         })
       }
-    }
+    },
-  }
+  },
 }

pages/blog.vue

@@ -8,15 +8,10 @@
 
 <script>
 export default {
-  async asyncData({ app }) {
-    return {
-      listing: await app.$content('/').getAll()
-    }
-  },
   head() {
     return { title: 'blog' }
   },
-  layout: 'compact'
+  layout: 'compact',
 }
 </script>
 

pages/blog/_slug.vue

@@ -10,9 +10,9 @@
 
 <script>
 export default {
-  async asyncData({ app, params, payload }) {
+  async asyncData({ app, route, payload }) {
     return {
-      post: await app.$content('/').get(params.slug),
+      post: (await app.$content('/').get(route.path)) || payload,
     }
   },
   head() {

pages/blog/index.vue

@@ -5,20 +5,26 @@ ul.blog-items
       span.post-title {{ post.title }}
       span.post-date {{ post.date | prettifyDate }}
       .post-tagline {{ post.tagline }}
-    hr(v-if='index < listing.length - 1')
+    hr(v-if='last(index)')
 </template>
 
 <script>
 export default {
   async asyncData({ app }) {
     return {
-      listing: await app
+      listing:
+        (await app
           .$content('/')
           .query({ exclude: ['body', 'meta', 'permalink', 'anchors'] })
-        .getAll()
+          .getAll()) || payload,
     }
   },
-  layout: 'compact'
+  methods: {
+    last(index) {
+      return index < this.listing.length - 1
+    },
+  },
+  layout: 'compact',
 }
 </script>
 

pages/projects.vue

@@ -38,7 +38,7 @@ export default {
   head() {
     return { title: 'projects' }
   },
-  layout: 'compact'
+  layout: 'compact',
 }
 </script>
 

pages/resume.vue

@@ -49,7 +49,7 @@ export default {
   head() {
     return { title: 'resume' }
   },
-  layout: 'compact'
+  layout: 'compact',
 }
 </script>