How to Create Pagination in Vue: Simple Guide with Example

To create pagination in Vue, use reactive data to track the current page and items per page, then use a computed property to slice the data array for the current page. Add buttons to change the page number and update the displayed items dynamically.

Syntax

Pagination in Vue typically involves these parts:

• data: Holds the current page number and items per page.
• computed: Calculates which items to show based on the current page.
• methods: Functions to change the current page.
• template: Displays the current page items and navigation buttons.

vue

export default {
  data() {
    return {
      currentPage: 1,
      itemsPerPage: 5,
      items: []
    };
  },
  computed: {
    pagedItems() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      return this.items.slice(start, start + this.itemsPerPage);
    }
  },
  methods: {
    goToPage(page) {
      this.currentPage = page;
    }
  }
};

Example

This example shows a simple Vue component that paginates a list of 15 items, displaying 5 per page with buttons to navigate pages.

vue

<template>
  <div>
    <ul>
      <li v-for="item in pagedItems" :key="item.id">{{ item.name }}</li>
    </ul>
    <div>
      <button
        v-for="page in totalPages"
        :key="page"
        @click="goToPage(page)"
        :disabled="page === currentPage"
      >
        {{ page }}
      </button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      itemsPerPage: 5,
      items: Array.from({ length: 15 }, (_, i) => ({ id: i + 1, name: `Item ${i + 1}` }))
    };
  },
  computed: {
    pagedItems() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      return this.items.slice(start, start + this.itemsPerPage);
    },
    totalPages() {
      return Math.ceil(this.items.length / this.itemsPerPage);
    }
  },
  methods: {
    goToPage(page) {
      this.currentPage = page;
    }
  }
};
</script>

Output

Displays a list of 5 items labeled 'Item 1' to 'Item 5' initially, with buttons labeled 1, 2, 3 below. Clicking a button shows the next 5 items.

Common Pitfalls

Common mistakes when creating pagination in Vue include:

• Not updating the current page correctly, causing the displayed items not to change.
• Forgetting to compute the total number of pages, leading to missing or extra page buttons.
• Not disabling the current page button, which can confuse users.
• Not slicing the items array properly, showing wrong items or empty lists.

js

/* Wrong: Not slicing items, shows all items always */
computed: {
  pagedItems() {
    return this.items; // No pagination applied
  }
}

/* Right: Proper slicing based on currentPage and itemsPerPage */
computed: {
  pagedItems() {
    const start = (this.currentPage - 1) * this.itemsPerPage;
    return this.items.slice(start, start + this.itemsPerPage);
  }
}

Quick Reference

Tips for Vue pagination:

• Use data for current page and items per page.
• Use computed to calculate visible items and total pages.
• Use buttons with @click to change pages.
• Disable the button for the current page for clarity.
• Slice your data array carefully to avoid off-by-one errors.

Key Takeaways

Use reactive data to track the current page and items per page in Vue.

Compute the visible items by slicing the full list based on the current page.

Create page buttons that update the current page and disable the active one.

Calculate total pages to generate correct navigation buttons.

Test pagination with different data sizes to avoid off-by-one errors.