Implement "infinite scrolling" in the homepage!

package.json

@@ -12,7 +12,8 @@
     "@gridsome/source-ghost": "^0.2.0",
     "@gridsome/transformer-remark": "^0.3.0",
     "@tryghost/helpers": "^1.1.20",
-    "gridsome": "^0.7.0"
+    "gridsome": "^0.7.0",
+    "vue-infinite-loading": "^2.4.5"
   },
   "devDependencies": {
     "node-sass": "^4.12.0",

src/main.js

@@ -1,8 +1,10 @@
 import '~/assets/css/style.scss'
 import DefaultLayout from '~/layouts/Default.vue'
 import moment from "vue-moment"
+import InfiniteLoading from "vue-infinite-loading"
 
 export default Vue => {
 	Vue.component('Layout', DefaultLayout)
 	Vue.use(moment)
+	Vue.use(InfiniteLoading)
 }

src/pages/Index.vue

@@ -24,9 +24,22 @@
     <main id="site-main" class="site-main outer">
       <div class="inner">
         <div class="post-feed">
-          <Card v-for="{ node }, count in $page.posts.edges" :key="node.id" :cardData="node" :isLarge="count % 6 == 0 ? true : false" />
+          <Card v-for="{ node }, count in loadedPosts" :key="node.id" :cardData="node" :isLarge="count % 6 == 0 ? true : false" />
+          <ClientOnly>
+            <infinite-loading @infinite="infiniteHandler" spinner="spiral">
+              <div slot="no-more">
+                That's it! You've scrolled through all the articles.
+                Now, how about <a :href="/write/">writing one yourself</a>?
+              </div>
+              <div slot="no-results">
+                Sorry, no posts yet :(
+              </div>
+            </infinite-loading>
+          </ClientOnly>
+          <noscript>
+            <Pager :info="$page.posts.pageInfo" linkClass="button" style="height: 5rem; text-align:center;" />
+          </noscript>
         </div>
-        <Pager :info="$page.posts.pageInfo" linkClass="button" style="height: 5rem; text-align:center;" />
       </div>
     </main>
   </Layout>
@@ -47,6 +60,11 @@
   background: black;
 }
 
+.infinite-loading-container {
+  width: 100%;
+  padding: 2rem;
+}
+
 </style>
 
 <script>
@@ -76,7 +94,38 @@
       HeroBgClass() {
         return 'site-header outer no-cover'
       }
-    }   
+    },
+    data() {
+      return {
+        loadedPosts: [],
+        currentPage: 1
+      }
+    },
+    created() {
+      this.loadedPosts.push(...this.$page.posts.edges)
+    },
+    methods: {
+      async infiniteHandler($state) {
+        console.log('Fetching infinite.')
+        if (this.currentPage + 1 > this.$page.posts.pageInfo.totalPages) {
+          console.log('State complete.')
+          $state.complete()
+        } else {
+          const { data } = await this.$fetch(
+            `/${this.currentPage + 1}`
+          )
+          if (data.posts.edges.length) {
+            console.log('Pushing next posts')
+            this.currentPage = data.posts.pageInfo.currentPage
+            this.loadedPosts.push(...data.posts.edges)
+            $state.loaded()
+          } else {
+            console.log('Bad data: state complete')
+            $state.complete()
+          }
+        }
+      }
+    }
   }
 </script>
 

yarn.lock

@@ -9049,6 +9049,11 @@ vue-hot-reload-api@^2.3.0:
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
   integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
 
+vue-infinite-loading@^2.4.5:
+  version "2.4.5"
+  resolved "https://registry.yarnpkg.com/vue-infinite-loading/-/vue-infinite-loading-2.4.5.tgz#cc20fd40af7f20188006443c99b60470cf1de1b3"
+  integrity sha512-xhq95Mxun060bRnsOoLE2Be6BR7jYwuC89kDe18+GmCLVrRA/dU0jrGb12Xu6NjmKs+iTW0AA6saSEmEW4cR7g==
+
 vue-loader@^15.7.1:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.7.2.tgz#cc89e2716df87f70fe656c9da9d7f8bec06c73d6"