vue-basic-pagination

A Basic Vue.js pagination component. (Compatible with Vue.js 3)

Sandbox

Installation

NPM

$ npm install vue-basic-pagination

Register the component globally...

import { createApp } from 'vue'
import App from './App.vue'

import { VueBasicPagination } from 'vue-basic-pagination';
import 'vue-basic-pagination/dist/style.css'
// don't forget to load the css file

createApp(App)
.component('VueBasicPagination', VueBasicPagination)
.mount('#app')

... or import it locally

<script setup>
import { VueBasicPagination } from 'vue-basic-pagination';
import 'vue-basic-pagination/dist/style.css'
</script>

Usage

<VueBasicPagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" />

<script setup>
import { ref } from 'vue'

const totalRows = ref(100)
const perPage = ref(10)
const currentPage = ref(1)
</script>

Available props

Prop	Type	Default
totalRows	Number	1
perPage	Number	1
prevBtn	String	‹
nextBtn	String	›
firstBtn	String	«
lastBtn	String	»
small	Boolean	false

Events

Event	Description
change	Triggers when you select any page