Loading a large dataset in our web application is inefficient and often slows the application.
Pagination helps load large datasets into smaller chunks of data, making the application fast and more responsive by reducing the memory footprint of your application, ensuring it remains efficient and can handle more users simultaneously.
Pagination simplifies navigating large datasets by providing an easy-to-use navigation system in the table component. It also helps showcase data in a structured and organized manner.
To create a Pagination in Vue.js 3.4, we will use the bootstrap-vue-next library. This library is compatible with Vue.js’s latest version (3.x) and incompatible with Vue.js 2.x.
It is considered best practice to use the latest version of Vue.js, and hence, bootstrap-vue-next is the perfect library for creating a pagination component.
Here is the step-by-step guide:
Step 1: Create a new Vue project
There are many ways to create a new Vue.js project, but based on my experience, I will use the Vite template because it is very lightweight and fast to develop.
Type the following command to create a new project:
npm create vite@latest pagination-app -- --template vue
It will create a new project folder called “pagination-app”.
Go inside the project and install the dependencies using these commands:
cd pagination-app npm install
Step 2: Install bootstrap-vue-next and Bootstrap
The bootstrap-vue-next library is specifically designed to work with Vue 3, ensuring compatibility with the latest features and updates of the Vue framework.
If you are transitioning from Vue 2 to Vue 3, you can check out the bootstrap-vue-next. It provides an API similar to bootstrap-vue, making the migration process smoother.
Install it with other supportive modules using the below command:
npm install bootstrap bootstrap-vue-next @popperjs/core
Step 3: Configure bootstrap-vue-next
If you check out the project folder, it has a folder named “src”; if you go inside that folder, you will see a main.js file. Import the bootstrap-vue-next library inside the main.js file like this:
import { createApp } from 'vue'; import App from './App.vue'; import 'bootstrap/dist/css/bootstrap.css'; import 'bootstrap-vue-next/dist/bootstrap-vue-next.css'; import { BTable, BPagination } from 'bootstrap-vue-next'; const app = createApp(App); app.component('BTable', BTable); app.component('BPagination', BPagination); app.mount('#app');
In this code, we first imported the bootstrap.css and bootstrap-vue-next.css files.
Then, we manually imported and registered BTable and BPagination components.
Step 4: Create fake data
To display pagination, we need lots of data. In real life, this data comes from an external API or any third-party data source.
For our demo application, we will use a library called faker.js to create fake data.
Let’s install the @faker-js/faker library:
npm install @faker-js/faker
To generate fake data, you must create a function that returns an array of fake data.
import { faker } from '@faker-js/faker'; const fields = ['id', 'name', 'email']; const perPage = 10; const currentPage = ref(1); const generateFakeData = () => { let data = []; for (let i = 1; i <= 100; i++) { data.push({ id: i, name: faker.person.fullName(), email: faker.internet.email(), }); } return data; };
We will integrate this code into the Paginate component soon.
Step 5: Create a Paginate component
Create a new “components ” folder inside the “src” folder.
Inside the “components” folder, create a new Vue component called PaginatedList.vue and add the below code:
<template> <div class="container mt-4"> <b-table :items="paginatedData" :fields="fields" class="table table-striped table-hover"></b-table> <div class="d-flex justify-content-center mt-4"> <b-pagination v-model="currentPage" :total-rows="totalRows" :per-page="perPage" aria-controls="my-table"></b-pagination> </div> </div> </template> <script setup> import { ref, computed } from 'vue'; import { faker } from '@faker-js/faker'; const fields = ['id', 'name', 'email']; const perPage = 10; const currentPage = ref(1); const generateFakeData = () => { let data = []; for (let i = 1; i <= 100; i++) { data.push({ id: i, name: faker.person.fullName(), email: faker.internet.email(), }); } return data; }; const allData = ref(generateFakeData()); const totalRows = computed(() => allData.value.length); const paginatedData = computed(() => { const start = (currentPage.value - 1) * perPage; const end = currentPage.value * perPage; return allData.value.slice(start, end); }); </script>
In this code, we used the <b-table> component to create a table component from Bootstrap-Vue-Next. It binds the paginatedData array to the table, which contains the data to be displayed.
The <b-pagination> is a pagination component from bootstrap-vue-next.
The v-model=”currentPage” property adds two-way data binding for the current page number.
The :total-rows=”totalRows” property binds the total number of rows to the totalRows computed property.
The :per-page=”perPage” property binds the number of items per page to the perPage constant.
Inside the <script> tag, we imported ref and computed from Vue.
The ref creates a reactive state, and computed creates computed properties.
Then, we imported the faker library. The generateFakeData() function creates 100 fake data.
In the next step, we created a computed property totalRows that returns the total number of items in allData.
The paginatedData is a computed property that returns a slice of allData based on the current page. The slice is calculated using the start and end indices, which are determined by currentPage and perPage.
Step 6: Import the PaginatedList component
The last step is to import the PaginatedList component in src/App.vue file:
<template> <div id="app"> <PaginatedList /> </div> </template> <script setup> import PaginatedList from './components/PaginatedList.vue'; </script>
Save the file and start the development server using this command:
npm run dev
That’s all!
Bogdan
Thank you.
Is it possible to integrate content management for final user?
For example create posts, edit/delete posts.
Also im interested to know if there is any online service which could work as CMS for vue application
I’m just started learning vue
Rustem
hi, Bogdan?
see https://www.storyblok.com/
Rustem
HI, Krunal
axios must be installed? if so, how to do it in Laravel?
Rustem
so maybe you will demonstrate how to install npm packages, for use in * .vue. In the Laravel project.
vijay
Nice Tutorial.!