Pagination Vue js

Abhishek Kovuri
Jul 10, 2020 · 2 min read

Being front-end developers, we have come across many challenges on a regular basis. we would have created many components in order to re-use them throughout our Web application.
Basically, What is the difference between page and component?
In simple words, Pages are a combination of components in most of the cases.
Components are the minute piece of design which can be reused in any number of pages.
To be related with Technical stuff,
The component is a kind of module in a programming language that has its own functionality irrespective of other code. i.e.
A module takes input and produces an output with respect to the logic
Similarly, Component also has some props and it displays the content accordingly irrespective of the Page on which it is used.
In this story, I just wanted to share the ready-made component i.e. Pagination which we normally use them on our regular basis and can be configurable as per the requirement.

The Framework I used here is Vue Js.


Options in the above code might be the number of rows that we can display in the table we show. Ideally, the rows will be multiples of 5.
: disabled — Here we disable next and previous based on the count of the pages in the data we have.
I used scss for my styling. most of the enterprise applications prefer to use scss and node-sass in their Applications.


The above component will be configurable and can be used in any of the applications.
Hope you guys liked it. If Yes, give it a clap.
If any comments or enhancements required for the above post. please feel free to comment below.

Thank you :)

From Confusion to Clarification

Nerd For Tech
Abhishek Kovuri

Written by

Frontend developer

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit