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 year 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 (about 8 years ago)
• Default Branch: dev
• Last Pushed: 2025-03-12T09:14:45.000Z (over 1 year ago)
• Last Synced: 2025-04-12T23:38:54.960Z (about 1 year ago)
• Topics: es6, i18n, javascript, page, pagination, vue, vue-components, vue2
• Language: JavaScript
• Homepage: https://terryz.github.io/docs-vue3/page/
• Size: 830 KB
• Stars: 100
• Watchers: 4
• Forks: 23
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG-CN.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# [v-page](https://terryz.github.io/vue/#/page) · [![CircleCI](https://dl.circleci.com/status-badge/img/gh/TerryZ/v-page/tree/master.svg?style=svg)](https://dl.circleci.com/status-badge/redirect/gh/TerryZ/v-page/tree/master) [![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,

  PaginationPageSizeOptions,

  PaginationInfo,

  PaginationPanel,

  PaginationPageNumbers,

  PaginationFirstPage,

  PaginationPreviousPage,

  PaginationNextPage,

  PaginationLastPage

} from 'v-page'

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

}

```