Paginated blog

src/assets/style/_pagination.scss

@@ -0,0 +1,13 @@
+.pagination {
+  text-align: center;
+  margin: 1rem;
+
+  a {
+    padding: 1rem;
+
+    &.active {
+      color: white;
+      text-decoration: none;
+    }
+  }
+}

src/assets/style/index.scss

@@ -4,4 +4,5 @@
 @import 'base';
 @import 'code';
 @import 'content-box';
-@import 'utils';
+@import 'pagination';
+@import 'utils';

src/pages/Index.vue

@@ -8,12 +8,19 @@
       <PostCard v-for="edge in $page.posts.edges" :key="edge.node.id" :post="edge.node"/>
     </div>
 
+    <div class="pagination">
+      <Pager :info="$page.posts.pageInfo"/>
+    </div>
   </Layout>
 </template>
 
 <page-query>
-{
-  posts: allPost {
+query ($page: Int) {
+  posts: allPost(perPage: 10, page: $page) @paginate {
+    pageInfo {
+      totalPages
+      currentPage
+    }
     edges {
       node {
         id
@@ -42,11 +49,13 @@
 <script>
 import Author from '~/components/Author.vue'
 import PostCard from '~/components/PostCard.vue'
+import { Pager } from 'gridsome'
 
 export default {
   components: {
     Author,
-    PostCard
+    PostCard,
+    Pager
   },
   metaInfo: {
     title: 'Home'