@alkeincodes/vuejs-pagination

a simple pagination component made for VueJS

Usage no npm install needed!

<script type="module">
  import alkeincodesVuejsPagination from 'https://cdn.skypack.dev/@alkeincodes/vuejs-pagination';
</script>

README

vuejs-pagination

a simple pagination component made for VueJS

See it in action

Install package

npm install @alkeincodes/vuejs-pagination --save

Register the component globally ES6

import Pagination from '@alkeincodes/vuejs-pagination'
import '@alkeincodes/vuejs-pagination/dist/app.css'

Vue.use(Pagination)

CDN

Include the source file.

<!-- use the latest release -->
<script src="https://unpkg.com/@alkeincodes/vuejs-pagination@latest"></script>

Usage

<pagination :pages="20" :current-page="1" :per-page-size="5" @switch-page="myFunction" />

Props

  • first-label: String | Optional
  • last-label: String | Optional
  • pages: Number | Required | Total number of pages
  • current-page: Number | Required | Current highlighted page number
  • per-page-size: Number | Required | Page number shown
  • show-tray: Boolean | Optional | Show the Previous and Next Page Trays
  • has-vue-router: Boolean | Optional | If you have vue-router installed, this will help you push the current page number in to your route

Event

  • switch-page: triggers after selecting a page