How to Use Vue's Infinite Scrolling

Friends, when you need to view large data sets in your application, we will clearly tell you what we want to tell you endlessly, and scrolling will be useful for you. We will clearly show you how to implement this in Vue.js.

A common user interface design approach called infinite scrolling allows users to dynamically load content as they scroll down a page. How to Use Vue's Infinite Scrolling with the help of its capabilities, the progressive JavaScript framework Vue.js offers an easy approach to achieve infinite scrolling. The following steps will show you how to leverage Vue's endless scrolling:

You can use the infinite scrolling method to show additional content as the user scrolls down the page on your app. It does away with the requirement for pagination and enables app users to keep scrolling through massive amounts of data.

Setting Up Your Vue Application

You must have a fundamental knowledge of JavaScript and Vue 3 in order to follow along with this lesson. You ought to be familiar with using Axios to manage HTTP requests.

Run the following npm command in your choice directory to create a new Vue app and start learning how to use endless scrolling:

 

"npm create vue"

You will be prompted by Vue to choose a default for your app during project setup. Select No for each feature because your app won't need any additions.

Once the new app has been created, go to its directory and use the npm command below to install the required packages:

 

npm install axios @iconify/vue @vueuse/core

The npm script installs three packages: @iconify/vue for simple icon integration in Vue, @axios for HTTP requests, and @vueuse/core for fundamental Vue utilities.

To gather information and add icons to your application, you'll utilize axios and @iconify/vue. The useInfiniteScroll component for achieving endless scrolling is part of the Vue utilities included in the @vueuse/core directory.

Getting Demonstrable Data From the JSONPlaceholder API

You need data to put the infinite scrolling function into practice. These data can be hard coded or obtained for free from a fictitious API source like JSONPlaceholder.

Since most online applications acquire their data from databases rather than from hard-coded sources, getting these data using JSONPlaceholder simulates real-world situations.

Make a new folder called api in your src directory and put it in there to get data from the API for your Vue application. Make a new JavaScript file in that folder and paste the following code into it:

 

//getComments.js

import axios from "axios";

async function getComments(max, omit) {
  try {
    const comments = await axios.get(
      `https://jsonplaceholder.typicode.com/comments?_limit=${max}&_start=${omit}`
    );
    return comments.data.map((comment) => comment.body);
  } catch (error) {
    console.error(error);
  }
}

export default getComments;

The snippet of code contains an asynchronous method that retrieves comments from the "https://jsonplaceholder.typicode.com/comments" API endpoint. The function is then exported.

The code snippet begins by importing the axios library to provide more context. The getComments function is then defined in the code with two arguments: max and omit.

The axios is contained in the getComments method.the GET request is sent to the URL using the get () function. The template literals ('') in the URL's query strings are used to interpolate the query parameters max and omit. You can now pass dynamic values into the URL in this way.

The map function is then used to retrieve the body of the comments sent from the API endpoint in a new array that is returned by the function. The code snippet logs any errors to the console if they happen. This function is then exported by the code snippet to other areas of your program.

Creating the Infinite Scroll Component

After taking care of the logic for fetching fictitious data, you can now make a new component to show the fictitious data and manage the infinite scrolling feature.

In the src/components directory, make a new file called InfiniteScroll.vue, and add the following code:

 

!-- InfiniteScroll.vue -->
script setup>
import { ref } from "vue";
import getComments from "../api/getComments";
import { useInfiniteScroll } from "@vueuse/core";

const listEl = ref ( null );

const commentsDisplayed = 20;
const commentsList = ref(await getComments(commentsDisplayed, 0));

const commentsToDisplayOnScroll = async () => {
  const newComments = await getComments(
    commentsDisplayed,
    commentsList.value.length
  );

  commentsList.value.push(...newComments);
};

useInfiniteScroll(
  listEl,
  async () => {
    await commentsToDisplayOnScroll();
  },
  { distance: 10 }
);
/script>

The script block of the InfiniteScroll component is described in the aforementioned code fragment.

Ref and useInfiniteScroll are imported from vue and @vueuse/core, respectively, in the code snippet. The getComments function from the getComments.js file is also imported by the code snippet.

The ref function is then used by the snippet to establish a listEl reference. ListEl makes a reference to the DOM element that supports endless scrolling. The number of comments that will initially be displayed on the page is represented by the commentsDisplayed variable. The code snippet's getComments function retrieves an array of comments, which are stored in commentsList.

The code snippet builds an asynchronous method called commentsToDisplayOnScroll that uses the getComments function to retrieve new comments and the spread operator to add them to the commentsList array already in use.

The code snippet then calls the useInfiniteScroll function, passing it three arguments, to enable the endless scrolling functionality.

The DOM element (listEl) reference represents the list the app user will scroll through.
An async function call when the user scrolls to trigger the fetching of new comments and appending them to the commentsList.
An optional configuration object with properties. The object { distance: 10 } specifies that the new comments should start loading when the user is 10 pixels away from the bottom of the list.

Using the Infinite Scroll Component

You must render content in the template block after handling the endless scrolling logic in the script block of the InfiniteScroll component.

The InfiniteScroll component needs the following code block pasted into it:

 

!-- InfiniteScroll.vue -->
template>
  div>
    ul ref="listEl">
      li v-for="comment in commentsList">
        {{ comment }}
      /li>
    /ul>
  /div>
/template>

This code block defines the template for a Vue component responsible for rendering a list of comments.

The ul> element contains a group of li> components produced by the v-for directive, which iterates through the commentsList array.

Data interpolation (comment) is used to display each remark from the array within a li> element. In order to enable the endless scroll function, the code block assigns the listEl reference to the ul>.

The InfiniteScroll component in your App.vue file can then be used.

 

!-- App.vue -->

script setup>
import InfiniteScroll from "./components/InfiniteScroll.vue";
import { Icon } from "@iconify/vue";
/script>

template>
  Suspense>
    InfiniteScroll />
    template #fallback>
      Icon icon="eos-icons:bubble-loading" width="250" height="250" />
    /template>
  /Suspense>
/template>

The InfiniteScroll Component and the Icon Component are imported by the code block above. The InfiniteScroll component is then encased in a Suspense component.

While Vue resolves all the asynchronous operations in the InfiniteScroll component, you can render fallback content (an icon) using the Suspense component. Now that npm run dev is active in the app's directory, you can preview your application. A user interface like the one in the following image should appear:

As long as the commentsToBeDisplayed option is set to 10, the preview above will show ten comments. The app loads more comments for you to read as you scroll down.

Web applications frequently use the infinite scrolling approach, especially social media programs like X and Tiktok. With an ever-expanding stream of stuff to read, learn from, and watch, this strategy guarantees that app users remain engaged as it continuously collects additional data, piqueing their curiosity.

What Are Microsoft Word Formulas?

The with the useInfiniteScroll component that VueUse offers, you have learnt how to use the endless scrolling technique.

The same components are frequently rendered with various HTML contents in contemporary websites. To get this uniform experience throughout all sections of a web app, you can learn to reuse Vue components.