Pagination for Vue 3 & Nuxt 3

Easy and full functional Pagination

Get Started

Installation

Install via NPM:

npm install pagination-vue3

Or via YARN:

yarn add pagination-vue3

Import Globally :

import { createApp } from 'vue'
import App from './App.vue'
import PaginationPlugin from 'pagination-vue3'

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

Import in Component

import { Pagination } from 'pagination-vue3'

Main Usage

1. You just need to give array of data, It will loop the data itself.(Mandatory).
2. You have to provide array of rows(Optional).
3. Rows (For selecting the number of data show on 1 page).
4. DataArray (Data you want to show)

<Pagination :data="YourDataArray" :rows="rows"/>

Example of Data

const rows = ref([
  { key: 10, value: 10 },
  { key: 30, value: 30 },
  { key: 50, value: 50 }
])

const yourDataArray = ref([
  {
    userId: 1,
    id: 1,
    title: 'quidem molestiae enim'
  },
  {
    userId: 1,
    id: 2,
    title: 'sunt qui excepturi placeat culpa'
  },
  {
    userId: 1,
    id: 3,
    title: 'omnis laborum odio'
  },
  {
    userId: 1,
    id: 4,
    title: 'non esse culpa molestiae omnis sed optio'
  }
])

Also you have to provide UI design in template and use keys of your data.

You have to use this key mandatory

slotProps.data

 <template #default="slotProps">
            <h5>
              {{ slotProps.data.id }}
            </h5>
    </template>

👀 Full Example

import { Pagination } from 'pagination-vue3'

const rows = ref([
  { key: 10, value: 10 },
  { key: 30, value: 30 },
  { key: 50, value: 50 },
]);

const yourDataArray = ref(
[
  {
    "userId": 1,
    "id": 1,
    "title": "quidem molestiae enim"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "sunt qui excepturi placeat culpa"
  },
  {
    "userId": 1,
    "id": 3,
    "title": "omnis laborum odio"
  },
  {
    "userId": 1,
    "id": 4,
    "title": "non esse culpa molestiae omnis sed optio"
  }
]
);


<Pagination :data="yourDataArray" :rows="rows">
    <template #default="slotProps">
        <div v-for="item in slotProps.data" :key="item.id">
            <h5>
              {{ item.id }}
            </h5>
            <p>{{ item.title }}</p>
        </div>
    </template>
</Pagination>