V-page: Pagination Component for Vue 3
v-page is a simple and practical pagination component for Vue.js. Also includes a size Menu, i18n support and so much more.
Interact with a working demo.
Getting Started
Installation
npm i -S v-page
Include and install plugin in your main.js file
// add component in global scope as plugin
import { createApp } from 'vue'
import App from './app.vue'
import Page from 'v-page'
const app = createApp(App)
app.use(Page, {
// globally config options
})
app.mount('#app')
You also can use v-page in local component
<template>
<page />
</template>
<script setup>
import { Page } from 'v-page'
</script>
Usage
<template>
<v-page
v-model="pageNumber"
:total-row="totalRow"
@change="pageChange"
/>
</template>
<script setup>
import { ref } from 'vue'
const pageNumber = ref(3)
const totalRow = ref(100)
// respond for pagination change
function pageChange (data) {
console.log(pInfo) // { pageNumber: 1, pageSize: 10 }
}
</script>