[![GitHub release (latest SemVer)](https://img.shields.io/github/v/release/lombervid/vueginate?display_name=tag&sort=semver)](https://github.com/lombervid/vueginate/releases/latest) [![npm](https://img.shields.io/npm/v/vueginate)](https://www.npmjs.com/package/vueginate) [![tests](https://github.com/lombervid/vueginate/actions/workflows/tests.yml/badge.svg)](https://github.com/lombervid/vueginate/actions/workflows/tests.yml?query=branch%3Amain) [![GitHub](https://img.shields.io/github/license/lombervid/vueginate)](https://github.com/lombervid/vueginate/blob/main/LICENSE)
# Vueginate > Pagination component for Vue 3 **_Vueginate_** is a simple pagination component for Vue 3 applications. It includes out-of-the-box component variants for some of the most popular CSS Frameworks, such as [_Tailwind CSS_](https://tailwindcss.com/), [_Bootstrap_](https://getbootstrap.com/) (4 and 5) and [_Bulma_](https://bulma.io/). ## ➜ [Demo](https://vueginate-demo.vercel.app/) ## ➜ [Try it on StackBlitz](https://stackblitz.com/edit/vueginate?file=src%2FApp.vue) ## Installation ```sh # or `yarn add vueginate` | `npm install vueginate` pnpm add vueginate ``` ## Basic usage ### Import the component Import the component and use it in your template. ```html ```
The above example will generate a code similar to the following: (click to show) ```html ```
### Events **_Vueginate_** triggers a `pageChange` event, passing a `number` parameter with the new page, every time the page changes. ```html ``` ## Styling your component ### Using default styles **_Vueginate_** includes a default styles you can import inside your script: ```html ``` or from your style: ```html ``` ### Custom styles Or you can style your component based in the classes it provides: - `vueginate-container`: pagination container `ul` - `vg-item`: every item in the list - `vg-page`: any item that is not `...`, previous/next buttons, or the current page - `vg-active`: current page - `vg-arrow`: previous/next button - `vg-disabled`: used for `...` items and for previous button (when `currentPage === 1`) and next button (when `currentPage === totalPages`) All classes are applied to the `a` (or `span` if disabled or active) element inside the `li` ## Using with CSS Frameworks **_Vueginate_** includes component variants for _Tailwind_, _Bootstrap_ and _Bulma_. You can use them importing their respective component: ```html ``` ## Roadmap - [ ] Documentation - [x] Support to be able to change the default `ul` container to `div` - [x] Support to have a fixed size for the component ## License [MIT](https://github.com/lombervid/vueginate/blob/main/LICENSE)