In this tutorial, we will see pagination using Vuetifyjs 3 in Vue.js 3 . We will see pagination with icon, circle pagination and length Before we begin, you need to install and configure Vuetify 3 in Vue 3.
How to Install Vuetify 3 in Vue 3
Vuetify 3 Vue 3 Pagination Example
1. Vuetify 3 vue 3 basic pagination using v-pagination
component.
<template>
<div>
<v-pagination :length="6"></v-pagination>
</div>
</template>
2. Vuetify 3 vue 3 rounded and circle paginations.
<template>
<div class="text-center">
<v-pagination v-model="page" :length="4" rounded="circle"></v-pagination>
<v-pagination v-model="page" :length="4" rounded="0"></v-pagination>
</div>
</template>
<script>
export default {
data() {
return {
page: 1,
};
},
};
</script>
3. Vuetify 3 vue 3 disabled pagination items can be manually deactivated using the disabled prop.
<template>
<div class="text-center">
<v-pagination
:length="3"
disabled
></v-pagination>
</div>
</template>
4. Vuetify 3 vue 3 pagination with icon.
<template>
<div class="text-center">
<v-pagination
v-model="page"
:length="4"
prev-icon="mdi-menu-left"
next-icon="mdi-menu-right"
></v-pagination>
</div>
</template>
<script>
export default {
data() {
return {
page: 1,
};
},
};
</script>
5. Vuetify 3 vue 3 using the length prop you can set the length of v-pagination
, if the number of page buttons exceeds the parent container, it will truncate the list.
<template>
<div class="text-center">
<v-container>
<v-row justify="center">
<v-col cols="8">
<v-container class="max-width">
<v-pagination
v-model="page"
class="my-4"
:length="15"
></v-pagination>
</v-container>
</v-col>
</v-row>
</v-container>
</div>
</template>
<script>
export default {
data() {
return {
page: 1,
};
},
};
</script>
6. Vuetify 3 vue 3 pagination with total visible. You can also manually set the maximum number of visible page buttons with the total-visible prop.
<template>
<div class="text-center">
<v-pagination v-model="page" :length="15" :total-visible="7"></v-pagination>
</div>
</template>
<script>
export default {
data() {
return {
page: 1,
};
},
};
</script>
Javed sheikh
Hello there! I’m Javed Sheikh, a frontend developer with a passion for crafting seamless user experiences. With expertise in JavaScript frameworks like Vue.js, Svelte, and React, I bring creativity and innovation to every project I undertake. From building dynamic web applications to optimizing user interfaces,