Build a Vue INFINITE SCROLLING Component

If you've ever caught yourself on social media for way too long, chances are the site you were on was using an infinite scrolling component.

An infinite scrolling component is when new content is loaded as the user scrolls down the page as opposed to separating it out into multiple pages.

They are highly effective for specific types of content such as user-generated content.

In this video, we'll build a quick Vue infinite scrolling component using template refs, event listeners, and mock data calls.

If you have any questions, leave them in the comments!

FULL ARTICLE W/ CODE

PROS AND CONS OF INFINITE SCROLLING ARTICLE

FREE VUE 3 CHEATSHEET WITH ESSENTIAL CODE SNIPPETS

follow me on twitter:

INTRO
Daily (Prod. by Lukrembo)

CHAPTERS
0:00 Introduction
0:38 Pros and Cons of Infinite Scrolling
1:21 Vue Infinite Scrolling Component Diagram
1:37 Mocking API Calls
03:22 Adding Infinite Scrolling
4:27 Final Demo

[farnaamsamadi]

I think it's not a good approach to implement infinite scrolling! I usually do this by Intersection Observer API.

[davidmichel]

Hello is it possible to make an update with vue 3 and vite pls ?

[danghanquan]

I think that is not the point the solution to solve how to wrap API link and using Axios bind the data, then limit data until scrolling to the bottom.

[ilaydelrey]

unfortunately code isnt available anymore