feat(pagination): add pagination component

app/components/commons/pagination.vue

@@ -0,0 +1,92 @@
+<template>
+  <nav class="border-t border-gray-200 px-4 mb-10 flex items-center justify-between sm:px-0">
+    <div v-if="currentPage > 1" class="w-0 flex-1 flex">
+      <nuxt-link
+        to="/blog"
+        class="-mt-px border-t-2 border-transparent pt-4 pr-1 inline-flex items-center text-sm leading-5 font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-400 transition ease-in-out duration-150"
+      >
+        <svg class="mr-3 h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
+          <path
+            fill-rule="evenodd"
+            d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z"
+            clip-rule="evenodd"
+          />
+        </svg>
+        Previous
+      </nuxt-link>
+    </div>
+
+    <div class="hidden md:flex">
+      <nuxt-link to="/blog" class="pagination-link">
+        1
+      </nuxt-link>
+      <nuxt-link
+        v-for="page in paginationMax"
+        :key="page + 1"
+        :to="`/blog/page/${page + 1}`"
+        class="pagination-link"
+      >
+        {{ page + 1 }}
+      </nuxt-link>
+    </div>
+    <div v-if="currentPage < totalPages" class="w-0 flex-1 flex justify-end">
+      <nuxt-link
+        :to="`/blog/page/${currentPage + 1}`"
+        class="-mt-px border-t-2 border-transparent pt-4 pl-1 inline-flex items-center text-sm leading-5 font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-400 transition ease-in-out duration-150"
+      >
+        Next
+        <svg class="ml-3 h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
+          <path
+            fill-rule="evenodd"
+            d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
+            clip-rule="evenodd"
+          />
+        </svg>
+      </nuxt-link>
+    </div>
+  </nav>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'nuxt-property-decorator';
+
+@Component({})
+export default class Pagination extends Vue {
+  @Prop({ required: true, type: Number }) readonly currentPage!: number;
+
+  @Prop({ required: true, type: Number }) readonly totalPages!: number;
+
+  @Prop({ default: 3, type: Number }) readonly max!: number;
+
+  get paginationMax(): number {
+    const max = this.totalPages < this.max ? this.totalPages : this.max;
+    return max - 1;
+  }
+}
+</script>
+
+<style lang="scss">
+.pagination-link {
+  @apply -mt-px border-t-2 pt-4 px-4 inline-flex items-center text-sm leading-5 font-medium transition ease-in-out duration-150;
+
+  &:not(.nuxt-link-exact-active) {
+    @apply border-transparent text-gray-500;
+
+    &:hover {
+      @apply text-gray-700 border-gray-300;
+    }
+
+    &:focus {
+      @apply outline-none text-gray-700 border-gray-400;
+    }
+  }
+
+  &.nuxt-link-exact-active {
+    @apply border-indigo-500 text-indigo-600;
+
+    &:focus {
+      @apply outline-none text-indigo-800 border-indigo-700;
+    }
+  }
+}
+</style>

app/components/partials/footer.vue

@@ -29,7 +29,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
+import { Component, Vue } from 'nuxt-property-decorator';
 
 @Component
 export default class Footer extends Vue {}

app/components/partials/header.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
+import { Component, Vue } from 'nuxt-property-decorator';
 import settings from '@/content/settings/general.json';
 
 @Component

app/layouts/default.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
+import { Component, Vue } from 'nuxt-property-decorator';
 import SiteHeader from '@/components/partials/header.vue';
 import SiteFooter from '@/components/partials/footer.vue';
 

app/pages/_page.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
+import { Component, Vue } from 'nuxt-property-decorator';
 import { MetaInfo } from 'vue-meta';
 
 @Component({
@@ -22,22 +22,6 @@ import { MetaInfo } from 'vue-meta';
     return 'slide-right';
   },
 
-  async asyncData({ params, payload }): Promise<{ page: Page }> {
-    if (payload) {
-      return { page: payload };
-    }
-
-    try {
-      const page = require(`@/content/pages/${params.page}.json`);
-
-      return {
-        page,
-      };
-    } catch (e) {
-      throw new Error('Not found');
-    }
-  },
-
   head(): MetaInfo {
     return {
       title: this.page.title,
@@ -58,5 +42,21 @@ import { MetaInfo } from 'vue-meta';
 })
 export default class PageTemplate extends Vue {
   page!: Page;
+
+  async asyncData({ params, payload }): Promise<{ page: Page }> {
+    if (payload) {
+      return { page: payload };
+    }
+
+    try {
+      const page = require(`@/content/pages/${params.page}.json`);
+
+      return {
+        page,
+      };
+    } catch (e) {
+      throw new Error('Not found');
+    }
+  }
 }
 </script>

app/pages/blog/_slug.vue

@@ -11,26 +11,10 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
+import { Component, Vue } from 'nuxt-property-decorator';
 import { MetaInfo } from 'vue-meta';
 
 @Component({
-  async asyncData({ params, payload }): Promise<{ post: Post }> {
-    if (payload) {
-      return { post: payload };
-    }
-
-    try {
-      const post = require(`@/content/blog/${params.slug}.json`);
-
-      return {
-        post,
-      };
-    } catch (e) {
-      throw new Error('Not found');
-    }
-  },
-
   head(): MetaInfo {
     return {
       title: this.post.title,
@@ -51,5 +35,21 @@ import { MetaInfo } from 'vue-meta';
 })
 export default class BlogPost extends Vue {
   post!: Post;
+
+  async asyncData({ params, payload }): Promise<{ post: Post }> {
+    if (payload) {
+      return { post: payload };
+    }
+
+    try {
+      const post = require(`@/content/blog/${params.slug}.json`);
+
+      return {
+        post,
+      };
+    } catch (e) {
+      throw new Error('Not found');
+    }
+  }
 }
 </script>

app/pages/blog/index.vue

@@ -29,29 +29,19 @@
         </div>
       </div>
     </div>
+    <Pagination v-if="totalPages > 1" :current-page="currentPage" :total-pages="totalPages" />
   </section>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
+import { Component, Vue } from 'nuxt-property-decorator';
 import { MetaInfo } from 'vue-meta';
 
-@Component({
-  async asyncData({ params, store }) {
-    const page: number = params.page ? parseInt(params.page, 10) : 1;
-    const { perPage }: { perPage: number } = store.state;
-    const range = page * perPage;
+const Pagination = () => import('@/components/commons/pagination.vue');
 
-    const posts = store.state.posts.filter((post, index) => {
-      const indexPage = index + 1;
-      return range - perPage < indexPage && indexPage <= range;
-    });
-
-    return {
-      currentPage: page,
-      totalPages: Math.ceil(store.state.posts / perPage),
-      posts: posts || [],
-    };
+@Component({
+  components: {
+    Pagination,
   },
 
   head(): MetaInfo {
@@ -70,11 +60,25 @@ import { MetaInfo } from 'vue-meta';
 export default class BlogIndex extends Vue {
   currentPage!: number;
 
+  totalPages!: number;
+
   posts: Post[] = [];
 
-  handlePagination(value): void {
-    const path = value === 1 ? '/blog' : `/blog/page/${value}`;
-    this.$router.push(path);
+  async asyncData({ params, store }) {
+    const page: number = params.page ? parseInt(params.page, 10) : 1;
+    const { perPage }: { perPage: number } = store.state;
+    const range = page * perPage;
+
+    const posts = store.state.posts.filter((post, index) => {
+      const indexPage = index + 1;
+      return range - perPage < indexPage && indexPage <= range;
+    });
+
+    return {
+      currentPage: page,
+      totalPages: Math.ceil(store.state.posts.length / perPage),
+      posts: posts || [],
+    };
   }
 }
 </script>

app/pages/index.vue

@@ -45,7 +45,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
+import { Component, Vue } from 'nuxt-property-decorator';
 import settings from '@/content/settings/general.json';
 
 @Component({

app/store/index.ts

@@ -18,10 +18,10 @@ export const appState = {
 };
 
 export const mutations: MutationTree<State> = {
-  SET_PAGES: (state, payload: object): void => {
+  SET_PAGES: (state, payload: Record<string, unknown>): void => {
     Vue.set(state, 'pages', payload);
   },
-  SET_POSTS: (state, payload: object): void => {
+  SET_POSTS: (state, payload: Record<string, unknown>): void => {
     Vue.set(state, 'posts', payload);
   },
 };

package.json

@@ -27,49 +27,50 @@
     "not dead"
   ],
   "dependencies": {
-    "@nuxt/typescript-runtime": "^0.4.6",
+    "@nuxt/typescript-runtime": "^0.4.10",
     "@nuxtjs/eslint-module": "^2.0.0",
     "@nuxtjs/markdownit": "^1.2.9",
     "@nuxtjs/pwa": "^3.0.0-beta.20",
     "@nuxtjs/style-resources": "^1.0.0",
     "fast-glob": "^3.2.2",
-    "nuxt": "^2.12.2",
-    "ts-node": "^8.10.1",
-    "vue-property-decorator": "^8.4.2"
+    "nuxt": "^2.13.3",
+    "nuxt-property-decorator": "^2.7.2",
+    "ts-node": "^8.10.2"
   },
   "devDependencies": {
-    "@babel/helper-call-delegate": "^7.8.7",
-    "@babel/plugin-transform-runtime": "^7.9.6",
-    "@babel/preset-env": "^7.9.6",
-    "@babel/runtime-corejs2": "^7.9.6",
-    "@commitlint/cli": "^8.3.5",
-    "@commitlint/config-conventional": "^8.3.4",
-    "@nuxt/typescript-build": "^0.6.6",
+    "@babel/helper-call-delegate": "^7.10.4",
+    "@babel/plugin-transform-runtime": "^7.10.4",
+    "@babel/preset-env": "^7.10.4",
+    "@babel/runtime-corejs2": "^7.10.4",
+    "@commitlint/cli": "^9.0.1",
+    "@commitlint/config-conventional": "^9.0.1",
+    "@nuxt/typescript-build": "^1.0.3",
     "@nuxtjs/tailwindcss": "^2.0.0",
-    "@types/node": "^13.13.5",
-    "@typescript-eslint/eslint-plugin": "^2.31.0",
-    "@typescript-eslint/parser": "^2.31.0",
-    "@vue/test-utils": "^1.0.2",
+    "@types/jest": "^26.0.3",
+    "@types/node": "^14.0.14",
+    "@typescript-eslint/eslint-plugin": "^3.5.0",
+    "@typescript-eslint/parser": "^3.5.0",
+    "@vue/test-utils": "^1.0.3",
     "babel-eslint": "^10.1.0",
     "core-js": "2.6.9",
     "cross-env": "^7.0.2",
-    "eslint": "^7.0.0",
-    "eslint-config-airbnb-typescript": "^7.2.1",
+    "eslint": "^7.4.0",
+    "eslint-config-airbnb-typescript": "^8.0.2",
     "eslint-config-prettier": "^6.11.0",
     "eslint-import-resolver-webpack": "^0.12.1",
-    "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-vue": "^6.2.2",
     "eslint-plugin-vue-a11y": "^0.0.31",
     "husky": "^4.2.5",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^26.0.1",
+    "jest": "^26.1.0",
     "jest-serializer-vue": "^2.0.2",
     "jest-static-stubs": "0.0.1",
     "node-sass": "^4.14.1",
     "prettier": "^2.0.5",
-    "sass-loader": "^8.0.2",
-    "ts-jest": "^25.5.1",
-    "vue-jest": "^4.0.0-beta.2"
+    "sass-loader": "^9.0.1",
+    "ts-jest": "^26.1.1",
+    "vue-jest": "^3.0.6"
   }
 }