Skip to content
On this page

Vue Pagination Component - Flowbite

Default pagination

vue
<script setup>
import { Pagination } from 'flowbite-vue'
import { ref } from 'vue'

const currentPage = ref(1)
</script>
<template>
  <Pagination v-model="currentPage" :total-pages="100"></Pagination>
</template>

Default with custom length

You can use your own pages count in the row by passing props: slice-length This prop means left side and right side pages row slicing. In the example it has value 4. So row length will be 4 + 1 + 4 pages - 9 pages.

vue
<script setup>
import { Pagination } from 'flowbite-vue'
import { ref } from 'vue'

const currentPage = ref(1)
</script>
<template>
  <Pagination v-model="currentPage" :total-pages="100" :slice-length="4"></Pagination>
</template>

Pagination with navigation layout

vue
<script setup>
import { Pagination } from 'flowbite-vue'
import { ref } from 'vue'

const currentPage = ref(1)
</script>
<template>
  <div class="flex items-center justify-center text-center">
    <Pagination v-model="currentPage" :total-pages="100" :layout="'navigation'"></Pagination>
  </div>
</template>

Pagination with table layout

To use that layout you have to pass required props:

  • per-page: it's items count displayed on each page.
  • total-items: it's the total items count.

And there you don't need to use total-pages prop.

vue
<script setup>
import { Pagination } from 'flowbite-vue'
import { ref } from 'vue'

const currentPage = ref(1)
</script>
<template>
  <div class="flex items-center justify-center text-center">
    <Pagination
        v-model="currentPage"
        :layout="'table'"
        :per-page="10"
        :total-items="998"
    ></Pagination>
  </div>
</template>

Pagination with icons

vue
<script setup>
import { Pagination } from 'flowbite-vue'
import { ref } from 'vue'

const currentPage = ref(1)
</script>
<template>
  <Pagination v-model="currentPage" :total-pages="100" show-icons></Pagination>
</template>

Pagination with custom labels

vue
<script setup>
import { Pagination } from 'flowbite-vue'
import { ref } from 'vue'

const currentPage = ref(1)
</script>
<template>
  <Pagination v-model="currentPage" :total-pages="100" previous-label="<<<" next-label=">>>"></Pagination>
</template>

Released under the MIT License.