For adding the Load More functionality in the nuxt js you need to install the Vue-infinite-loading here with npm
npm install vue-infinite-loading -S
Then you need to import this package in your post file like posts.vue file. Make sure you have installed the Axios
import axios from 'axios' import InfiniteLoading from 'vue-infinite-loading'
Now your setup is ready you need to add the code on the bottom of the posts.vue file
<infinite-loading v-if="posts.length" spinner="spiral" @infinite="infiniteScroll" ></infinite-loading>
posts.length is the post array in which all the posts are store.
Then copy and paste the below code on the method functionality
infiniteScroll($state) {
setTimeout(() => {
this.page++
axios
.get(this.url)
.then((response) => {
if (response.data.posts.length > 1) {
response.data.posts.forEach((item) => this.posts.push(item))
$state.loaded()
} else {
$state.complete()
}
})
.catch((err) => {
console.log(err)
})
}, 1000)
}
setTimeout is for to call the code a little bit late.
axios.get is getting the data from the api.
response.data.posts.length is to check whether it’s getting data, if there is no data it will be false.
response.data.posts.forEach((item) => this.posts.push(item)) is adding every new item from array to the posts
$state.loaded(),$state.complete() is the animation of loading the component.
Complete script code
><script>
import axios from 'axios'
import InfiniteLoading from 'vue-infinite-loading'
export default {
name: 'Posts',
data() {
return {
posts: [],
page: 1
}
},
computed: {
url() {
return 'Paste your API URL here'
}
},
created() {
this.fetchData()
},
methods: {
async fetchData() {
const response = await axios.get(this.url)
this.posts = response.data.posts
},
infiniteScroll($state) {
setTimeout(() => {
this.page++
axios
.get(this.url)
.then((response) => {
if (response.data.posts.length > 1) {
response.data.posts.forEach((item) => this.posts.push(item))
$state.loaded()
} else {
$state.complete()
}
})
.catch((err) => {
console.log(err)
})
}, 1000)
}
},
components: {
InfiniteLoading
}
}
></script>
