plan for ssg

packages/nuxt/pages/blog.vue

@@ -1,34 +0,0 @@
-<template>
-  <p v-if="$fetchState.pending"></p>
-  <p v-else-if="$fetchState.error">
-    An error occurred {{ $fetchState.error.message }}
-  </p>
-  <p v-else-if="!posts.length">No posts found.</p>
-  <post-query v-else :posts="posts" :count="count" />
-</template>
-
-<script lang="ts">
-import { Vue, Component } from 'nuxt-property-decorator'
-
-@Component<BlogPage>({
-  watch: {
-    '$route.query.q': '$fetch',
-    '$route.query.page': '$fetch',
-  },
-  async fetch() {
-    const { result, count } = await this.$axios.$get('/api/q', {
-      params: {
-        q: this.$route.query.q,
-        page: this.$route.query.page,
-      },
-    })
-
-    this.posts = result
-    this.count = count
-  },
-})
-export default class BlogPage extends Vue {
-  posts: IPostTeaser[] = []
-  count = 0
-}
-</script>

packages/nuxt/pages/blog/_page.vue

@@ -0,0 +1,26 @@
+<template>
+  <post-query :posts="posts" :count="count" />
+</template>
+
+<script lang="ts">
+import { Vue, Component } from 'nuxt-property-decorator'
+
+@Component<BlogPagePaged>({
+  async asyncData({ $axios, params }) {
+    const { result, count } = await $axios.$get('/api/q', {
+      params: {
+        page: params.page,
+      },
+    })
+
+    return {
+      posts: result,
+      count,
+    }
+  },
+})
+export default class BlogPagePaged extends Vue {
+  posts: IPostTeaser[] = []
+  count = 0
+}
+</script>

packages/nuxt/pages/blog/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <post-query :posts="posts" :count="count" />
+</template>
+
+<script lang="ts">
+import { Vue, Component } from 'nuxt-property-decorator'
+
+@Component<BlogPage>({
+  async asyncData({ $axios }) {
+    const { result, count } = await $axios.$get('/api/q')
+
+    return {
+      posts: result,
+      count,
+    }
+  },
+})
+export default class BlogPage extends Vue {
+  posts: IPostTeaser[] = []
+  count = 0
+}
+</script>

packages/nuxt/pages/post/_.vue

@@ -1,9 +1,5 @@
 <template>
-  <p v-if="$fetchState.pending"></p>
-  <p v-else-if="$fetchState.error">
-    An error occurred {{ $fetchState.error.message }}
-  </p>
-  <section v-else>
+  <section>
     <section>
       <h2>
         {{ post.title }}
@@ -29,7 +25,7 @@
       </small>
     </section>
 
-    <section v-html="post.content"></section>
+    <section v-html="post.contentHtml"></section>
 
     <section class="tags-container">
       <span>Tags:</span>
@@ -52,14 +48,16 @@ import { THEME } from '~/assets/global'
 import '~/assets/remark42'
 
 @Component<PostPage>({
-  async fetch() {
-    const r = await this.$axios.$get('/api', {
+  async asyncData({ $axios, params }) {
+    const r = await $axios.$get('/api', {
       params: {
-        path: this.$route.params.pathMatch,
+        path: params.pathMatch,
       },
     })
 
-    this.post = r
+    return {
+      post: r,
+    }
   },
   mounted() {
     this.initRemark42()
@@ -76,7 +74,7 @@ export default class PostPage extends Vue {
     title: string
     image?: string
     tag?: string[]
-    category?: string
+    category?: string[]
     content: string
   } | null = null
 
@@ -85,7 +83,7 @@ export default class PostPage extends Vue {
   remark42settings = THEME.comment?.remark42 || null
   remark42Instance: any = null
 
-  @Watch('$fetchState.pending')
+  @Watch('$route.params.pathMatch')
   initRemark42() {
     this.$nextTick(() => {
       if (

packages/nuxt/pages/tag/_tag.vue

@@ -1,32 +0,0 @@
-<template>
-  <p v-if="$fetchState.pending"></p>
-  <p v-else-if="$fetchState.error">An error occurred {{ $fetchState.error }}</p>
-  <post-query v-else :posts="posts" :count="count" />
-</template>
-
-<script lang="ts">
-import { Vue, Component } from 'nuxt-property-decorator'
-
-@Component<TagPage>({
-  watch: {
-    '$route.query.q': '$fetch',
-    '$route.query.page': '$fetch',
-  },
-  async fetch() {
-    const { result, count } = await this.$axios.$get('/api/q', {
-      params: {
-        q: this.$route.query.q,
-        page: this.$route.query.page,
-        tag: this.$route.params.tag,
-      },
-    })
-
-    this.posts = result
-    this.count = count
-  },
-})
-export default class TagPage extends Vue {
-  posts: IPostTeaser[] = []
-  count = 0
-}
-</script>

packages/nuxt/pages/tag/_tag/_page.vue

@@ -0,0 +1,27 @@
+<template>
+  <post-query :posts="posts" :count="count" />
+</template>
+
+<script lang="ts">
+import { Vue, Component } from 'nuxt-property-decorator'
+
+@Component<TagPagePaged>({
+  async asyncData({ $axios, params }) {
+    const { result, count } = await $axios.$get('/api/q', {
+      params: {
+        page: params.page,
+        tag: params.tag,
+      },
+    })
+
+    return {
+      posts: result,
+      count,
+    }
+  },
+})
+export default class TagPagePaged extends Vue {
+  posts: IPostTeaser[] = []
+  count = 0
+}
+</script>

packages/nuxt/pages/tag/_tag/index.vue

@@ -0,0 +1,26 @@
+<template>
+  <post-query :posts="posts" :count="count" />
+</template>
+
+<script lang="ts">
+import { Vue, Component } from 'nuxt-property-decorator'
+
+@Component<TagPage>({
+  async asyncData({ $axios, params }) {
+    const { result, count } = await $axios.$get('/api/q', {
+      params: {
+        tag: params.tag,
+      },
+    })
+
+    return {
+      posts: result,
+      count,
+    }
+  },
+})
+export default class TagPage extends Vue {
+  posts: IPostTeaser[] = []
+  count = 0
+}
+</script>