Infinite Scrolling using Vue3 and IntersectionObserver
Hi folks! In this article, we are going to build an infinite scroller component using Vue3 and IntersectionObserver.
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
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
- Create a
src/components/InfiniteScroller.vuefile 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
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
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
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
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.
- If you noticed, the
infiniteevent 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
100pxabove the bottom of the page. You can achieve it by just specifying
rootMargin: '100px'in the
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
infinite event and call it inside your event listener.
And that’s it. Thank you!