Flowbite Vue 3Vue 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>