vue3-plain-pagination
Simple pagination component for Vue3 / Nuxt3. Can be easily customized via css and/or slots.
Installation
NPM
Install the npm package.
$ npm install vue3-basic-pagination --saveRegister as plugin So there is no need to import it every time.
// main.js or main.ts
import { createApp } from 'vue'
import App from './App.vue'
import PaginationPlugin from 'vue3-basic-pagination' // import component
import 'vue3-basic-pagination/styles' // register default styles
const app = createApp(App)
app.use(PaginationPlugin) // register plugin
app.mount('#app')As component
// CustomComponent.vue
import PaginationPlugin from 'vue3-basic-pagination'Usage
In Vue Template
Basic Usage
<basic-pagination :page-count="20" />Or
<BasicPagination :pageCount="20" />Props
| Name | Type | Default | Description |
|---|---|---|---|
page-count (required)
|
Number |
Total pages. | |
page-range |
Number |
5 |
Range of pages which displayed. |
margin-pages |
Number |
1 |
The number of displayed pages for margins. |
show-first-last-buttons |
Boolean |
true |
Whether to show or hide buttons to navigate to first and last pages. |
show-prev-next-buttons |
Boolean |
true |
Whether to show or hide buttons to navigate to previous and next pages. |
container-class |
string |
vue3-basic-pagination |
CSS class name for the layout. |
page-class |
string |
page-item |
CSS class name for tag li of each page element. |
page-link-class |
string |
page-link |
CSS class name for tag span of each page element. |
disabled-class |
string |
disabled-item |
CSS class name for tag li of disabled element(s). |
first-item-class |
string |
first-item |
CSS class name for tag li of first element. |
first-item-link-class |
string |
first-link |
CSS class name for tag span of first element. |
last-item-class |
string |
last-item |
CSS class name for tag li of last element. |
last-item-link-class |
string |
last-link |
CSS class name for tag span of last element. |
prev-item-class |
string |
prev-item |
CSS class name for tag li of previous element. |
prev-item-link-class |
string |
prev-link |
CSS class name for tag span of previous element. |
next-item-class |
string |
next-item |
CSS class name for tag li of next element. |
next-item-link-class |
string |
next-link |
CSS class name for tag span of next element. |
break-view-class |
string |
break-item |
CSS class name for tag li of break element. |
break-view-link-class |
string |
break-link |
CSS class name for tag span of break element. |
active-class |
string |
active-item |
CSS class name for tag li of active element. |
Using props
<template>
<BasicPagination
:page-count="20"
:page-range="5"
:margin-pages="3"
:container-class="'custom-container-class'"
>
</BasicPagination>
</template>
<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
// import PaginationPlugin from 'vue3-basic-pagination' // uncomment if not registered as plugin
const route = useRoute()
const router = useRouter()
const customFunc = (pageIndex: number): void => {
const query = { ...route.query, ...{ page: pageIndex } }
router.push({ name: '', query: query })
}
</script>Events
| Name | Return Type | Description |
|---|---|---|
page-selected |
Number |
Selected page number. |
Using events
<template>
<BasicPagination
:page-count="20"
@pageSelected="customFunc"
>
</BasicPagination>
</template>
<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
// import PaginationPlugin from 'vue3-basic-pagination' // uncomment if not registered as plugin
const route = useRoute()
const router = useRouter()
const customFunc = (pageIndex: number): void => {
const query = { ...route.query, ...{ page: pageIndex } }
router.push({ name: '', query: query })
}
</script>Slots
| Name | Description |
|---|---|
firstButtonContent |
Content of first page item. |
lastButtonContent |
Content of last page item. |
prevButtonContent |
Content of prev page item. |
nextButtonContent |
Content of next page item. |
pageContent |
Content of page item. |
currentPageContent |
Content of current page item. |
breakViewContent |
Content of break item. |
Using slots
<BasicPagination
:page-count="7"
>
<template v-slot:firstButtonContent>
<router-link :to="{ path: '' }">
F I R S T
</router-link>
</template>
<template v-slot:prevButtonContent="slotProps">
<router-link :to="{ name: '', query: { page: slotProps.pageNumber } }">
P R E V
</router-link>
</template>
<template v-slot:breakViewContent>
---
</template>
<template v-slot:pageContent="slotProps">
<router-link :to="{ name: '', query: { page: slotProps.pageNumber } }">
p {{ slotProps.pageNumber }}
</router-link>
</template>
<template v-slot:currentPageContent="slotProps">
>> {{ slotProps.pageNumber }} <<
</template>
<template v-slot:nextButtonContent="slotProps">
<router-link :to="{ name: '', query: { page: slotProps.pageNumber } }">
N E X T
</router-link>
</template>
<template v-slot:lastButtonContent="slotProps">
<router-link :to="{ name: '', query: { page: slotProps.pageNumber } }">
L A S T
</router-link>
</template>
</BasicPagination>