Vue Pagination 3

Simple, generic and non-intrusive pagination component for Vue.js version 3.

• Dependencies
• Installation
  • NPM
  • Script tag
• Usage
  • Custom Event
  • Programmatic Manipulation
  • Computed Properties
  • Custom Template

Dependencies

• Vue.js (>=3.3.0). Required.
• CSS: Tailwind.

Installation

NPM

npm i @dcorrea-estrav/vue3-pagination

import the script:

import Pagination from 'vue3-pagination';

Script tag

COMING SOON

Usage

Register the component globally or locally:

app.component('pagination', Pagination);

OR

...
components: {
  Pagination
}
...

Declare the data property to be used in v-model:

{
    data() {
       return {
           page: 1
       }    
    }
}

Declare the component:

<pagination v-model="page" :records="500" :per-page="25" @paginate="myCallback"/>

props:

• records number required number of records

• per-page number required records per page.

• v-model number required Reference to the current page. Can be updated via the UI or programmatically

• options object optional:

  • chunk number max pages per chunk. Default: 10
  • chunksNavigation string Which method to use when navigating outside chunks boundries. Default: fixed. Options are:
    • scroll - the range of pages presented will incrementally change when navigating to a page outside the chunk (e.g 1-10 will become 2-11 once the user presses the next arrow to move to page 11).
    • fixed - navigation will occur between fixed chunks (e.g 1-10, 11-20, 21-30 etc.). Double arrows will be added to allow navigation to the beginning of the previous or next chunk.
  • theme string CSS theme used for styling. Supported: bootstrap3, bootstrap4,bulma. Default: bootstrap3.
  • format boolean Format numbers using a separating comma. Default: true
  • edgeNavigation Show links to first and last pages. Default: false
  • template Pass your own custom template
  • hideCount hide the count text. Default false
  • texts object optional

    • count total records text. It can consist of up to 3 parts, divided by |.

      • First part: used when there are multiple pages
      • Second part: used when there is only one page
      • Third part: used when there is only one record.

      Default: Showing {from} to {to} of {count} records|{count} records|One record

    • first First page text. Default: First

    • last last page text. Default: Last

  Note: if you want to display the page number rather than the records range, use {page} and {pages} as a placeholders. E.g: Showing page {page} out of {pages}

Custom Event

The model you bound to the component will be automatically updated. In addition, when a page is selected a custom paginate event will be dispatched. Listen to it on the component and run your callback (@paginate="myCallback($event)")

Programmatic Manipulation

The simplest way to programmatically manipulate the page is to directly update your bound model.

In addition to that you can call the following methods using a ref on you component:

• setPage(page)
• next()
• prev()
• nextChunk()
• prevChunk()

All methods return true if the page is legal and was thus set, or false otherwise.

Computed Properties

• totalPages
• totalChunks
• currentChunk

Custom Template

You can easily build your own template by copying src/Pagination.vue to your project as a starting point and modifying the contents to your needs. Then notify the component of your custom template by passing it to the template option.

import MyPagination from './MyPagination'
...
{
    options: {
        template: MyPagination    
    }   
}