Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lombervid/vueginate
A simple pagination component for Vue 3
https://github.com/lombervid/vueginate
pagination pagination-component vue-component vue-pagination vue3-component vue3-pagination
Last synced: about 2 months ago
JSON representation
A simple pagination component for Vue 3
- Host: GitHub
- URL: https://github.com/lombervid/vueginate
- Owner: lombervid
- License: mit
- Created: 2023-04-21T19:06:31.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-25T20:15:47.000Z (5 months ago)
- Last Synced: 2024-10-29T06:57:02.150Z (2 months ago)
- Topics: pagination, pagination-component, vue-component, vue-pagination, vue3-component, vue3-pagination
- Language: Vue
- Homepage: https://vueginate-demo.vercel.app
- Size: 146 KB
- Stars: 5
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/lombervid/vueginate/releases/latest)
[](https://www.npmjs.com/package/vueginate)
[](https://github.com/lombervid/vueginate/actions/workflows/tests.yml?query=branch%3Amain)
[](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
import { reactive } from 'vue'
import { Vueginate } from 'vueginate'
const data = reactive({
totalItems: 86,
currentPage: 9,
itemsPerPage: 5,
})
```
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
// ...
function updateData(page: number) {
data.currentPage = page
}
```
## Styling your component
### Using default styles
**_Vueginate_** includes a default styles you can import inside your script:
```html
import 'vueginate/css/vueginate.css'
```
or from your style:
```html
/* or `@import 'vueginate/css/vueginate.css';` */
@import 'vueginate';
```
### 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
import { VueginateTailwind } from 'vueginate'
import { VueginateBootstrap } from 'vueginate'
import { VueginateBulma } from 'vueginate'
// ...
```
## 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)