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


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

You also can use v-page in local component

  <page />

<script setup>
import { Page } from 'v-page'



<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 }