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.
<template>
<div>
<v-divider></v-divider>
<v-divider inset></v-divider>
</div>
</template>
2. Vuetify 3 Vue 3 vertical dividers line.
<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.
<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.
<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.
<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.
<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.
<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>
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,