Vuetify 3 Vue 3 Paginations Example

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.

Vue

<template>
  <div>
    <v-pagination :length="6"></v-pagination>
  </div>
</template>

2. Vuetify 3 vue 3 rounded and circle paginations.

Vue

<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.

Vue

<template>
  <div class="text-center">
    <v-pagination
      :length="3"
      disabled
    ></v-pagination>
  </div>
</template>

4. Vuetify 3 vue 3 pagination with icon.

Vue

<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.

Vue

<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.

Vue

<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,