페이지네비게이션 컴포넌트 추가 > 페이징 초기화

assets/scss/_pagination.scss

@@ -0,0 +1,42 @@
+.paginationContainer {
+  display: inline-block;
+  padding-left: 0;
+  margin: 20px 0;
+  border-radius: 4px;
+
+  > li {
+    display: inline;
+    font-size: 18px;
+
+    > a {
+      position: relative;
+      float: left;
+      padding: 6px 12px;
+      margin-left: -1px;
+      line-height: 1.42857143;
+      color: black;
+      text-decoration: none;
+      background-color: #fff;
+      border: 1px solid #ddd;
+    }
+
+    &.active {
+      > a {
+        z-index: 2;
+        color: #fff;
+        cursor: default;
+        background-color: #d74436;
+        border-color: #d74436;
+      }
+    }
+
+    &.disabled {
+      > a {
+        color: #777;
+        cursor: not-allowed;
+        background-color: #fff;
+        border-color: #ddd;
+      }
+    }
+  }
+ }

assets/scss/main.scss

@@ -3,6 +3,7 @@
 @import "./spacing";
 @import "./instructor_header";
 @import "./editor/index";
+@import './pagination';
 
 .blog-editor-container {
   padding-top: 60px;

nuxt.config.js

@@ -36,6 +36,7 @@ module.exports = {
     {src: '~/plugins/vuelidate'},
     {src: '~/plugins/integrations'},
     {src: '~/plugins/toasted', ssr: false},
+    {src: '~/plugins/paginate', ssr: false}
   ],
   /*
   ** Nuxt.js modules

pages/blogs/index.vue

@@ -22,6 +22,15 @@
             <!-- end of blog -->
             <!-- pagination -->
             <div class="section">
+              <no-ssr placeholder="Loading...">
+                <paginate
+                  :page-count="5"
+                  :click-handler="handleClick"
+                  :prev-text="'Prev'"
+                  :next-text="'Next'"
+                  :container-class="'paginationContainer'">
+                </paginate>
+              </no-ssr>
             </div>
             <!-- end of pagination -->
           </div>
@@ -65,6 +74,11 @@ export default {
   async fetch({store}) {
     await store.dispatch('blog/fetchBlogs')
     await store.dispatch('blog/fetchFeaturedBlogs', {'filter[featured]': true})
+  },
+  methods: {
+    handleClick() {
+      alert('Page Clicked!')
+    }
   }
 }
 </script>

plugins/paginate.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import Paginate from 'vuejs-paginate'
+
+Vue.component('paginate', Paginate)