I have already written a detailed step by step article on how to implement Infinite Scroll with Nuxt.js. In there I had to use an component named Infinite-scroll to implement it.
But with a recent update it has become much easier to do this in Vuetify (v2.1+) without needing any extra components. Check the following steps, it’s super convenient with Vuetify.

Basic Setup

I have forked a project from codesandbox.io. this is a default brand new project in Nuxt.js with Vuetify latest version included.
Wait ! Before starting the main coding part, let’s delete the default code & create some markup with data from an free public API.

1.1

Inside the pages folder:

• Delete README.md
• Delete about.vue

Inside index.vue:

• change the code into the following ones:

(Creating Layout with Vuetify)

<template>
  <v-flex>
   <v-container fluid grid-list-lg class="mt-5">
    <posts/>
   </v-container>
 </v-flex>
</template>

<script>
import posts from "~/components/Posts.vue";
export default {
 components: { posts }
};
</script> 

1.2

Now, Delete all the files in the components folder and create a new component named Posts.vue and paste the following codes:

<template> 
<v-card flat> 
 <v-layout row wrap> 
  <v-flex v-for="(title, index) in titles" :key="index"> 
   <v-card flat hover class="white pb-2 mb-1 pl-2"> 
    <v-layout> 
     <v-flex xs10> 
       <div class="py-2">{{ title.body }}</div> 
     </v-flex> 
    </v-layout> 
   </v-card> 
  </v-flex> 
 </v-layout> 
</v-card> 
</template>


<script> 
import axios from "axios"; 
export default { 
 name: "Posts",
 data() { return {
  titles: [], page: 1 }; 
 },
 computed: {url() {return "https://jsonplaceholder.typicode.com/posts?_page=" + this.page}
 },
 created () {
  this.fetchData():
 },
 methods: {
  async fetchData() { const response = await axios.get(this.url)
   this.titles = response.data
  }
}
</script> 
<style>
.theme--light.v-card { background-color: #f5f5f5; }
</style>

1.3

In the layouts/default.vue file paste the following code:

<template>
 <v-app>
  <nuxt class="mb-5"/>
 </v-app>
</template>

If you followed all the steps correctly your project will look like this: link . 

You can fork this↑ , and start to experiment at the same time reading this article. Ok now let’s go to the main coding part now.

Main Part

We are going to use Intersection observer directive from Vuetify. You must have latest version of Vuetify (2.1+) to use this feature.

Now let’s add the at the following code at the Posts.vue at the bottom of the page. In our case, after </v-layout>

<v-card v-intersect="infiniteScrolling"></v-card>

In here v-intersect is the directive, and whenever the browser will contact with this v-card it will call the infiniteScrolling method.

Now let’s add the following the code in the methods section:

infiniteScrolling(entries, observer, isIntersecting) {

setTimeout(() => {
 this.page++;
 axios
  .get(this.url)
  .then(response => {
   if (response.data.length > 1) {
    response.data.forEach(item => this.titles.push(item));
   }
  })
  .catch(err => { console.log(err)})
  }, 500);
}

setTimeout is for to call the code a little bit late.

axios.get is getting the data from the API.

response.data.length is to check whether it’s getting data, if there is no data it will be false.

To know more about this observer go to this Vuetify documentation Intersection observer.

I haven’t written any explanation because I have already write about this in my earlier article here.