Developing a Customizable Pagination Component with Vue.js

What will you learn in this guide?

In this guide, you will develop a dynamic and reusable pagination component using Vue.js.
The goal is to increase performance on large data sets and improve user experience.

This structure is designed to be flexible and scalable, compatible with API requests.

🧠 Technical Summary

This guide explains how to develop a customizable pagination component with Vue.js.
Problem: Performance and navigation issues with large data lists.
Solution: An event-based, reusable paging component.

---

Prerequisites

• Node.js and npm must be installed on your computer
• You must have a basic understanding of Vue.js component logic

---

1️⃣ Establishing the Project and File Structure

Create a new Vue project or use your existing project.

npx @vue/cli create genixnode-sayfalama-ornegi

• This command creates Vue project with default settings.

---

cd genixnode-sayfalama-ornegi

• This command switches to the project directory.

• Then create the Pagination.vue file in the src/components folder.

---

2️⃣ Props Definitions and Basic Structure

1. Pagination component works with the data it receives from outside. In this way, it can be reused in every project.

<script>
export default {
  props: {
    gorunurButonSayisi: {
      type: Number,
      default: 3
    },
    toplamSayfa: {
      type: Number,
      required: true
    },
    sayfaBasiKayit: {
      type: Number,
      required: true
    },
    aktifSayfa: {
      type: Number,
      required: true
    }
  }
};
</script>

• This code defines the parameters that the component will receive.

---

3️⃣ Calculating Page Range

1. Instead of showing all pages, only the required range is shown.

• This calculation is done with computed features.

computed: {
  baslangicSayfasi() {
    if (this.aktifSayfa === 1) return 1;

    if (this.aktifSayfa === this.toplamSayfa) {
      return this.toplamSayfa - this.gorunurButonSayisi + 1;
    }

    return this.aktifSayfa - 1;
  },
  sayfalar() {
    const aralik = [];

    for (
      let i = this.baslangicSayfasi;
      i <= Math.min(
        this.baslangicSayfasi + this.gorunurButonSayisi - 1,
        this.toplamSayfa
      );
      i++
    ) {
      aralik.push({
        numara: i,
        pasifMi: i === this.aktifSayfa
      });
    }

    return aralik;
  },
  ilkSayfadaMi() {
    return this.aktifSayfa === 1;
  },
  sonSayfadaMi() {
    return this.aktifSayfa === this.toplamSayfa;
  }
}

• This structure produces appropriate buttons according to the active page.

---

4️⃣ Event Handling

1. $emit is used to forward user clicks to the main component.

methods: {
  ilkSayfayaGit() {
    this.$emit('sayfa-degisti', 1);
  },
  oncekiSayfayaGit() {
    this.$emit('sayfa-degisti', this.aktifSayfa - 1);
  },
  sayfayaGit(sayfaNo) {
    this.$emit('sayfa-degisti', sayfaNo);
  },
  sonrakiSayfayaGit() {
    this.$emit('sayfa-degisti', this.aktifSayfa + 1);
  },
  sonSayfayaGit() {
    this.$emit('sayfa-degisti', this.toplamSayfa);
  }
}

• This approach keeps the component independent of the API.

---

5️⃣ Adding Templates and Styles

1. Now we can make the component visible.

<template>
  <ul class="sayfalama-listesi">
    <li>
      <button @click="ilkSayfayaGit" :disabled="ilkSayfadaMi">İlk</button>
    </li>

    <li>
      <button @click="oncekiSayfayaGit" :disabled="ilkSayfadaMi">Önceki</button>
    </li>

    <li v-for="sayfa in sayfalar" :key="sayfa.numara">
      <button
        @click="sayfayaGit(sayfa.numara)"
        :disabled="sayfa.pasifMi"
        :class="{ aktif: sayfa.pasifMi }"
      >
        {{ sayfa.numara }}
      </button>
    </li>

    <li>
      <button @click="sonrakiSayfayaGit" :disabled="sonSayfadaMi">Sonraki</button>
    </li>

    <li>
      <button @click="sonSayfayaGit" :disabled="sonSayfadaMi">Son</button>
    </li>
  </ul>
</template>

.sayfalama-listesi {
  display: flex;
  gap: 6px;
  list-style: none;
  padding: 0;
}

button {
  padding: 8px 12px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.aktif {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}

• This style clearly highlights the active page.

---

6️⃣ Using Component

1. Use the Pagination component in the main application.

<template>
  <div id="app">
    <Pagination
      :toplamSayfa="20"
      :sayfaBasiKayit="10"
      :aktifSayfa="suankiSayfa"
      @sayfa-degisti="sayfaGuncelle"
    />
    <p>Görüntülenen Sayfa: {&#123; suankiSayfa &#125;}</p>
  </div>
</template>
<script>
import Pagination from './components/Pagination.vue';

export default {
  components: &#123; Pagination &#125;,
  data() {
    return {
      suankiSayfa: 1
    };
  },
  methods: {
    sayfaGuncelle(yeniSayfa) {
      this.suankiSayfa = yeniSayfa;
      console.log('Veriler getiriliyor:', yeniSayfa);
    }
  }
};
</script>

• This structure is ready for API integration.

---

❓ Frequently Asked Questions (FAQ)

1. Why aren't all pages shown? To avoid design and performance issues.

2. Is it mandatory to use $emit? Yes. It ensures that the component remains independent.

3. Is it compatible with CSS frameworks? Yes. Bootstrap or Tailwind is easily integrated.

---

🎯 Result

You now have a modular pagination component for your Vue.js projects. This structure increases performance and improves user experience.

You can safely scale your projects on the GenixNode infrastructure. 🚀