How to create infinite scrolling in Vue.js 3 using vInfiniteScroll
vInfiniteScroll is a directive in vueuse/components that displays a potentially infinite list, by loading more items of the list when scrolling. This video shows an implementation of the vInfiniteScroll directive.
Transcript
00:00In this video, I show how I've used the vInfiniteScrolling directive to build infinite scrolling functionality in Vue.js.
00:16This is the scrolling posts list that loads more posts as I scroll to the bottom.
00:31Now, let's take a look at the code.
00:40I've installed this package to get and use this vInfiniteScrolling directive.
00:54Here I have a reactive object for posts, the page number, total number of posts, all posts and this is for animation.
01:12When this component is mounted, I'm loading all posts.
01:24Before make the HTTP request, I need to enable the deanimation.
01:41Then I'm requesting the posts and updating the page number.
01:51I'm updating even the total number of posts and updating even the posts list.
02:06The posts list is displayed here.
02:21Here I'm using the vInfiniteScrolling directive, which calls this function when I scroll to the posts list to the bottom.
02:42Then I'm using the total number of posts and calculating the current page number by multiplying it by the number of posts per page.
03:03I'm doing this to verify if there are more posts to show.
03:13In this way, I'm avoiding to load again same posts.