Nerd For Tech
Published in

Nerd For Tech

Pagination Vue js

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 :)



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store