v-page

v-page ·

A simple pagination bar for vue3, including size Menu, i18n support

If you are using vue 2.x version, please use v-page 2.x version instead

Examples and Documentation

Documentation and examples and please visit below sites

• github-pages

Installation

# npm
npm i v-page
# yarn
yarn add v-page
# pnpm
pnpm add 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>

Changelog

3.0.0-beta.3 (2023-09-09)

• Update the .d.ts related settings of package.json