remove pug

packages/nuxt/components/PostQuery.vue

@@ -0,0 +1,92 @@
+<template>
+  <article>
+    <post-teaser v-for="p in posts" :key="p.path" :post="p"></post-teaser>
+
+    <nav v-if="count > 5">
+      <ul>
+        <li v-if="page > 2">
+          <nuxt-link :to="makePageUrl(1)" aria-label="page 1"> &lt; </nuxt-link>
+        </li>
+
+        <li v-if="page > 1">
+          <nuxt-link :to="makePageUrl(1)" aria-label="page 1">1</nuxt-link>
+        </li>
+
+        <li v-if="page > 4">
+          <span> &hellip; </span>
+        </li>
+
+        <li v-if="page > 3">
+          <nuxt-link
+            :to="makePageUrl(page - 1)"
+            :aria-label="`page ${page - 1}`"
+          >
+            {{ page - 1 }}
+          </nuxt-link>
+        </li>
+
+        <li>
+          <span>
+            {{ page }}
+          </span>
+        </li>
+
+        <li v-if="page < total - 2">
+          <nuxt-link
+            :to="makePageUrl(page + 1)"
+            :aria-label="`page ${page + 1}`"
+          >
+            {{ page + 1 }}
+          </nuxt-link>
+        </li>
+
+        <li v-if="page < total - 3">
+          <span> &hellip; </span>
+        </li>
+
+        <li v-if="page < total">
+          <nuxt-link :to="makePageUrl(total)" :aria-label="`page ${total}`">
+            {{ total }}
+          </nuxt-link>
+        </li>
+
+        <li v-if="page < total - 1">
+          <nuxt-link
+            :to="makePageUrl(page + 1)"
+            :aria-label="`page ${page + 1}`"
+          >
+            &gt;
+          </nuxt-link>
+        </li>
+      </ul>
+    </nav>
+  </article>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'nuxt-property-decorator'
+
+@Component
+export default class PostQuery extends Vue {
+  @Prop({ required: true }) posts!: IPostTeaser[]
+  @Prop({ required: true }) count!: number
+
+  get page() {
+    return parseInt((this.$route.query.page as string) || '1')
+  }
+
+  get total() {
+    return Math.ceil(this.count / 5)
+  }
+
+  makePageUrl(page: number) {
+    return this.$router.resolve({
+      path: this.$route.path,
+      query: {
+        ...this.$route.query,
+        page: page.toString(),
+      },
+    })
+  }
+}
+</script>