Vue Tailwind Pagination

Vue component for creating Pagination using Tailwind CSS.

Install

npm install --save @ocrv/vue-tailwind-pagination

Usage

1. Import library styles

import '@ocrv/vue-tailwind-pagination/styles'

2. Import the components

import VueTailwindPagination from '@ocrv/vue-tailwind-pagination'

Define base data

export default {
    name: 'Pagination Example',
    components: {
        VueTailwindPagination,
    },
    data() {
        return {
            currentPage: 1,
            perPage: 5,
            total: 20
        }
    }
}

Next, in your HTML code:

<VueTailwindPagination
        :current="currentPage"
        :total="total"
        :per-page="perPage"
        @page-changed="currentPage = $event"

        text-before-input="Idź do strony"
        text-after-input="Idź"/>

More examples here