Infinite Scrolling using Vue3 and IntersectionObserver

Hi folks! In this article, we are going to build an infinite scroller component using Vue3 and IntersectionObserver.

1. Scaffolding

So first step first, let’s scaffold a new application.

I am going to use Vite for this. Let’s run the following commands in order.

/> yarn create vite infinite-scroll-vue — template vue
/> cd infinte-scroll-vue
/> yarn install
/> yarn dev

After running yarn dev you should see the application running at http://localhost:5173

Now let’s override default styles.

Go to the src/style.css file and replace all the auto-generated styles with the below.

2. Building the infinite scroller component

1. Create a src/components/InfiniteScroller.vue file and create the default vue template.

2. Now let's create a wrapper div with class scroller and also define ref with the same name.

We are also going to create a default slot and one more div with the ref endOfScroller .

3. define the scrollerclass in the style section.

4. Once we reach the bottom of the scroller we are going to emit an event with the name infinite. So let’s define that.

5. In the script section let's create variables for the two refs that we have created in the template.

6. These two refs will be bounded to the DOM once the component is rendered. so let's set up the onMounted hook and set up the IntersectionObserver

let's break it down line by line.

IntersectionObserver takes two parameters, A callback function, and config options.

The callback functions will get called with an array of entries representing the elements we are observing. In our case, we are just going to observe the endOfScrollerelement so we are just interested in the first entry.

Each entry object has multiple properties defined (You can read about them here) but we are just interested in the isIntersecting property which basically tells if the element is visible on the screen or not.

Config option also accepts multiple options but we are here just interested in setting the root element which is going to be our scroll container.

And in the last line, we are going to observe the last element inside our scroll section i.e endOfScroller.

The complete code looks like this.

7. Let's create a src/components/Card.vue component. It’s going to be a simple component that will simply render a box with the passed prop value.

8. Let's create one more component src/components/Card.vue. It is going to consume our infinite scroller component.

9. Let’s set a default vue template with some basic styles

10. Now import both of our Card and Infinite scroller components.

11. Now let’s create a function that will act like an API and return numbers based on passed offset and limit.

12. Now define the limit, offset, and items variables and a function that responds to the infinite event from our InfiniteScroller component.

13. Now let's update our template to use all of it.

This is how the complete file looks.

14. Now let’s update App.vue to use our `Cards.vue` component.

and we are done here! Head back to your browser screen and see magic unfolds.

3. Bonus

1. If you noticed, theinfinite event gets called when we reach at the absolute bottom of the page. But sometimes we want to start fetching the data before we reach the bottom. So suppose you want to start fetching the data when you are just 100px above the bottom of the page. You can achieve it by just specifying rootMargin: '100px' in the IntersectionObserver config.

InfiniteScroller.vue

2. After some time you may want to stop fetching the data may be because API is not going to return any more results or for some other reason. To achieve that you can emit observer.disconnect with infinite event and call it inside your event listener.

InfiniteScroller.vue

Cards.vue

And that’s it. Thank you!