Vue3-basic-pagination NPM

vue3-plain-pagination

Simple pagination component for Vue3 / Nuxt3. Can be easily customized via css and/or slots.

Installation

NPM

Install the npm package.

$ npm install vue3-basic-pagination --save

Register as plugin So there is no need to import it every time.

// main.js or main.ts
import { createApp } from 'vue'
import App from './App.vue'
import PaginationPlugin from 'vue3-basic-pagination' // import component
import 'vue3-basic-pagination/styles' // register default styles

const app = createApp(App)
app.use(PaginationPlugin) // register plugin
app.mount('#app')

As component

// CustomComponent.vue
import PaginationPlugin from 'vue3-basic-pagination'

Usage

In Vue Template

Basic Usage

<basic-pagination :page-count="20" />

<BasicPagination :pageCount="20" />

Props

Name	Type	Default	Description
`page-count` (required)	`Number`		Total pages.
`page-range`	`Number`	`5`	Range of pages which displayed.
`margin-pages`	`Number`	`1`	The number of displayed pages for margins.
`show-first-last-buttons`	`Boolean`	`true`	Whether to show or hide buttons to navigate to first and last pages.
`show-prev-next-buttons`	`Boolean`	`true`	Whether to show or hide buttons to navigate to previous and next pages.
`container-class`	`string`	`vue3-basic-pagination`	CSS class name for the layout.
`page-class`	`string`	`page-item`	CSS class name for tag `li` of each page element.
`page-link-class`	`string`	`page-link`	CSS class name for tag `span` of each page element.
`disabled-class`	`string`	`disabled-item`	CSS class name for tag `li` of disabled element(s).
`first-item-class`	`string`	`first-item`	CSS class name for tag `li` of first element.
`first-item-link-class`	`string`	`first-link`	CSS class name for tag `span` of first element.
`last-item-class`	`string`	`last-item`	CSS class name for tag `li` of last element.
`last-item-link-class`	`string`	`last-link`	CSS class name for tag `span` of last element.
`prev-item-class`	`string`	`prev-item`	CSS class name for tag `li` of previous element.
`prev-item-link-class`	`string`	`prev-link`	CSS class name for tag `span` of previous element.
`next-item-class`	`string`	`next-item`	CSS class name for tag `li` of next element.
`next-item-link-class`	`string`	`next-link`	CSS class name for tag `span` of next element.
`break-view-class`	`string`	`break-item`	CSS class name for tag `li` of break element.
`break-view-link-class`	`string`	`break-link`	CSS class name for tag `span` of break element.
`active-class`	`string`	`active-item`	CSS class name for tag `li` of active element.

Using props

<template>
  <BasicPagination
    :page-count="20"
    :page-range="5"
    :margin-pages="3"
    :container-class="'custom-container-class'"
  >
  </BasicPagination>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
// import PaginationPlugin from 'vue3-basic-pagination' // uncomment if not registered as plugin

const route = useRoute()
const router = useRouter()

const customFunc = (pageIndex: number): void => {
  const query = { ...route.query, ...{ page: pageIndex } }
  router.push({ name: '', query: query })
}
</script>

Events

Name	Return Type	Description
`page-selected`	`Number`	Selected page number.

Using events

<template>
  <BasicPagination
    :page-count="20"
    @pageSelected="customFunc"
  >
  </BasicPagination>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
// import PaginationPlugin from 'vue3-basic-pagination' // uncomment if not registered as plugin

const route = useRoute()
const router = useRouter()

const customFunc = (pageIndex: number): void => {
  const query = { ...route.query, ...{ page: pageIndex } }
  router.push({ name: '', query: query })
}
</script>

Slots

Name	Description
`firstButtonContent`	Content of first page item.
`lastButtonContent`	Content of last page item.
`prevButtonContent`	Content of prev page item.
`nextButtonContent`	Content of next page item.
`pageContent`	Content of page item.
`currentPageContent`	Content of current page item.
`breakViewContent`	Content of break item.

Using slots

<BasicPagination
  :page-count="7"
>
  <template v-slot:firstButtonContent>
    <router-link :to="{ path: '' }">
      F I R S T
    </router-link>
  </template>
  <template v-slot:prevButtonContent="slotProps">
    <router-link :to="{ name: '', query: { page: slotProps.pageNumber } }">
      P R E V
    </router-link>
  </template>
  <template v-slot:breakViewContent>
    ---
  </template>
  <template v-slot:pageContent="slotProps">
    <router-link :to="{ name: '', query: { page: slotProps.pageNumber } }">
      p {{ slotProps.pageNumber }}
    </router-link>
  </template>
  <template v-slot:currentPageContent="slotProps">
    &gt;&gt; {{ slotProps.pageNumber }} &lt;&lt;
  </template>
  <template v-slot:nextButtonContent="slotProps">
    <router-link :to="{ name: '', query: { page: slotProps.pageNumber } }">
      N E X T
    </router-link>
  </template>
  <template v-slot:lastButtonContent="slotProps">
    <router-link :to="{ name: '', query: { page: slotProps.pageNumber } }">
      L A S T
    </router-link>
  </template>
</BasicPagination>

vue3-basic-pagination vue pagination

vue

@everything-registry/sub-chunk-3099

2 years ago

2 years ago

2 years ago

2 years ago