How to Use Dividers in Vue 3 with Vuetify 3

In this tutorial, we will explore how to create dividers lines using Vuetify.js 3 in Vue.js 3. We’ll cover vertical dividers, as well as thick dividers. 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 Dividers Example

1. Vuetify 3 Vue 3 dividers, inset dividers using the v-divider component.

Vue

<template>
  <div>
    <v-divider></v-divider>
    <v-divider inset></v-divider>
  </div>
</template>

2. Vuetify 3 Vue 3 vertical dividers line.

Vue

<template>
  <div>
    <v-divider vertical></v-divider>
  </div>
</template>

3. Vuetify 3 Vue 3 thickness dividers line. You can change the thickness value between 1 to 20.

Vue

<template>
  <div>
    <v-divider :thickness="10"></v-divider>
  </div>
</template>

4. Vuetify 3 Vue 3 dividers line with opacity. You can change the opacity value between 0, 25, 50, 75, 100.

Vue

<template>
  <div>
    <v-divider :thickness="10" class="border-opacity-75"></v-divider>
  </div>
</template>

5. Vuetify 3 Vue 3 dividers line with color. You can change it to success, info, warning, or error.

Vue

<template>
  <div>
    <v-divider :thickness="5" class="border-opacity-75" color="success"></v-divider>
  </div>
</template>

6. Vuetify 3 Vue 3 Create a card item list with inset dividers.

Vue

<template>
  <v-card class="mx-auto" max-width="425">
    <v-list lines="two">
      <v-list-subheader>Today</v-list-subheader>

      <v-list-item prepend-avatar="https://cdn.vuetifyjs.com/images/lists/1.jpg" title="Brunch this weekend?">
        <template v-slot:subtitle>
          <span class="font-weight-bold">Ali Connors</span> — I'll be in your neighborhood doing errands this
          weekend. Do you want to hang out?
        </template>
      </v-list-item>

      <v-divider inset></v-divider>

      <v-list-item prepend-avatar="https://cdn.vuetifyjs.com/images/lists/2.jpg">
        <template v-slot:title>
          Summer BBQ <span class="text-grey-lighten-1">4</span>
        </template>

        <template v-slot:subtitle>
          <span class="font-weight-bold">to Alex, Scott, Jennifer</span> — Wish I could come, but I'm out of town
          this weekend.
        </template>
      </v-list-item>

      <v-divider inset></v-divider>

      <v-list-item prepend-avatar="https://cdn.vuetifyjs.com/images/lists/3.jpg" title="Oui oui">
        <template v-slot:subtitle>
          <span class="font-weight-bold">Sandra Adams</span> — Do you have Paris recommendations? Have you ever
          been?
        </template>
      </v-list-item>
    </v-list>
  </v-card>
</template>

7. Vuetify 3 Vue 3 Create a card navbar list with vertical dividers line.

Vue

<template>
  <v-toolbar color="purple">
    <template v-slot:prepend>
      <div class="text-h5">Title</div>
    </template>

    <v-divider class="ms-3" inset vertical></v-divider>

    <v-toolbar-title>My Home</v-toolbar-title>

    <v-spacer></v-spacer>

    <v-spacer></v-spacer>

    <v-toolbar-items>
      <v-btn variant="text">News</v-btn>

      <v-divider vertical></v-divider>

      <v-btn variant="text">Blog</v-btn>

      <v-divider vertical></v-divider>

      <v-btn variant="text">Music</v-btn>
    </v-toolbar-items>

    <v-divider vertical></v-divider>

    <v-app-bar-nav-icon class="ms-2"></v-app-bar-nav-icon>
  </v-toolbar>
</template>

vuetify 3 vue 3 navbar with dividers line

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,