https://github.com/TerryZ/v-page

A simple and useful pagination component for Vue
https://github.com/TerryZ/v-page

es6 i18n javascript page pagination vue vue-components vue2

Last synced: about 1 month ago
JSON representation

A simple and useful pagination component for Vue

• Host: GitHub
• URL: https://github.com/TerryZ/v-page
• Owner: TerryZ
• License: mit
• Created: 2018-04-16T15:47:08.000Z (over 7 years ago)
• Default Branch: dev
• Last Pushed: 2025-10-21T00:19:02.000Z (about 2 months ago)
• Last Synced: 2025-10-25T14:44:09.482Z (about 2 months ago)
• Topics: es6, i18n, javascript, page, pagination, vue, vue-components, vue2
• Language: JavaScript
• Homepage: https://terryz.github.io/docs-vue3/page/
• Size: 792 KB
• Stars: 101
• Watchers: 5
• Forks: 24
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG-CN.md
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-vue - v-page - A simple pagination bar, including length Menu, i18n support, based on Vue2.x. (Components & Libraries / UI Utilities)
• awesome-vue-zh - V-页 - 一个简单的分页栏,包括基于Vue2.x的长度菜单,i18n支持. (UI实用程序 / 分页)
• awesome-vue - v-page - A simple pagination bar, including length Menu, i18n support, based on Vue2.x. (Components & Libraries / UI Utilities)
• awesome-vue - v-page - A simple pagination bar, including length Menu, i18n support, based on Vue2.x. (Components & Libraries / UI Utilities)
• awesome-vue - v-page ★42 - A simple pagination bar, including length Menu, i18n support, based on Vue2.x. (UI Utilities / Pagination)
• awesome-vue - v-page - A simple pagination bar, including length Menu, i18n support, based on Vue2.x. (UI Utilities / Pagination)
• awesome-vue - v-page - A simple pagination bar, including length Menu, i18n support, based on Vue2.x ` 📝 9 months ago` (UI Utilities [🔝](#readme))

README

          
# [v-page](https://terryz.github.io/vue/#/page) · [![test](https://github.com/TerryZ/v-page/actions/workflows/npm-publish.yml/badge.svg?branch=master)](https://github.com/TerryZ/v-page/actions/workflows/npm-publish.yml) [![code coverage](https://codecov.io/gh/TerryZ/v-page/branch/master/graph/badge.svg)](https://codecov.io/gh/TerryZ/v-page) [![npm version](https://img.shields.io/npm/v/v-page.svg)](https://www.npmjs.com/package/v-page) [![license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://mit-license.org/) [![npm download](https://img.shields.io/npm/dy/v-page.svg)](https://www.npmjs.com/package/v-page) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

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



If you are using vue `2.x` version, please use [v-page 2.x](https://github.com/TerryZ/v-page/tree/dev-vue-2) version instead

## Examples and Documentation

Documentation and examples and please visit below sites

- [github-pages](https://terryz.github.io/docs-vue3/page/)

## Installation

[![https://nodei.co/npm/v-page.png?downloads=true&downloadRank=true&stars=true](https://nodei.co/npm/v-page.png?downloads=true&downloadRank=true&stars=true)](https://www.npmjs.com/package/v-page)

```sh

# npm

npm i v-page

# yarn

yarn add v-page

# pnpm

pnpm add v-page

```

Include and install plugin in your `main.js` file

```js

import { createApp } from 'vue'

import App from './app.vue'

import { PaginationBar } from 'v-page'

const app = createApp(App)

// install component globally

app.use(PaginationBar, {

  // globally config options

})

app.mount('#app')

```

Use `v-page` as a locally component

```vue

  

import { PaginationBar } from 'v-page'

```

## Usage

```vue

  

import { ref } from 'vue'

import { PaginationBar, type PageInfo } from 'v-page'

// set default page to 3

const pageNumber = ref<number>(3)

const totalRow = ref<number>(100)

// respond for pagination change

function paginationChange (data: PageInfo): void {

  console.log(data) // { pageNumber: 1, pageSize: 10, totalPage: 10 }

}

```