How to Make Infinite Scroll with Vue.js?

infinite scroll with Vue.js improves both performance and user experience by loading large lists of data piece by piece.
Especially on mobile devices, infinite scroll is preferred instead of pagination.

In this guide, we will set up a modern infinite scroll structure with Vue.js and Axios without using an external library.

What Will You Learn in This Guide?

Preparing the project environment with Vue CLI
Data extraction via API with Axios
Mathematical control of scroll events
Automatic data loading when reaching the end of the page

Prerequisites

Node.js must be installed on the computer
Basic knowledge of Vue.js and JavaScript is sufficient

1️⃣ Project Setup

npx @vue/cli create genixnode-sonsuz-kaydirma --default

This command creates a new project with the default Vue configuration.

cd genixnode-sonsuz-kaydirma
npm install axios

This step sets up Axios for HTTP requests.

2️⃣ Loading Startup Data

<template>
  <div id="app">
    <h1>GenixNode Kullanıcı Listesi</h1>

    <div
      class="kullanici-karti"
      v-for="user in users"
      :key="user.login.uuid"
    >
      <div class="avatar">
        <img :src="user.picture.large" />
      </div>

      <div class="detaylar">
        <h2>{{ user.name.first }} {{ user.name.last }}</h2>
        <ul>
          <li><strong>Doğum:</strong> {{ tarihFormatla(user.dob.date) }}</li>
          <li><strong>Konum:</strong> {{ user.location.city }}, {{ user.location.state }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

This template shows user cards in a list.

.kullanici-karti {
  display: flex;
  background: #f4f4f4;
  margin: 15px auto;
  padding: 10px;
  max-width: 600px;
  border-radius: 8px;
}

These styles organize the card appearance.

<script>
import axios from "axios";

export default {
  data() {
    return { users: [] };
  },
  methods: {
    ilkKullanicilariGetir() {
      axios.get("https://randomuser.me/api/?results=5")
        .then(res => this.users = res.data.results);
    },
    tarihFormatla(tarih) {
      return new Date(tarih).toLocaleDateString("tr-TR");
    }
  },
  beforeMount() {
    this.ilkKullanicilariGetir();
  }
};
</script>

This code fetches the first data when the page is opened.

3️⃣ Infinite Scroll Logic

yeniKullaniciGetir() {
  window.onscroll = () => {
    let sayfaSonu =
      document.documentElement.scrollTop +
      window.innerHeight >=
      document.documentElement.offsetHeight - 10;

    if (sayfaSonu) {
      axios.get("https://randomuser.me/api/")
        .then(res => {
          this.users.push(res.data.results[0]);
        });
    }
  };
}

This function checks that you have reached the bottom of the page and adds new data.

mounted() {
  this.yeniKullaniciGetir();
}

This call activates infinite scroll.

⚡ Performance Improvement (Recommended)

Scroll event is triggered very frequently. In real projects debounce is recommended:

let timeout;
window.onscroll = () => {
  clearTimeout(timeout);
  timeout = setTimeout(() => {
    // scroll kontrolü
  }, 200);
};

This method reduces unnecessary API calls.

🧠 Modern Alternative Note

Using IntersectionObserver in more advanced projects, It is a more performant solution than the second scroll calculation.

❓ Frequently Asked Questions

1. Does infinite scroll hurt SEO? Yes, if not implemented correctly. Server side rendering is recommended.

2. Is it mobile compatible? Yes. It works in all modern browsers.

3. Should I use a library? Not necessary for simple projects. It can be preferred in large projects.

🎯 Result

You have successfully set up infinite scrolling with Vue.js. This structure allows users to stay on the content longer.

You can safely publish such high-performance Vue.js applications on the GenixNode infrastructure 🚀

What Will You Learn in This Guide?​

Prerequisites​

1️⃣ Project Setup​

2️⃣ Loading Startup Data​

3️⃣ Infinite Scroll Logic​

⚡ Performance Improvement (Recommended)​

🧠 Modern Alternative Note​

❓ Frequently Asked Questions​

🎯 Result​