Vuetify vertical divider with text

Creating Elegant Vertical Dividers with Text in Vuetify

Learn how to implement stylish and functional vertical dividers with embedded text using Vuetify, enhancing layout clarity and user experience in your Vue.js applications.

Vuetify provides a rich set of UI components, but sometimes you need to combine them to achieve specific design patterns. A common requirement is a vertical divider that includes descriptive text, often used to separate sections or indicate 'OR' conditions. While Vuetify offers v-divider for horizontal and vertical lines, embedding text directly requires a bit of creative component composition. This article will guide you through creating a reusable vertical divider component with text, offering both basic and advanced customization options.

Understanding Vuetify Dividers

The v-divider component in Vuetify is straightforward for creating simple lines. By default, it's horizontal. To make it vertical, you simply add the vertical prop. However, it doesn't natively support content insertion. Our approach will involve using a flex container to align the divider with a <span> or other text element, and then styling it to appear as a single, cohesive unit.

<template>
  <v-container>
    <v-row>
      <v-col>
        <div>Section A</div>
      </v-col>
      <v-divider vertical></v-divider>
      <v-col>
        <div>Section B</div>
      </v-col>
    </v-row>
  </v-container>
</template>

A basic vertical divider separating two columns.

Composing a Vertical Divider with Text

To embed text, we'll wrap our divider and text within a flex container. The key is to use two v-divider components, one above and one below the text, all arranged vertically. This gives the appearance of a single divider line broken by the text. We'll use Vuetify's spacing helpers and align-items-center to ensure everything lines up correctly.

<template>
  <div class="d-flex align-center my-4">
    <v-divider></v-divider>
    <span class="mx-4 text-body-2 text-medium-emphasis">{{ text }}</span>
    <v-divider></v-divider>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  text: {
    type: String,
    default: 'OR'
  }
});
</script>

<style scoped>
/* Optional: Add custom styling here if needed */
</style>

A reusable component for a vertical divider with text.

This component can then be used anywhere you need a textual separator. For example, between login options like 'Sign in with Email' and 'Sign in with Google'.

Integrating into a Layout

When integrating this component, you'll typically place it within a flex row or column, depending on your layout. For a vertical divider, you'd usually have content on either side. Here's an example of how you might use it in a login form context.

<template>
  <v-container>
    <v-row justify="center">
      <v-col cols="12" sm="8" md="6" lg="4">
        <v-card class="pa-4">
          <v-card-title class="text-h5 text-center">Login</v-card-title>
          <v-card-text>
            <v-btn block color="primary" class="mb-3">Sign in with Email</v-btn>

            <CustomVerticalDivider text="OR"></CustomVerticalDivider>

            <v-btn block color="blue-darken-1" prepend-icon="mdi-google" class="mt-3">Sign in with Google</v-btn>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script setup>
import CustomVerticalDivider from './CustomVerticalDivider.vue';
</script>

Example usage of the CustomVerticalDivider component in a login form.

Visualizing the custom vertical divider with text in a login form.

Customization and Styling

You can further customize this component by passing props for text color, divider thickness, or even slots for more complex content. Vuetify's utility classes like text-body-2, text-medium-emphasis, mx-4, my-4, d-flex, and align-center are crucial for quick styling. For more specific design requirements, you can add custom CSS to the CustomVerticalDivider.vue component.

<style scoped>
.custom-divider-wrapper {
  padding: 0 16px;
  /* Adjust padding around the text */
}

.custom-divider-text {
  font-weight: bold;
  color: #616161; /* Custom text color */
  white-space: nowrap;
}

.v-divider {
  border-color: #bdbdbd !important; /* Custom divider color */
  border-width: 1px !important;
}
</style>

Example of custom CSS to enhance the divider's appearance.

1. Step 1

Create a new Vue component (e.g., CustomVerticalDivider.vue) to encapsulate the divider logic.

2. Step 2

Inside the component's template, use a div with d-flex and align-center classes to create a flex container.

3. Step 3

Place two v-divider components, one before and one after a <span> element that holds your text.

4. Step 4

Apply Vuetify spacing utilities (e.g., mx-4, my-4) and text styling (e.g., text-body-2, text-medium-emphasis) to achieve the desired visual balance.

5. Step 5

Define a text prop for your component to make the divider text customizable.

6. Step 6

Import and use your CustomVerticalDivider component wherever a vertical divider with text is needed in your application.