tutorial

We can use a sparkline to give a visual representation of numerical or statistical information with simple graphs. In this extensive guide, we’ll learn how to use the Vuetify sparkline component to easily create and customize sparklines.

The Vuetify Sparkline Component (v-sparkline)

Vuetify provides the v-sparkline component for creating a sparkline. It has a value prop that takes an array containing the data to be represented:

<template>
  <v-app>
    <div class="ma-4">
      <v-sparkline
        :value="value"
        smooth="10"
      ></v-sparkline>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    value: [0, 4, 2, 7, 6, 9, 4, 8, 0, 0, 2, 7, 3, 10, 5],
  }),
};
</script>

Vuetify Sparkline Stroke Line Cap

The sparkline has a sharp line cap by default. We can make it round by setting the stroke-linecap prop to round:

<template>
  <v-app>
    <div class="ma-4">
      <v-sparkline
        :value="value"
        smooth="10"
        stroke-linecap="round"
      ></v-sparkline>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    value: [0, 4, 2, 7, 6, 9, 4, 8, 0, 0, 2, 7, 3, 10, 5],
  }),
};
</script>

Vuetify Sparkline Fill

We can color the region below the sparkline by setting the fill prop to true:

<template>
  <v-app>
    <div class="ma-4">
      <v-sparkline
        :value="value"
        smooth="10"
        fill
      ></v-sparkline>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    value: [0, 4, 2, 7, 6, 9, 4, 8, 0, 0, 2, 7, 3, 10, 5],
  }),
};
</script>

Vuetify Sparkline Line Width

We can use the line-width prop to control the thickness of the sparkline.

<template>
  <v-app>
    <div class="ma-4">
      <v-sparkline
        :value="value"
        smooth="10"
        line-width="2"
        stroke-linecap="round"
      ></v-sparkline>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    value: [0, 4, 2, 7, 6, 9, 4, 8, 0, 0, 2, 7, 3, 10, 5],
  }),
};
</script>

Sparkline Color

v-sparkline comes with a color prop for customizing the color of the sparkline. We can use any color from the Material design specs.

<template>
  <v-app>
    <div class="ma-4">
      <v-sparkline
        :value="value"
        smooth="10"
        color="red accent-2"
        stroke-linecap="round"
      ></v-sparkline>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    value: [0, 4, 2, 7, 6, 9, 4, 8, 0, 0, 2, 7, 3, 10, 5],
  }),
};
</script>

Vuetify Sparkline Smooth

With the smooth prop, we can set the roundness of the corners formed from the sparkline tracing the data points. We can pass a number or a boolean value to smooth. Setting it to true sets a corner radius of 8px. In the code example below, we set it to 5 (for a corner radius of 5px):

<template>
  <v-app>
    <div class="ma-4">
      <v-sparkline
        :value="value"
        smooth="5"
        stroke-linecap="round"
      ></v-sparkline>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    value: [0, 4, 2, 7, 6, 9, 4, 8, 0, 0, 2, 7, 3, 10, 5],
  }),
};
</script>

Setting smooth to false will set the corner radius to 0px:

<template>
  <v-app>
    <div class="ma-4">
      <v-sparkline
        :value="value"
        :smooth="false"
      ></v-sparkline>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    value: [0, 4, 2, 7, 6, 9, 4, 8, 0, 0, 2, 7, 3, 10, 5],
  }),
};
</script>

Vuetify Sparkline Padding

We can add padding to the sparkline with the padding property. It has a padding of 8 by default.

<template>
  <v-app>
    <v-card class="ma-4">
      <v-sparkline
        :value="value"
        smooth="10"
        padding="10"
        stroke-linecap="round"
      ></v-sparkline>
    </v-card>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    value: [0, 4, 2, 7, 6, 9, 4, 8, 0, 0, 2, 7, 3, 10, 5],
  }),
};
</script>

Vuetify Sparkline Auto Draw

Setting the auto-draw prop to true on a v-sparkline will make the sparkline run a trace animation when first rendered.

<template>
  <v-app>
    <div class="ma-4">
      <v-sparkline
        :value="value"
        smooth="10"
        padding="10"
        stroke-linecap="round"
        auto-draw
      ></v-sparkline>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    value: [0, 4, 2, 7, 6, 9, 4, 8, 0, 0, 2, 7, 3, 10, 5],
  }),
};
</script>

Sparkline Auto Draw Duration

The auto-draw-duration prop allows us to set the duration of the trace animation in milliseconds. It has a default value of 2000 (2 seconds).

<template>
  <v-app>
    <div class="ma-4">
      <v-sparkline
        :value="value"
        smooth="10"
        padding="10"
        stroke-linecap="round"
        auto-draw
        :auto-draw-duration="4000"
      ></v-sparkline>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    value: [0, 4, 2, 7, 6, 9, 4, 8, 0, 0, 2, 7, 3, 10, 5],
  }),
};
</script>

Sparkline Auto Draw Easing

We can specify the easing function of the trace animation with the auto-draw-easing prop:

<template>
  <v-app>
    <div class="ma-4">
      <v-sparkline
        :value="value"
        smooth="10"
        padding="10"
        stroke-linecap="round"
        auto-draw
        :auto-draw-duration="4000"
        auto-draw-easing="linear"
      ></v-sparkline>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    value: [0, 4, 2, 7, 6, 9, 4, 8, 0, 0, 2, 7, 3, 10, 5],
  }),
};
</script>

Vuetify Sparkline Type

By setting the type prop to bar, we can make v-sparkline show a set of bars instead of a line. The default type is trend which shows the continuous line.

<template>
  <v-app>
    <div class="ma-4">
      <v-sparkline
        :value="value"
        smooth="10"
        padding="10"
        stroke-linecap="round"
        type="bar"
      ></v-sparkline>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    value: [0, 4, 2, 7, 6, 9, 4, 8, 0, 0, 2, 7, 3, 10, 5],
  }),
};
</script>

Vuetify Sparkline Gradient

We can set the color of the sparkline to a linear gradient with the gradient prop. gradient takes an array of colors to use for the linear gradient.

<template>
  <v-app>
    <div class="ma-4">
      <v-sparkline
        :value="value"
        smooth="10"
        padding="10"
        stroke-linecap="round"
        :gradient="gradient"
      ></v-sparkline>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    value: [0, 4, 2, 7, 6, 9, 4, 8, 0, 0, 2, 7, 3, 10, 5],
    gradient: ['red', 'orange', 'yellow'],
  }),
};
</script>

Vuetify Sparkline Gradient Direction

The gradient-direction property of v-sparkline sets the direction in which the color gradient should run.

<template>
  <v-app>
    <div class="ma-4">
      <v-sparkline
        :value="value"
        smooth="10"
        padding="10"
        stroke-linecap="round"
        :gradient="gradient"
        gradient-direction="bottom"
      ></v-sparkline>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    value: [0, 4, 2, 7, 6, 9, 4, 8, 0, 0, 2, 7, 3, 10, 5],
    gradient: ['red', 'orange', 'yellow'],
  }),
};
</script>

Conclusion

A sparkline displays simple graphs that visually represent numerical or statistical information. We can use the Vuetify sparkline component (v-sparkline) and its various prop to create and customize sparklines.

Vuetify provides utility classes that allow us to easily configure how content overflows when its size becomes greater than the bounds of its container. We’re going to learn how to use them in this article.

The classes are in the format {overflow}-{value}. overflow can be any of overflow, overflow-x and overflow-y, while value can be any of auto, hidden and visible. Here are all the overflow helper classes from Vuetify:

• overflow-auto
• overflow-hidden
• overflow-visible
• overflow-x-auto
• overflow-x-hidden
• overflow-x-visible
• overflow-y-auto
• overflow-y-hidden
• overflow-y-visible

Vuetify Overflow Classes

• overflow-auto: adds scrollbars to an element when its content overflows it bounds in the vertical or horizontal direction.
• overflow-hidden: clips content that overflows the bounds of its container in the vertical or horizontal direction.
• overflow-visible: allows content to be rendered outside the bounds of its container in the vertical or horizontal direction.

<template>
  <v-app>
    <v-row class="ma-4">
      <v-col cols="4">
        <v-card
          class="overflow-auto"
          height="200"
        >
          <v-card-text style="width: 300px">
            <h3>Overflow Auto</h3>
            Lorem ipsum dolor sit amet consectetur
            adipisicing elit. Quam repudiandae magnam dolor
            asperiores nisi officia, necessitatibus, ex
            alias consequuntur ullam qui optio, obcaecati
            minima modi quaerat explicabo. Quia, ipsa minus.
            Lorem ipsum dolor, sit amet consectetur
            adipisicing elit. Delectus, voluptatum? Nobis
            ratione eos praesentium. Iusto pariatur magni
            eveniet provident hic incidunt iure minima
            voluptatem. Corrupti alias delectus in culpa
            quis.
          </v-card-text>
        </v-card>
      </v-col>
      <v-col cols="4">
        <v-card
          class="overflow-hidden"
          height="200"
        >
          <v-card-text style="width: 300px">
            <h3>Overflow Hidden</h3>
            Lorem ipsum dolor sit amet consectetur
            adipisicing elit. Quam repudiandae magnam dolor
            asperiores nisi officia, necessitatibus, ex
            alias consequuntur ullam qui optio, obcaecati
            minima modi quaerat explicabo. Quia, ipsa minus.
            Lorem ipsum dolor, sit amet consectetur
            adipisicing elit. Delectus, voluptatum? Nobis
            ratione eos praesentium. Iusto pariatur magni
            eveniet provident hic incidunt iure minima
            voluptatem. Corrupti alias delectus in culpa
            quis.
          </v-card-text>
        </v-card>
      </v-col>
      <v-col cols="4">
        <v-card
          class="overflow-visible"
          height="200"
        >
          <v-card-text style="width: 300px">
            <h3>Overflow Visible</h3>
            Lorem ipsum dolor sit amet consectetur
            adipisicing elit. Quam repudiandae magnam dolor
            asperiores nisi officia, necessitatibus, ex
            alias consequuntur ullam qui optio, obcaecati
            minima modi quaerat explicabo. Quia, ipsa minus.
            Lorem ipsum dolor, sit amet consectetur
            adipisicing elit. Delectus, voluptatum? Nobis
            ratione eos praesentium. Iusto pariatur magni
            eveniet provident hic incidunt iure minima
            voluptatem. Corrupti alias delectus in culpa
            quis.
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Vuetify Overflow Y Classes

• overflow-y-auto: adds scrollbars to an element when its content overflows it bounds in the vertical direction.
• overflow-y-hidden: clips content that overflows the bounds of its container in the vertical direction.
• overflow-y-visible: allows content to be rendered outside the bounds of its container in the vertical direction.

<template>
  <v-app>
    <v-row class="ma-4">
      <v-col cols="4">
        <v-card
          class="overflow-y-auto"
          height="200"
        >
          <v-card-text>
            <h3>Overflow Y Auto</h3>
            Lorem ipsum dolor sit amet consectetur
            adipisicing elit. Praesentium, culpa eum
            repellat asperiores ad alias voluptas. Aliquid
            consectetur, quo delectus distinctio
            voluptatibus, numquam sequi hic eum mollitia
            optio quam esse?
          </v-card-text>
        </v-card>
      </v-col>
      <v-col cols="4">
        <v-card
          class="overflow-y-hidden"
          height="200"
        >
          <v-card-text>
            <h3>Overflow Y Hidden</h3>
            Lorem ipsum dolor sit amet consectetur
            adipisicing elit. Praesentium, culpa eum
            repellat asperiores ad alias voluptas. Aliquid
            consectetur, quo delectus distinctio
            voluptatibus, numquam sequi hic eum mollitia
            optio quam esse?
          </v-card-text>
        </v-card>
      </v-col>
      <v-col cols="4">
        <v-card
          class="overflow-y-visible"
          height="200"
        >
          <v-card-text>
            <h3>Overflow Y Visible</h3>
            Lorem ipsum dolor sit amet consectetur
            adipisicing elit. Praesentium, culpa eum
            repellat asperiores ad alias voluptas. Aliquid
            consectetur, quo delectus distinctio
            voluptatibus, numquam sequi hic eum mollitia
            optio quam esse?
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Vuetify Overflow X Classes

• overflow-x-auto: adds scrollbars to an element when its content overflows it bounds in the horizontal direction.
• overflow-x-hidden: clips content that overflows the bounds of its container in the horizontal direction.
• overflow-x-visible: allows content to be rendered outside the bounds of its container in the horizontal direction.

<template>
  <v-app>
    <div style="width: 300px;white-space:nowrap" class="ma-4">
      <h3 class="mb-3">Overflow X Auto</h3>
      <p class="overflow-x-auto blue lighten-4">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam repudiandae magnam dolor asperiores nisi officia, necessitatibus, ex alias consequuntur ullam qui optio, obcaecati minima modi quaerat explicabo. Quia, ipsa minus.
      </p>
      <h3 class="mb-3">Overflow X Hidden</h3>
      <p class="overflow-x-hidden blue lighten-4">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam repudiandae magnam dolor asperiores nisi officia, necessitatibus, ex alias consequuntur ullam qui optio, obcaecati minima modi quaerat explicabo. Quia, ipsa minus.
      </p>
      <h3 class="mb-3">Overflow X Visible</h3>
      <p class="overflow-x-visible blue lighten-4">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam repudiandae magnam dolor asperiores nisi officia, necessitatibus, ex alias consequuntur ullam qui optio, obcaecati minima modi quaerat explicabo. Quia, ipsa minus.
      </p>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Conclusion

We can use the overflow helper classes from Vuetify to control what happens to content that overflows the bounds of its container in the vertical or horizontal direction.

In this article, we’ll learn about the Vuetify calendar component and its various props and slots for creating and customizing calendars that can display events and other time-related information in various ways.

The Vuetify calendar component (v-calendar)

Vuetify provides the v-calendar component for displaying a calendar.

App.vueCopied!

<template>
  <v-app>
    <div
      class="ma-4"
      style="height: 100%"
    >
      <v-calendar></v-calendar>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>


Vuetify calendar events

We can display events in the calendar with the events prop. This property takes an array with each element representing one event. Each item in the array is an object that has a number of properties, including:

• name: sets the name of the event.
• start: sets the start date of the event.
• end: sets the end date of the event.
• timed: specifies whether the event has a defined time range or not.

App.vueCopied!

<template>
  <v-app>
    <div
      class="ma-4"
      style="height: 100%"
    >
      <v-calendar
        :events="events"
        now="2022-04-17"
      ></v-calendar>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => {
    return {
      events: [
        {
          name: 'Event 1',
          start: '2022-04-01',
          timed: false,
        },
        {
          name: 'Event 2',
          start: '2022-04-05',
          end: '2022-04-07',
        },
        {
          name: 'Event 3',
          start: '2022-04-09T08:00:00',
          end: '2022-04-09T10:00:00',
          timed: true,
        },
      ],
    };
  },
};
</script>


Vuetify calendar colors

The v-calendar component provides various ways of customizing the colors of its different parts. For example, we can set the color of a single event by passing a value to the color property of the object representing the event:

App.vueCopied!

<template>
  <v-app>
    <div
      class="ma-4"
      style="height: 100%"
    >
      <v-calendar
        :events="events"
        now="2022-04-17"
      ></v-calendar>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => {
    return {
      events: [
        {
          name: 'Event 1',
          start: '2022-04-01',
          timed: false,
          color: 'green',
        },
        {
          name: 'Event 2',
          start: '2022-04-05',
          end: '2022-04-07',
          color: 'yellow darken-3',
        },
        {
          name: 'Event 3',
          start: '2022-04-09T08:00:00',
          end: '2022-04-09T10:00:00',
          timed: true,
          color: 'red',
        },
      ],
    };
  },
};
</script>


event-color and color props

We can also the event-color prop to set the color of all events without a specified color. The color prop of v-calendar sets the color of the circle that indicates the current date in the calendar, and the color of the current day of the week.

App.vueCopied!

<template>
  <v-app>
    <div
      class="ma-4"
      style="height: 100%"
    >
      <v-calendar
        :events="events"
        now="2022-04-17"
        event-color="red accent-2"
        color="red accent-2"
      >
      </v-calendar>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => {
    return {
      events: [
        {
          name: 'Event 1',
          start: '2022-04-01',
          timed: false,
        },
        {
          name: 'Event 2',
          start: '2022-04-05',
          end: '2022-04-07',
        },
        {
          name: 'Event 3',
          start: '2022-04-09T08:00:00',
          end: '2022-04-09T10:00:00',
          timed: true,
        },
      ],
    };
  },
};
</script>


Vuetify calendar day view

By default, the calendar component displays information for each month. We can customize the view the calendar shows with the type prop. We can display information just for a particular day by setting type to day:

JavaScriptCopied!

<template>
  <v-app>
    <div
      class="ma-4"
      style="height: 100%"
    >
      <v-calendar
        :events="events"
        now="2022-04-17"
        value="2022-04-20"
        type="day"
      ></v-calendar>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => {
    return {
      events: [
        {
          name: 'Event 1',
          start: '2022-04-20T02:00:00',
          end: '2022-04-20T04:00:00',
          timed: true,
        },
        {
          name: 'Event 2',
          start: '2022-04-20T05:00:00',
          end: '2022-04-20T06:00:00',
          timed: true,
        },
        {
          name: 'Event 3',
          start: '2022-04-20T09:00:00',
          end: '2022-04-20T10:00:00',
          timed: true,
        },
      ],
    };
  },
};
</script>


Calendar day view slots

day-header and interval

There are various slots of the v-calendar component that we use to customize how the calendar displays in the day view. We can use the day-header slot to customize the content that is placed in the top container in the day view. We also have the interval slot, for customizing the content that is placed in the interval space in the day view.

App.vueCopied!

<template>
  <v-app>
    <div
      class="ma-4"
      style="height: 100%"
    >
      <v-calendar
        :events="events"
        now="2022-04-17"
        value="2022-04-20"
        type="day"
      >
        <template v-slot:day-header="{ present }">
          <div
            v-if="present"
            class="text-center"
          >
            Today
          </div>
        </template>

        <template v-slot:interval="{ hour }">
          <div class="text-center">{{ hour }} o'clock</div>
        </template>
      </v-calendar>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => {
    return {
      events: [
        {
          name: 'Event 1',
          start: '2022-04-20T02:00:00',
          end: '2022-04-20T04:00:00',
          timed: true,
        },
        {
          name: 'Event 2',
          start: '2022-04-20T05:00:00',
          end: '2022-04-20T06:00:00',
          timed: true,
        },
        {
          name: 'Event 3',
          start: '2022-04-20T09:00:00',
          end: '2022-04-20T10:00:00',
          timed: true,
        },
      ],
    };
  },
};
</script>


day-body

The day-body slot allows us to customize the content in the scrollable interval container in the day view of the calendar.

App.vueCopied!

<template>
  <v-app>
    <div
      class="ma-4"
      style="height: 100%"
    >
      <v-calendar
        ref="calendar"
        type="week"
        value="2022-04-13"
      >
        <template v-slot:day-body="{ date, week }">
          <div
            class="current-time"
            :class="{ first: date === week[0].date }"
            :style="{ top: nowY }"
          ></div>
        </template>
      </v-calendar>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    ready: false,
  }),
  computed: {
    cal() {
      return this.ready ? this.$refs.calendar : null;
    },
    nowY() {
      return this.cal
        ? this.cal.timeToY({ hour: 8, minute: 10 }) + 'px'
        : '-10px';
    },
  },
  mounted() {
    this.ready = true;
    this.scrollToTime();
    this.updateTime();
  },
  methods: {
    getCurrentTime() {
      return this.cal
        ? this.cal.times.now.hour * 60 +
            this.cal.times.now.minute
        : 0;
    },
    scrollToTime() {
      const time = this.getCurrentTime();
      const first = Math.max(0, time - (time % 30) - 30);
      this.cal.scrollToTime(first);
    },
    updateTime() {
      setInterval(() => this.cal.updateTimes(), 60 * 1000);
    },
  },
};
</script>

<style lang="scss">
.current-time {
  height: 2px;
  background-color: red;
  position: absolute;
  left: -1px;
  right: 0;
  pointer-events: none;

  &.first::before {
    content: '';
    position: absolute;
    background-color: red;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: -5px;
    margin-left: -6.5px;
  }
}
</style>


Calendar week view

We can set the type prop to week to make the calendar display information only for a particular week:

App.vueCopied!

<template>
  <v-app>
    <div
      class="ma-4"
      style="height: 100%"
    >
      <v-calendar
        :events="events"
        type="week"
        event-color="indigo"
        value="2022-04-16"
        now="2022-04-16"
      >
      </v-calendar>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => {
    return {
      events: [
        {
          name: 'Event 1',
          start: '2022-04-10T02:00:00',
          end: '2022-04-10T04:00:00',
          timed: true,
        },
        {
          name: 'Event 2',
          start: '2022-04-12T08:00:00',
          end: '2022-04-12T10:00:00',
          timed: true,
        },
        {
          name: 'Event 3',
          start: '2022-04-15T04:00:00',
          end: '2022-04-15T06:00:00',
          timed: true,
        },
      ],
    };
  },
};
</script>


Vuetify calendar click events

v-calendar comes with certain click events that we can use to add interactivity to the calendar. For example, we can listen for the @click:day event to perform an action when the user clicks a day in the calendar. Similarly, we can listen for the @click:event event to perform an action when the user clicks on an event in the calendar. We use both click events in the code example below.

App.vueCopied!

<template>
  <v-app>
    <div
      class="ma-4"
      style="height: 100%"
    >
      <!-- Event details menu -->
      <v-menu
        v-model="selectedOpen"
        :close-on-content-click="false"
        :activator="selectedElement"
        offset-x
      >
        <v-card min-width="200px">
          <v-toolbar
            color="purple accent-4"
            dark
          >
            <v-toolbar-title>
              {{ selectedEvent.name }}
            </v-toolbar-title>
          </v-toolbar>
          <v-card-text>
            <div class="text-center">
              {{ selectedEventStart }}
              to
              {{ selectedEventEnd }}
            </div>
            <v-checkbox
              readonly
              label="All day"
              :value="!selectedEvent.timed"
            >
            </v-checkbox>
          </v-card-text>
        </v-card>
      </v-menu>
      <v-calendar
        :events="events"
        event-color="purple accent-4"
        @click:day="viewDay"
        @click:event="showEvent"
        v-model="focus"
        :type="type"
        now="2022-04-23"
      ></v-calendar>
    </div>
  </v-app>
</template>

<script>
import { format } from 'date-fns';

export default {
  name: 'App',
  data: () => {
    return {
      focus: '',
      type: 'month',
      selectedOpen: false,
      selectedElement: undefined,
      selectedEvent: {},
      events: [
        {
          name: 'Event 1',
          start: '2022-04-01',
          timed: false,
        },
        {
          name: 'Event 2',
          start: '2022-04-04',
          end: '2022-04-06',
        },
        {
          name: 'Event 3',
          start: '2022-04-04T05:00:00',
          end: '2022-04-04T07:00:00',
          timed: true,
        },
        {
          name: 'Event 4',
          start: '2022-04-08T08:00:00',
          end: '2022-04-08T10:00:00',
          timed: true,
        },
      ],
    };
  },
  methods: {
    viewDay({ date }) {
      this.focus = date;
      this.type = 'day';
    },
    showEvent({ nativeEvent, event }) {
      const open = () => {
        this.selectedEvent = event;
        this.selectedElement = nativeEvent.target;
        requestAnimationFrame(() =>
          requestAnimationFrame(
            () => (this.selectedOpen = true)
          )
        );
      };

      if (this.selectedOpen) {
        this.selectedOpen = false;
        requestAnimationFrame(() =>
          requestAnimationFrame(() => open())
        );
      } else {
        open();
      }

      nativeEvent.stopPropagation();
    },
  },
  computed: {
    selectedEventStart() {
      return (
        (this.selectedEvent &&
          this.selectedEvent.start &&
          format(
            new Date(this.selectedEvent.start),
            'h:mm a'
          )) ||
        '12:00 AM'
      );
    },
    selectedEventEnd() {
      return (
        (this.selectedEvent &&
          this.selectedEvent.end &&
          format(
            new Date(this.selectedEvent.end),
            'h:mm a'
          )) ||
        '12:00 AM'
      );
    },
  },
};
</script>


The calendar starts out in the month view. When the user clicks a day, we change the calendar to the day view:

We also created a menu that will display information about an event when the user clicks it in the day or month view:

Custom calendar buttons

Calendar day slot

We can use the day slot of v-calendar to customize how a day is displayed in the week or month view. In the example below, we use this slot to create a calendar that displays the percentage of a day that was used for activities of a certain category.

App.vueCopied!

<template>
  <v-app>
    <div
      class="ma-4"
      style="height: 100%"
    >
      <v-calendar
        :now="today"
        :value="today"
        color="primary"
      >
        <template v-slot:day="{ past, date }">
          <v-row class="fill-height">
            <template v-if="past && tracked[date]">
              <v-sheet
                v-for="(percent, i) in tracked[date]"
                :key="i"
                :title="category[i]"
                :color="colors[i]"
                :width="`${percent}%`"
                height="100%"
                tile
              ></v-sheet>
            </template>
          </v-row>
        </template>
      </v-calendar>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    today: '2022-04-11',
    tracked: {
      '2022-04-01': [20, 45, 10],
      '2022-04-02': [40, 30, 0],
      '2022-04-03': [10, 25, 50],
      '2022-04-04': [25, 25, 20],
      '2022-04-05': [20],
      '2022-04-06': [20, 60, 10],
      '2022-04-07': [0, 0, 25],
      '2022-04-08': [60, 15, 20],
      '2022-04-09': [45, 0, 5],
      '2022-04-10': [30, 20, 20],
    },
    colors: ['blue', 'yellow darken-3', 'red accent-2'],
    category: ['Category 1', 'Category 2', 'Category 3'],
  }),

};
</script>


Conclusion

We can use the Vuetify calendar component (v-calendar) to create a calendar that displays events and other information for our application. This component comes with various props and slots that we can use to easily customize its appearance and behavior.

A floating action button (FAB) is used to signify the primary action to be taken on a particular screen. In this post, we’re going to learn how to use the button component (v-btn) to create FABs.

v-btn fab Prop

We can create an FAB by setting the fab prop of the button component to true:

<template>
  <v-app>
    <div class="text-center ma-4">
      <v-btn fab>
        <v-icon>mdi-plus</v-icon>
      </v-btn>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Vuetify FAB Color

We can use the color prop of the v-btn component to customize the color of the FAB.

<template>
  <v-app>
    <div class="text-center ma-4">
      <v-btn
        fab
        color="primary"
      >
        <v-icon>mdi-plus</v-icon>
      </v-btn>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Vuetify FAB Depressed

Setting the depressed prop of the v-btn component to true will remove elevation from an FAB.

<template>
  <v-app>
    <div class="text-center ma-4">
      <v-btn
        fab
        color="primary"
        depressed
      >
        <v-icon>mdi-plus</v-icon>
      </v-btn>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

FAB icon Prop

The icon prop designates the button component as an icon. It removes the background and sets the FAB icon color to the value of the color prop.

<template>
  <v-app>
    <div class="text-center ma-4">
      <v-btn
        fab
        color="primary"
        icon
      >
        <v-icon>mdi-plus</v-icon>
      </v-btn>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Vuetify FAB Outlined

We can the outlined prop of the v-btn component to create an outlined FAB.

<template>
  <v-app>
    <div class="text-center ma-4">
      <v-btn
        fab
        color="primary"
        outlined
      >
        <v-icon>mdi-plus</v-icon>
      </v-btn>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Vuetify FAB Elevation

We can control the amount of elevation the FAB has with the elevation prop. We can set the elevation to a value between 0 and 24 inclusive.

<template>
  <v-app>
    <div class="text-center ma-4">
      <v-btn
        fab
        color="primary"
        elevation="10"
      >
        <v-icon>mdi-plus</v-icon>
      </v-btn>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Vuetify FAB Tile

The tile property removes the border-radius from the FAB:

<template>
  <v-app>
    <div class="text-center ma-4">
      <v-btn
        fab
        color="primary"
        tile
      >
        <v-icon>mdi-plus</v-icon>
      </v-btn>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Vuetify FAB Size

We can use one of the x-small, small, large, and x-large props to customize the size of the FAB.

<template>
  <v-app>
    <div class="d-flex justify-center">
      <div
        class="d-flex ma-4 align-center justify-space-around"
        style="width: 400px"
      >
        <v-btn
          fab
          color="primary"
          x-small
        >
          <v-icon>mdi-plus</v-icon>
        </v-btn>
        <v-btn
          fab
          color="primary"
          small
        >
          <v-icon>mdi-plus</v-icon>
        </v-btn>
        <v-btn
          fab
          color="primary"
        >
          <v-icon>mdi-plus</v-icon>
        </v-btn>
        <v-btn
          fab
          color="primary"
          large
        >
          <v-icon>mdi-plus</v-icon>
        </v-btn>
        <v-btn
          fab
          color="primary"
          x-large
        >
          <v-icon>mdi-plus</v-icon>
        </v-btn>
      </div>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Extended FAB

Vuetify doesn’t support it yet, but we can use custom CSS to create an extended FAB.

<template>
  <v-app>
    <div class="text-center ma-4">
      <v-btn
        fab
        color="primary"
        style="
          width: fit-content;
          border-radius: 100px;
          padding: 16px;
        "
      >
        <v-icon>mdi-plus</v-icon>
        Create
      </v-btn>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Vuetify FAB Speed Dial

With the speed dial component (v-speed-dial), an FAB can emit a stack of related actions when pressed:

<template>
  <v-app>
    <v-speed-dial
      v-model="fab"
      direction="top"
      transition="slide-y-reverse-transition"
      absolute
      bottom
      right
    >
      <template v-slot:activator>
        <v-btn
          v-model="fab"
          color="blue darken-2"
          dark
          fab
        >
          <v-icon v-if="fab"> mdi-close </v-icon>
          <v-icon v-else> mdi-image </v-icon>
        </v-btn>
      </template>
      <v-btn
        fab
        small
      >
        <v-icon>mdi-pencil</v-icon>
      </v-btn>
      <v-btn
        fab
        small
      >
        <v-icon>mdi-plus</v-icon>
      </v-btn>
      <v-btn
        fab
        small
      >
        <v-icon>mdi-star</v-icon>
      </v-btn>
    </v-speed-dial>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    fab: false,
  }),
};
</script>

Using FABs in Lateral Screens

There are certain instances where we have FABs with different actions on screens next to each other, like the content screens of a set of tab items. We can display a transition to signify the change of action with the fab-transition component. fab-transition works with the key prop of the v-btn. It triggers the transition when the FAB key changes.

<template>
  <v-app>
    <v-app-bar
      dark
      color="red accent-2"
      app
    >
      <v-app-bar-nav-icon></v-app-bar-nav-icon>
      <v-toolbar-title>Page Title</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>mdi-magnify</v-icon>
      </v-btn>
      <v-btn icon>
        <v-icon>mdi-dots-vertical</v-icon>
      </v-btn>
      <template v-slot:extension>
        <v-tabs
          v-model="tabs"
          align-with-title
        >
          <v-tab href="#one"> Item One </v-tab>
          <v-tab href="#two"> Item Two </v-tab>
          <v-tab href="#three"> Item Three </v-tab>
          <v-tabs-slider color="white"></v-tabs-slider>
        </v-tabs>
      </template>
    </v-app-bar>
    <v-main>
      <v-fab-transition>
        <v-btn
          :key="activeFab.icon"
          fab
          right
          absolute
          bottom
          style="bottom: 16px"
          color="red accent-2"
          dark
        >
          <v-icon>{{ activeFab.icon }}</v-icon>
        </v-btn>
      </v-fab-transition>
    </v-main>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    fab: false,
    hidden: false,
    tabs: null,
  }),

  computed: {
    activeFab() {
      switch (this.tabs) {
        case 'one':
          return {
            icon: 'mdi-plus',
          };
        case 'two':
          return { icon: 'mdi-pencil' };
        case 'three':
          return {
            icon: 'mdi-play',
          };
        default:
          return {};
      }
    },
  },
};
</script>

Conclusion

A floating action button (FAB) is used to indicate the main action to be performed on a screen. We can use the fab prop of the v-btn component in combination with various other props to create and customize FABs.

The Vuetify rating component is useful for collecting user feedback. Users can use it to indicate their level of satisfaction with certain content. Read on to find out more about this component and the various ways in which we can customize it.

The Vuetify Rating Component (v-rating)

We use v-rating to create a rating component.

<template>
  <v-app>
    <div class="d-flex ma-2 justify-center">
      <v-rating></v-rating>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

The user can indicate various levels of satisfaction by clicking on one of the items.

Vuetify Rating Value

We use the value prop to programmatically set the number of selected items on the rating component. The default is 0.

<template>
  <v-app>
    <div class="text-center ma-2">
      <v-rating></v-rating>
      <v-rating :value="3"></v-rating>
      <v-rating :value="5"></v-rating>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Vuetify Rating v-model

We can use v-model to set up a two-way binding between the value of the v-rating and a variable. In the code example below, we use v-model to create a rating component with text below it displaying the current value:

<template>
  <v-app>
    <div class="d-flex ma-2 justify-center">
      <v-rating v-model="rating"></v-rating>
    </div>
    <div class="d-flex ma-2 justify-center">
      Rating: {{ rating }}
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    rating: 0,
  }),
};
</script>

We can also use the two-way binding to add a button that changes the rating when clicked:

<template>
  <v-app>
    <div class="d-flex ma-2 justify-center">
      <v-rating v-model="rating"></v-rating>
    </div>
    <div class="d-flex ma-2 justify-center">
      Rating: {{ rating }}
    </div>
    <div class="d-flex ma-2 justify-center">
      <v-btn
        @click="rating = 5"
        color="primary"
      >
        5 stars
      </v-btn>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    rating: 0,
  }),
};
</script>

Readonly

We can turn off interactivity with the v-rating component with the readonly prop.

<template>
  <v-app>
    <div class="text-center ma-2">
      <v-rating
        :value="3"
        readonly
      ></v-rating>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Vuetify Rating Colors

v-rating comes with the color and background-color props for customizing its color. We can use any color from the Material design spec.

The color prop sets the color of the selected items, while the background-color prop sets the color of the unselected items.

<template>
  <v-app>
    <div class="text-center">
      <v-rating
        v-model="rating"
        background-color="purple accent-4"
        color="purple"
      >
      </v-rating>

      <v-rating
        v-model="rating"
        background-color="primary"
        color="pink"
      >
      </v-rating>

      <v-rating
        v-model="rating"
        background-color="green"
        color="orange"
      >
      </v-rating>

      <v-rating
        v-model="rating"
        background-color="yellow darken-3"
        color="green"
      >
      </v-rating>

      <v-rating
        v-model="rating"
        background-color="red"
        color="red"
      >
      </v-rating>

      <v-rating
        v-model="rating"
        background-color="indigo"
        color="indigo"
      ></v-rating>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    rating: 3,
  }),
};
</script>

Vuetify Rating Length

We can use the length prop to set the number of rating levels we want the rating component to have.

<template>
  <v-app>
    <div class="text-center ma-2">
      <v-rating
        :value="3"
        color="yellow darken-3"
        background-color="grey darken-1"
      ></v-rating>
      <v-rating
        length="6"
        :value="3"
        color="yellow darken-3"
        background-color="grey darken-1"
      ></v-rating>
      <v-rating
        length="7"
        :value="4"
        color="yellow darken-3"
        background-color="grey darken-1"
      ></v-rating>
      <v-rating
        length="8"
        :value="4"
        color="yellow darken-3"
        background-color="grey darken-1"
      ></v-rating>
      <v-rating
        length="9"
        :value="5"
        color="yellow darken-3"
        background-color="grey darken-1"
      ></v-rating>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Vuetify Rating Hover

Setting the hover prop makes the v-rating display visual feedback when the user hovers over it with the mouse.

<template>
  <v-app>
    <div class="text-center ma-2">
      <v-rating hover></v-rating>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    rating: 3,
  }),
};
</script>

Vuetify Rating Half Increments

Use the half-increments prop to allow selection of half rating level increments.

<template>
  <v-app>
    <div class="text-center ma-2">
      <v-rating
        hover
        half-increments
        color="yellow darken-3"
        background-color="grey darken-1"
        :value="0.5"
      ></v-rating>
      <v-rating
        hover
        half-increments
        color="yellow darken-3"
        background-color="grey darken-1"
        :value="2.5"
      ></v-rating>
      <v-rating
        hover
        half-increments
        color="yellow darken-3"
        background-color="grey darken-1"
        :value="4.5"
      ></v-rating>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Vuetify Rating Size

We can customize the size of the rating component with the same classes available in the icon component (v-icon).

<template>
  <v-app>
    <div class="text-center ma-2">
      <v-rating
        hover
        color="yellow darken-3"
        background-color="grey darken-1"
        :value="3"
        x-small
      ></v-rating>
      <v-rating
        hover
        color="yellow darken-3"
        background-color="grey darken-1"
        :value="3"
        small
      ></v-rating>
      <v-rating
        hover
        color="yellow darken-3"
        background-color="grey darken-1"
        :value="3"
        medium
      ></v-rating>
      <v-rating
        hover
        color="yellow darken-3"
        background-color="grey darken-1"
        :value="3"
        large
      ></v-rating>
      <v-rating
        hover
        color="yellow darken-3"
        background-color="grey darken-1"
        :value="3"
        x-large
      ></v-rating>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

We can also customize the size by setting the size prop to a numerical value:

<template>
  <v-app>
    <div class="text-center ma-2">
      <v-rating
        hover
        color="yellow darken-3"
        background-color="grey darken-1"
        :value="3"
        v-for="num in 5"
        :key="num"
        :size="num * 10"
      ></v-rating>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Item Slot

v-rating comes with an item slot that we can use to apply a greater amount of customization.

<template>
  <v-app>
    <div class="text-center ma-2">
      <v-rating v-model="rating">
        <template v-slot:item="props">
          <v-icon
            :color="
              props.isFilled
                ? getColor(props.index)
                : 'grey lighten-1'
            "
            large
            @click="props.click"
          >
            {{
              props.isFilled
                ? 'mdi-star-circle'
                : 'mdi-star-circle-outline'
            }}
          </v-icon>
        </template>
      </v-rating>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    colors: [
      'primary',
      'yellow darken-3',
      'red',
      'purple accent-4',
      'indigo',
    ],
    rating: 4,
  }),
  methods: {
    getColor(index) {
      return this.colors[index];
    },
  },
};
</script>

Conclusion

We can use the Vuetify rating component (v-rating) in our application to collect user feedback. This component comes with various props and slots that allow customization.

A bottom navigation bar is an alternative to a sidebar or navigation drawer. It is used mainly in mobile applications and enables quick navigation to the top-level destinations of an app. In this article, we’re going to learn about the Vuetify bottom navigation component and how we can use it to easily create and customize bottom navigation bars.

The Vuetify Bottom Navigation Component (v-bottom-navigation)

Vuetify provides the v-bottom-navigation component for creating bottom navigation bars. It includes a set of v-btns for navigation. We can use the value prop of v-bottom-navigation to set the currently active button programmatically. The button with a matching value prop will be made active. By default, the value of each button is set to its zero-based index in the set of buttons on the bottom navigation bar, i.e., the first button has its value set to 0, the second button to 1, the third to 2, and so on. But we can set a custom value to the value prop of a v-btn to change this.

<template>
  <v-app>
    <v-app-bar
      color="primary"
      app
      dark
    >
      <v-toolbar-title>App Bar</v-toolbar-title>
    </v-app-bar>
    <v-main>
      <v-container
        >Lorem ipsum dolor sit amet consectetur adipisicing
        elit. Quis blanditiis beatae praesentium repudiandae
        sunt officiis, vero maxime officia obcaecati nisi
        excepturi. Sit laboriosam provident laborum? Rem
        recusandae ea possimus illo.</v-container
      >
    </v-main>
    <v-bottom-navigation
      v-model="value"
      app
    >
      <v-btn
        value="music"
        height="100%"
      >
        <span>Music</span>
        <v-icon>mdi-music</v-icon>
      </v-btn>

      <v-btn
        value="books"
        height="100%"
      >
        <span>Books</span>
        <v-icon>mdi-book</v-icon>
      </v-btn>

      <v-btn
        value="photos"
        height="100%"
      >
        <span>Photos</span>
        <v-icon>mdi-image</v-icon>
      </v-btn>
    </v-bottom-navigation>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({ value: 'music' }),
};
</script>

Vuetify Bottom Navigation Color

We can use the color prop of v-bottom-navigation to set the color of the active button on the bottom navigation bar. We can use any color from the Material Design specs.

<template>
  <v-app>
    <v-app-bar
      color="primary"
      app
      dark
    >
      <v-toolbar-title>App Bar</v-toolbar-title>
    </v-app-bar>
    <v-main>
      <v-container
        >Lorem ipsum dolor sit amet consectetur adipisicing
        elit. Quis blanditiis beatae praesentium repudiandae
        sunt officiis, vero maxime officia obcaecati nisi
        excepturi. Sit laboriosam provident laborum? Rem
        recusandae ea possimus illo.</v-container
      >
    </v-main>
    <v-bottom-navigation
      v-model="value"
      app
      color="primary"
    >
      <v-btn
        value="music"
        height="100%"
      >
        <span>Music</span>
        <v-icon>mdi-music</v-icon>
      </v-btn>

      <v-btn
        value="books"
        height="100%"
      >
        <span>Books</span>
        <v-icon>mdi-book</v-icon>
      </v-btn>

      <v-btn
        value="photos"
        height="100%"
      >
        <span>Photos</span>
        <v-icon>mdi-image</v-icon>
      </v-btn>
    </v-bottom-navigation>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({ value: 'music' }),
};
</script>

Background Color

Use the background-color prop to set the background color of the bottom navigation bar.

<template>
  <v-app>
    <v-app-bar
      :color="color"
      app
      dark
    >
      <v-toolbar-title>App Bar</v-toolbar-title>
    </v-app-bar>
    <v-main>
      <v-container
        >Lorem ipsum dolor sit amet consectetur adipisicing
        elit. Quis blanditiis beatae praesentium repudiandae
        sunt officiis, vero maxime officia obcaecati nisi
        excepturi. Sit laboriosam provident laborum? Rem
        recusandae ea possimus illo.</v-container
      >
    </v-main>
    <v-bottom-navigation
      v-model="value"
      app
      :background-color="color"
      dark
    >
      <v-btn
        value="music"
        height="100%"
        :color="color"
      >
        <span>Music</span>
        <v-icon>mdi-music</v-icon>
      </v-btn>

      <v-btn
        value="books"
        height="100%"
        :color="color"
      >
        <span>Books</span>
        <v-icon>mdi-book</v-icon>
      </v-btn>

      <v-btn
        value="photos"
        height="100%"
        :color="color"
      >
        <span>Photos</span>
        <v-icon>mdi-image</v-icon>
      </v-btn>
    </v-bottom-navigation>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    value: 'music',
    color: 'purple accent-4',
  }),
};
</script>

v-model

We can use v-model to set up a two-way binding between the currently active button and a variable. In the code example below, we change the title of the app bar to the text of the button that becomes active when clicked.

<template>
  <v-app>
    <v-app-bar
      :color="color"
      app
      dark
    >
      <v-toolbar-title>
        {{ capitalize(value) }}
      </v-toolbar-title>
    </v-app-bar>
    <v-main>
      <v-container
        >Lorem ipsum dolor sit amet consectetur adipisicing
        elit. Quis blanditiis beatae praesentium repudiandae
        sunt officiis, vero maxime officia obcaecati nisi
        excepturi. Sit laboriosam provident laborum? Rem
        recusandae ea possimus illo.</v-container
      >
    </v-main>
    <v-bottom-navigation
      v-model="value"
      app
      :background-color="color"
      dark
    >
      <v-btn
        value="music"
        height="100%"
        :color="color"
      >
        <span>Music</span>
        <v-icon>mdi-music</v-icon>
      </v-btn>

      <v-btn
        value="books"
        height="100%"
        :color="color"
      >
        <span>Books</span>
        <v-icon>mdi-book</v-icon>
      </v-btn>

      <v-btn
        value="photos"
        height="100%"
        :color="color"
      >
        <span>Photos</span>
        <v-icon>mdi-image</v-icon>
      </v-btn>
    </v-bottom-navigation>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    value: 'music',
    color: 'green',
  }),
  methods: {
    capitalize(str) {
      return str.charAt(0).toUpperCase() + str.slice(1);
    },
  },
};
</script>

Vuetify Bottom Navigation Grow

We can set the grow prop to true on the v-bottom-navigation to force the v-btn components to fill all the available space. The buttons can have a maximum width of 168px, according to the Bottom Navigation Material Design specs.

<template>
  <v-app>
    <v-app-bar
      :color="color"
      app
      dark
    >
      <v-toolbar-title> App Bar </v-toolbar-title>
    </v-app-bar>
    <v-main>
      <v-container
        >Lorem ipsum dolor sit amet consectetur adipisicing
        elit. Quis blanditiis beatae praesentium repudiandae
        sunt officiis, vero maxime officia obcaecati nisi
        excepturi. Sit laboriosam provident laborum? Rem
        recusandae ea possimus illo.</v-container
      >
    </v-main>
    <v-bottom-navigation
      v-model="value"
      app
      :background-color="color"
      dark
      grow
    >
      <v-btn
        value="music"
        height="100%"
        :color="color"
      >
        <span>Music</span>
        <v-icon>mdi-music</v-icon>
      </v-btn>

      <v-btn
        value="books"
        height="100%"
        :color="color"
      >
        <span>Books</span>
        <v-icon>mdi-book</v-icon>
      </v-btn>

      <v-btn
        value="photos"
        height="100%"
        :color="color"
      >
        <span>Photos</span>
        <v-icon>mdi-image</v-icon>
      </v-btn>
    </v-bottom-navigation>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    value: 'music',
    color: 'green',
  }),
};
</script>

Vuetify Bottom Navigation Hide on Scroll

The hide-on-scroll prop hides the bottom navigation bar when scrolling up, and displays it when scrolling down. This is similar to the scrolling techniques supported by the v-app-bar component.

<template>
  <v-app>
    <v-app-bar
      :color="color"
      app
      dark
    >
      <v-toolbar-title> App Bar </v-toolbar-title>
    </v-app-bar>
    <v-main>
      <v-responsive
        max-height="600"
        id="hide-on-scroll-example"
        class="overflow-y-auto"
      >
        <v-responsive
          height="1500"
          class="ma-4"
        >
          Lorem ipsum dolor sit amet consectetur adipisicing
          elit. Quis blanditiis beatae praesentium
          repudiandae sunt officiis, vero maxime officia
          obcaecati nisi excepturi. Sit laboriosam provident
          laborum? Rem recusandae ea possimus illo.
        </v-responsive>
      </v-responsive>
    </v-main>
    <v-bottom-navigation
      v-model="value"
      app
      :background-color="color"
      dark
      hide-on-scroll
      scroll-target="#hide-on-scroll-example"
    >
      <v-btn
        value="music"
        height="100%"
        :color="color"
      >
        <span>Music</span>
        <v-icon>mdi-music</v-icon>
      </v-btn>

      <v-btn
        value="books"
        height="100%"
        :color="color"
      >
        <span>Books</span>
        <v-icon>mdi-book</v-icon>
      </v-btn>

      <v-btn
        value="photos"
        height="100%"
        :color="color"
      >
        <span>Photos</span>
        <v-icon>mdi-image</v-icon>
      </v-btn>
    </v-bottom-navigation>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    value: 'music',
    color: 'indigo',
  }),
};
</script>

Vuetify Bottom Navigation Scroll Threshold

The scroll-threshold prop sets the distance a user must scroll up to before the bottom navigation bar is hidden. For example, setting scroll-treshold to 0 means the v-bottom-navigation will only get hidden when the user scrolls up to the very top of the page:

<template>
  <v-app>
    <v-app-bar
      :color="color"
      app
      dark
    >
      <v-toolbar-title> App Bar </v-toolbar-title>
    </v-app-bar>
    <v-main>
      <v-responsive
        max-height="600"
        id="hide-on-scroll-example"
        class="overflow-y-auto"
      >
        <v-responsive
          height="1500"
          class="ma-4"
        >
          Lorem ipsum dolor sit amet consectetur adipisicing
          elit. Quis blanditiis beatae praesentium
          repudiandae sunt officiis, vero maxime officia
          obcaecati nisi excepturi. Sit laboriosam provident
          laborum? Rem recusandae ea possimus illo.
        </v-responsive>
      </v-responsive>
    </v-main>
    <v-bottom-navigation
      v-model="value"
      app
      :background-color="color"
      dark
      hide-on-scroll
      scroll-target="#hide-on-scroll-example"
      scroll-threshold="0"
    >
      <v-btn
        value="music"
        height="100%"
        :color="color"
      >
        <span>Music</span>
        <v-icon>mdi-music</v-icon>
      </v-btn>

      <v-btn
        value="books"
        height="100%"
        :color="color"
      >
        <span>Books</span>
        <v-icon>mdi-book</v-icon>
      </v-btn>

      <v-btn
        value="photos"
        height="100%"
        :color="color"
      >
        <span>Photos</span>
        <v-icon>mdi-image</v-icon>
      </v-btn>
    </v-bottom-navigation>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    value: 'music',
    color: 'indigo',
  }),
};
</script>

Vuetify Bottom Navigation Horizontal

With the horizontal prop, we can position the button text inline with the provided v-icon.

<template>
  <v-app>
    <v-app-bar
      :color="color"
      app
      dark
    >
      <v-toolbar-title> App Bar </v-toolbar-title>
    </v-app-bar>
    <v-main>
      <v-container>
        Lorem ipsum dolor sit amet consectetur adipisicing
        elit. Quis blanditiis beatae praesentium repudiandae
        sunt officiis, vero maxime officia obcaecati nisi
        excepturi. Sit laboriosam provident laborum? Rem
        recusandae ea possimus illo.
      </v-container>
    </v-main>
    <v-bottom-navigation
      v-model="value"
      app
      :background-color="color"
      dark
      horizontal
    >
      <v-btn
        value="music"
        height="100%"
        :color="color"
      >
        <span>Music</span>
        <v-icon>mdi-music</v-icon>
      </v-btn>

      <v-btn
        value="books"
        height="100%"
        :color="color"
      >
        <span>Books</span>
        <v-icon>mdi-book</v-icon>
      </v-btn>

      <v-btn
        value="photos"
        height="100%"
        :color="color"
      >
        <span>Photos</span>
        <v-icon>mdi-image</v-icon>
      </v-btn>
    </v-bottom-navigation>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    value: 'music',
    color: 'primary',
  }),
};
</script>

Vuetify Bottom Navigation Shift

We can the shift prop to hide the text of the navigation bar buttons that are not active.

<template>
  <v-app>
    <v-app-bar
      :color="color"
      app
      dark
    >
      <v-toolbar-title> App Bar </v-toolbar-title>
    </v-app-bar>
    <v-main>
      <v-container>
        Lorem ipsum dolor sit amet consectetur adipisicing
        elit. Quis blanditiis beatae praesentium repudiandae
        sunt officiis, vero maxime officia obcaecati nisi
        excepturi. Sit laboriosam provident laborum? Rem
        recusandae ea possimus illo.
      </v-container>
    </v-main>
    <v-bottom-navigation
      v-model="value"
      app
      :background-color="color"
      dark
      shift
    >
      <v-btn
        value="music"
        height="100%"
        :color="color"
      >
        <span>Music</span>
        <v-icon>mdi-music</v-icon>
      </v-btn>

      <v-btn
        value="books"
        height="100%"
        :color="color"
      >
        <span>Books</span>
        <v-icon>mdi-book</v-icon>
      </v-btn>

      <v-btn
        value="photos"
        height="100%"
        :color="color"
      >
        <span>Photos</span>
        <v-icon>mdi-image</v-icon>
      </v-btn>
    </v-bottom-navigation>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    value: 'music',
    color: 'primary',
  }),
};
</script>

Vuetify Bottom Navigation Toggle

We can use the input-value prop of v-bottom-navigation to toggle the visibility of the bottom navigation bar:

<template>
  <v-app>
    <v-app-bar
      :color="color"
      app
      dark
    >
      <v-toolbar-title> App Bar </v-toolbar-title>
    </v-app-bar>
    <v-main>
      <v-container>
        Lorem ipsum dolor sit amet consectetur adipisicing
        elit. Quis blanditiis beatae praesentium repudiandae
        sunt officiis, vero maxime officia obcaecati nisi
        excepturi. Sit laboriosam provident laborum? Rem
        recusandae ea possimus illo.
        <v-row justify="center">
          <v-btn
            class="ma-8"
            outlined
            :color="color"
            @click="active = !active"
          >
            Toggle Navigation
          </v-btn>
        </v-row>
      </v-container>
    </v-main>
    <v-bottom-navigation
      v-model="value"
      app
      :background-color="color"
      dark
      :input-value="active"
    >
      <v-btn
        value="music"
        height="100%"
        :color="color"
      >
        <span>Music</span>
        <v-icon>mdi-music</v-icon>
      </v-btn>

      <v-btn
        value="books"
        height="100%"
        :color="color"
      >
        <span>Books</span>
        <v-icon>mdi-book</v-icon>
      </v-btn>

      <v-btn
        value="photos"
        height="100%"
        :color="color"
      >
        <span>Photos</span>
        <v-icon>mdi-image</v-icon>
      </v-btn>
    </v-bottom-navigation>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    value: 'music',
    color: 'purple accent-4',
    active: true,
  }),
};
</script>

Conclusion

We can use a bottom navigation bar in place of a sidebar or navigation drawer for quick and easy navigation to important destinations in our app. Vuetify provides the bottom navigation component (v-bottom-navigation) for creating bottom navigation bars.

We can use a banner to display a message to the user with one or two related actions. It can be single-line or multi-line and can contain icons that fit in with the message and actions. Read on to find out more on how to create and customize banners with the Vuetify banner component.

The Vuetify Banner Component (v-banner)

We can use the v-banner component from Vuetify to create a banner. It is multi-line by default.

<template>
  <v-app>
    <v-banner>
      Lorem ipsum dolor sit amet consectetur adipisicing
      elit. A necessitatibus dicta voluptatibus, recusandae
      exercitationem, consequuntur asperiores deleniti ut
      sequi officia animi architecto.
    </v-banner>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Single Line Banner

Use the single-line prop on a v-banner to make the message on the banner occupy only one line. It will be truncated with an ellipsis if it’s too long.

<template>
  <v-app>
    <v-banner single-line>
      Lorem ipsum dolor sit amet consectetur adipisicing
      elit. A necessitatibus dicta voluptatibus, recusandae
      exercitationem, consequuntur asperiores deleniti ut
      sequi officia animi architecto.
    </v-banner>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Vuetify Banner Color

Vuetify allows us to customize the color of the v-banner component with the color prop. We can use any color from the Material Design spec.

<template>
  <v-app>
    <v-banner
      color="primary"
      dark
      class="ma-4"
    >
      Lorem ipsum dolor sit amet consectetur adipisicing
      elit. A necessitatibus dicta voluptatibus, recusandae
      exercitationem, consequuntur asperiores deleniti ut
      sequi officia animi architecto.
    </v-banner>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Vuetify Banner Sticky

The sticky prop sets the position CSS property of the banner element to sticky.

<template>
  <v-app>
    <div
      style="max-height: 400px"
      class="overflow-y-auto"
    >
      <v-banner
        sticky
        color="white"
      >
        Sticky banner
      </v-banner>
      Lorem ipsum dolor sit amet, consectetur adipisicing
      elit. Dicta voluptatibus maxime ullam cum quasi ad
      placeat qui ipsa odit quam sit nemo, laborum fuga enim
      saepe dolorum ex aperiam tempora? Lorem ipsum dolor
      sit amet consectetur adipisicing elit. Quasi iste
      earum nihil? Distinctio natus in cumque tempora veniam
      placeat consectetur, consequatur recusandae quaerat
      qui impedit ea cum, perferendis ipsum excepturi. Lorem
      ipsum dolor sit amet consectetur adipisicing elit.
      Libero impedit quo doloremque perferendis odit
      consequuntur maxime iure sint vel autem ipsa, eveniet
      dolore exercitationem, perspiciatis porro numquam
      earum laudantium laborum. Lorem, ipsum dolor sit amet
      consectetur adipisicing elit. Totam ducimus laborum
      suscipit distinctio tempore alias quos quasi eius
      praesentium itaque quas error fugit numquam, beatae
      sint dolor quis, officiis dignissimos. Lorem ipsum
      dolor sit amet consectetur adipisicing elit. Quas
      aliquid quia fugiat repudiandae ea, autem commodi
      praesentium obcaecati, corrupti sed ipsum dolores
      illum sit cum, officiis esse! Culpa, temporibus minus!
      Lorem ipsum dolor sit amet consectetur adipisicing
      elit. Sint placeat animi omnis nemo possimus quam
      optio earum ut amet aspernatur, consectetur nesciunt
      rem. Earum exercitationem, tempora blanditiis tenetur
      nemo magnam. Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Nulla quisquam possimus officia,
      doloremque dolorum facere perspiciatis eaque rem
      quibusdam pariatur, laborum quod similique eius
      eligendi vero dicta ipsam iusto amet! Lorem ipsum
      dolor sit amet consectetur adipisicing elit. Pariatur
      ad labore doloribus voluptatem esse necessitatibus
      totam eaque fugit. Libero dolore autem totam sed
      possimus iure aspernatur dolorum voluptate odit
      laborum? Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Quidem distinctio necessitatibus
      optio, quos id sint eius cupiditate. Itaque ipsum
      atque ad hic officiis vero earum, voluptatum debitis
      consectetur dolore unde. Lorem ipsum dolor sit amet
      consectetur, adipisicing elit. Eaque ullam cumque
      quasi unde illum, dolorem vel vero veritatis magnam
      consequatur commodi consectetur architecto dicta
      expedita ducimus officiis facilis sed ab. Lorem ipsum
      dolor sit, amet consectetur adipisicing elit. Minima
      veritatis neque quaerat fuga qui iste consectetur, in
      ab facilis quia laudantium voluptatum iusto ratione
      aliquid necessitatibus ipsam aspernatur sit
      dignissimos. Lorem ipsum dolor sit amet consectetur
      adipisicing elit. A ipsa pariatur modi, exercitationem
      minus quo dolorem reiciendis deserunt iste quod
      provident porro praesentium at sequi laboriosam qui
      cum saepe sint. Lorem, ipsum dolor sit amet
      consectetur adipisicing elit. Eum ab obcaecati
      perferendis. Deleniti modi eaque saepe inventore, a
      non officia ut quisquam illo fuga natus temporibus.
      Aliquid ab veritatis eius? Lorem ipsum dolor sit amet
      consectetur adipisicing elit. Sed ipsam iste laborum
      minima debitis modi corrupti, eos obcaecati aut magni,
      quod earum quaerat nobis esse eveniet omnis eligendi
      aspernatur voluptate! Lorem ipsum dolor sit amet
      consectetur, adipisicing elit. Nesciunt facilis fuga
      quas sed autem eligendi rerum dolorem optio. Nulla
      obcaecati veniam sunt ipsa exercitationem reiciendis
      totam dolorem tenetur fuga provident. Lorem ipsum
      dolor sit amet consectetur adipisicing elit.
      Temporibus ratione magni ipsam iure minima modi
      obcaecati nihil tempora debitis, quaerat corporis
      ipsum assumenda maiores nisi laboriosam doloremque.
      Ab, sapiente fuga! Lorem, ipsum dolor sit amet
      consectetur adipisicing elit. Tempore non voluptate
      quisquam quod, aliquam sequi maiores dolorum minima
      dolorem! Distinctio autem quaerat accusamus iusto
      beatae laudantium dicta omnis cum fuga. Lorem ipsum
      dolor sit amet, consectetur adipisicing elit. Quas,
      aspernatur sint maxime officiis cumque inventore, amet
      illum, soluta eum necessitatibus iure deleniti natus
      aut deserunt vitae vel facilis quod voluptatem.
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Vuetify Banner Outlined

We can add an outline to a banner with the outlined prop:

<template>
  <v-app>
    <v-banner
      outlined
      class="ma-4"
      >Lorem ipsum dolor sit amet consectetur adipisicing
      elit.
    </v-banner>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Rounded Banner

Setting the rounded prop to true on a v-banner makes the corners rounded.

<template>
  <v-app>
    <v-banner
      rounded
      color="green"
      dark
      class="ma-4"
    >
      Lorem ipsum dolor sit amet consectetur adipisicing
      elit.
    </v-banner>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Vuetify Banner Shaped

The shaped prop adds a border-radius on the top-left and bottom-right corners of the banner.

<template>
  <v-app
    ><v-banner
      color="purple accent-4"
      class="ma-4"
      dark
      shaped
    >
      Lorem ipsum dolor, sit amet consectetur adipisicing
      elit.
    </v-banner>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Vuetify Banner Tile

The tile prop removes the border-radius from the v-banner:

<template>
  <v-app>
    <v-banner
      color="primary"
      class="ma-4"
      dark
      tile
      >Lorem ipsum dolor sit amet consectetur adipisicing
      elit.
    </v-banner>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Banner Elevation

We can add elevation to the banner component with the elevation prop.

<template>
  <v-app>
    <v-banner
      class="ma-4"
      elevation="10"
    >
      Lorem ipsum dolor sit amet consectetur adipisicing
      elit.
    </v-banner>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Icon Slot

The banner component comes with an icon slot for including an icon on it:

<template>
  <v-app>
    <v-banner
      single-line
      class="ma-4"
      elevation="2"
      rounded
    >
      <v-icon
        slot="icon"
        color="info"
        size="36"
      >
        mdi-information
      </v-icon>
      Lorem ipsum dolor sit, amet consectetur adipisicing
      elit.
    </v-banner>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Icon Click

We can attach a handler to the @click:icon event of v-banner to perform an action when the user clicks the banner icon.

<template>
  <v-app>
    <v-banner
      single-line
      @click:icon="iconClicked = true"
      class="ma-4"
      elevation="2"
      rounded
    >
      <v-icon
        slot="icon"
        color="info"
        size="36"
      >
        mdi-information
      </v-icon>
      Lorem ipsum dolor sit, amet consectetur adipisicing
      elit.
    </v-banner>
    <div
      v-if="iconClicked"
      class="d-flex justify-center"
    >
      Icon clicked.
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    iconClicked: false,
  }),
};
</script>

Vuetify Banner Action Slot

v-banner also comes with an actions slot that we can use display actions on the banner that the user can take. We use it to place functional buttons on the banner.

<template>
  <v-app>
    <v-banner
      single-line
      class="ma-4"
      elevation="2"
      rounded
    >
      <v-icon
        slot="icon"
        color="info"
        size="36"
      >
        mdi-information
      </v-icon>
      Lorem ipsum dolor sit, amet consectetur adipisicing
      elit.
      <template v-slot:actions>
        <v-btn
          color="primary"
          text
          >Action</v-btn
        >
      </template>
    </v-banner>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

The actions slot has a dismiss function in its scope that we can use to hide the banner.

<template>
  <v-app>
    <v-banner
      single-line
      class="ma-4"
      elevation="2"
      color="red"
      rounded
      dark
    >
      No internet connection

      <template v-slot:actions="{ dismiss }">
        <v-btn
          text
          @click="dismiss"
        >
          Dismiss
        </v-btn>

        <v-btn text>Retry</v-btn>
      </template>
    </v-banner>

  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Conclusion

A banner can be used to display messages to the user with one or two actions. We can use the Vuetify banner component (v-banner) to create banners. This component comes with various props and slots for customizing its appearance and behaviour.

One of the first components you encounter when first getting started with Vuetify is v-app. The Vuetify v-app component is required for all applications created with Vuetify. It enables many of the functionality that Vuetify provides. With v-app, child components can access global data from Vuetify, like the application theme colors or the theme variant (light/dark). v-app also ensures proper cross-browser compatibility, such as support for certain click events in browsers like Safari. We can use the app prop on other components like v-navigation-drawer, v-app-bar and v-footer and more, to help set up our application with proper sizing around the v-main component. This way, we can focus on building our application without needing to manually manage layout sizing.

Vuetify Application Markup with v-app and v-main

Thanks to automatic layout sizing, we can place our major layout elements anywhere in our markup, as long we set the app prop to true. The v-main component is important for making our page content work properly with our layout elements. v-main will be dynamically sized based on the structure of layout elements that have the app prop applied.

Here’s an example of typical Vuetify application markup:

<!-- App.vue -->

<v-app>
  <v-navigation-drawer app>
    <!-- -->
  </v-navigation-drawer>

  <v-app-bar app>
    <!-- -->
  </v-app-bar>

  <!-- Sizes your content based upon application components -->
  <v-main>

    <!-- Provides the application the proper gutter -->
    <v-container fluid>

      <!-- If using vue-router -->
      <router-view></router-view>
    </v-container>
  </v-main>

  <v-footer app>
    <!-- -->
  </v-footer>
</v-app>

Note: Applying the app prop automatically applies sets the position CSS property of the element to fixed. If we want absolute positioning, you can overwrite this functionality with the absolute prop.

Vuetify Application Components

Here is the list of all the Vuetify components that support automatic layout sizing with the app prop:

• v-app-bar: The app bar component is always placed at the top of an application with a lower priority than v-system-bar.
• v-bottom-navigation: The bottom navigation component is always placed at the bottom of an application with a higher priority than v-footer.
• v-footer: The footer component is always placed at the bottom of an application with a lower priority than v-bottom-navigation.
• v-navigation-drawer: The navigation drawer component can be placed on the left or right side of an application and can be configured to sit next to or below v-app-bar
• v-system-bar: The system bar component is always placed at the top of an application with a higher priority than v-app.

Vuetify Application Service

We can configure our layout with the Vuetify application service. The service communicates with the v-main component so that it’s able to properly size the application content. It comes with a number of accessible properties:

{
  bar: number
  bottom: number
  footer: number
  insetFooter: number
  left: number
  right: number
  top: number
}

These properties are readonly, so we can’t edit them. We can access them from the application property of the $vuetify object. The service uses them for the layout sizing of our main content and automatically updates them when we add or remove one of the application components with the app prop applied. For example, the top property changes when v-app-bar is added or removed from the markup:

With v-app-bar:

<template>
  <v-app>
    <v-app-bar
      color="primary"
      app
    ></v-app-bar>
    <v-main>
      $vuetify.application.top:
      {{ this.$vuetify.application.top }}
    </v-main>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Without v-app-bar:

<template>
  <v-app>
    <v-main>
      <div class="ma-4">
        $vuetify.application.top:
        {{ this.$vuetify.application.top }}
      </div>
    </v-main>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Conclusion

The Vuetify v-app component is an essential component and required in all applications made with the framework. It provides features such as automatic layout sizing, theming functionality and cross-browser compatibility.

A flexbox layout simplifies the process of designing a flexible and responsive page layout structure without using float or manual positioning. It allows responsive elements within a container to be automatically arranged depending on the size of the viewport. In this article, we’re going to learn about the various helper classes Vuetify provides to control the layout of flex containers with alignment, justification, wrapping, and more.

Vuetify Flexbox Container

Applying the d-flex helper class to an element sets its display to flex, which turns it into a flexbox container transforming its direct children into flex items. As we’ll see later on, we can customize the interaction of these child elements with additional flex property utilities.

<template>
  <v-app>
    <div class="ma-4">
      <v-card
        class="d-flex pa-2"
        outlined
        tile
      >
        <div>A flexbox container</div>
      </v-card>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Inline Flex

The d-inline-flex class turns an element into an inline flexbox container.

<template>
  <v-app>
    <div class="ma-4">
      <v-card
        class="d-inline-flex pa-2"
        outlined
        tile
      >
        <div>Inline flexbox container</div>
      </v-card>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

We can also customize the flex utilities to apply only for specific breakpoints with the following classes:

• d-sm-flex
• d-sm-inline-flex
• d-md-flex
• d-md-inline-flex
• d-lg-flex
• d-lg-inline-flex
• d-xl-flex
• d-xl-inline-flex

Vuetify Flex Direction

Vuetify provides flex helper classes for specifying the direction of the flex items within the container. These classes modify the flex-direction CSS property of the element. They are:

• flex-row
• flex-row-reverse
• flex-column
• flex-column-reverse

flex-row and flex-row-reverse

The flex-row utility class displays the flexible items horizontally, as a row. flex-row-reverse does the same, but in reverse order:

<template>
  <v-app>
    <div class="ma-4">
      <v-card
        class="d-flex flex-row mb-6"
        color="grey lighten-4"
        flat
        tile
      >
        <v-card
          v-for="n in 3"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          Flex item {{ n }}
        </v-card>
      </v-card>
      <v-card
        class="d-flex flex-row-reverse"
        color="grey lighten-4"
        flat
        tile
      >
        <v-card
          v-for="n in 3"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          Flex item {{ n }}
        </v-card>
      </v-card>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

flex-column and flex-column-reverse

The flex-column utility class displays the flex items vertically, in a column. flex-column-reverse does the same, but in reverse order:

<template>
  <v-app>
    <div class="ma-4">
      <div class="d-flex flex-column mb-6">
        <v-card
          v-for="n in 3"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          Flex item {{ n }}
        </v-card>
      </div>
      <div class="d-flex flex-column-reverse">
        <v-card
          v-for="n in 3"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          Flex item {{ n }}
        </v-card>
      </div>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

There are also responsive variations of these classes that set the flex-direction property for certain breakpoints.

• flex-sm-row
• flex-sm-row-reverse
• flex-sm-column
• flex-sm-column-reverse
• flex-md-row
• flex-md-row-reverse
• flex-md-column
• flex-md-column-reverse
• flex-lg-row
• flex-lg-row-reverse
• flex-lg-column
• flex-lg-column-reverse
• flex-xl-row
• flex-xl-row-reverse
• flex-xl-column
• flex-xl-column-reverse

Flex Justify Classes

We can modify the justify-content flex property of the flexible container with the flex justify classes from Vuetify. justify-content modifies the flexbox items on the x-axis or y-axis for a flex-direction of row or column respectively. The helper classes can set justify-content to start (browser default), end, center, space-between, or space-around. They are:

• justify-start
• justify-end
• justify-center
• justify-space-between
• justify-space-around

<template>
  <v-app>
    <div class="ma-4">
      <v-card
        class="d-flex justify-start mb-6"
        color="grey lighten-4"
        flat
        tile
      >
        <v-card
          v-for="n in 3"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          justify-start
        </v-card>
      </v-card>

      <v-card
        class="d-flex justify-end mb-6"
        color="grey lighten-4"
        flat
        tile
      >
        <v-card
          v-for="n in 3"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          justify-end
        </v-card>
      </v-card>

      <v-card
        class="d-flex justify-center mb-6"
        color="grey lighten-4"
        flat
        tile
      >
        <v-card
          v-for="n in 3"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          justify-center
        </v-card>
      </v-card>

      <v-card
        class="d-flex justify-space-between mb-6"
        color="grey lighten-4"
        flat
        tile
      >
        <v-card
          v-for="n in 3"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          justify-space-between
        </v-card>
      </v-card>

      <v-card
        class="d-flex justify-space-around mb-6"
        color="grey lighten-4"
        flat
        tile
      >
        <v-card
          v-for="n in 3"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          justify-space-around
        </v-card>
      </v-card>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

There are also responsive variations of these classes that set the justify-content property for certain breakpoints:

• justify-sm-start
• justify-sm-end
• justify-sm-center
• justify-sm-space-between
• justify-sm-space-around
• justify-md-start
• justify-md-end
• justify-md-center
• justify-md-space-between
• justify-md-space-around
• justify-lg-start
• justify-lg-end
• justify-lg-center
• justify-lg-space-between
• justify-lg-space-around
• justify-xl-start
• justify-xl-end
• justify-xl-center
• justify-xl-space-between
• justify-xl-space-around

Vuetify Flex Align Classes

We also have flex utility classes from Vuetify that modify the align-items CSS property of the flex container. align-items modifies the flexbox items on the y-axis or x-axis for a flex-direction of row or column respectively. The helper classes can set align-items to start, end, center, baseline or stretch (browser default). They are:

• align-start
• align-end
• align-center
• align-baseline
• align-stretch

<template>
  <v-app>
    <div class="ma-4">
      <v-card
        class="d-flex align-start mb-6"
        color="grey lighten-2"
        flat
        height="100"
        tile
      >
        <v-card
          v-for="n in 3"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          align-start
        </v-card>
      </v-card>

      <v-card
        class="d-flex align-end mb-6"
        color="grey lighten-2"
        flat
        height="100"
        tile
      >
        <v-card
          v-for="n in 3"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          align-end
        </v-card>
      </v-card>

      <v-card
        class="d-flex align-center mb-6"
        color="grey lighten-2"
        flat
        height="100"
        tile
      >
        <v-card
          v-for="n in 3"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          align-center
        </v-card>
      </v-card>

      <v-card
        class="d-flex align-baseline mb-6"
        color="grey lighten-2"
        flat
        height="100"
        tile
      >
        <v-card
          v-for="n in 3"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          align-baseline
        </v-card>
      </v-card>

      <v-card
        class="d-flex align-stretch mb-6"
        color="grey lighten-2"
        flat
        height="100"
        tile
      >
        <v-card
          v-for="n in 3"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          align-stretch
        </v-card>
      </v-card>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

They are also responsive variations of these classes that set the align-items property for certain breakpoints:

• align-sm-start
• align-sm-end
• align-sm-center
• align-sm-baseline
• align-sm-stretch
• align-md-start
• align-md-end
• align-md-center
• align-md-baseline
• align-md-stretch
• align-lg-start
• align-lg-end
• align-lg-center
• align-lg-baseline
• align-lg-stretch
• align-xl-start
• align-xl-end
• align-xl-center
• align-xl-baseline
• align-xl-stretch

Flex Align Self Classes

We use the flex align self helper classes to modify the align-self flex property of the element. align-self modifies the flexbox items on the x-axis or y-axis for a flex-direction of row or column respectively. The helper classes can set align-self to start, end, center, baseline or stretch (browser default). They are:

• align-self-start
• align-self-end
• align-self-center
• align-self-baseline
• align-self-stretch

<template>
  <v-app>
    <div class="ma-4">
      <v-card
        v-for="j in justify"
        :key="j"
        class="d-flex mb-6"
        color="grey lighten-2"
        flat
        height="100"
        tile
      >
        <v-card
          v-for="n in 3"
          :key="n"
          class="pa-2"
          :class="[n === 2 && `align-self-${j}`]"
          outlined
          tile
        >
          {{ n === 2 ? 'Aligned flex item' : 'Flex item' }}
        </v-card>
      </v-card>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    justify: [
      'start',
      'end',
      'center',
      'baseline',
      'auto',
      'stretch',
    ],
  }),
};
</script>

Vuetify also provides responsive variations of these classes that set the align-self property for certain breakpoints:

• align-self-sm-start
• align-self-sm-end
• align-self-sm-center
• align-self-sm-baseline
• align-self-sm-auto
• align-self-sm-stretch
• align-self-md-start
• align-self-md-end
• align-self-md-center
• align-self-md-baseline
• align-self-md-auto
• align-self-md-stretch
• align-self-lg-start
• align-self-lg-end
• align-self-lg-center
• align-self-lg-baseline
• align-self-lg-auto
• align-self-lg-stretch
• align-self-xl-start
• align-self-xl-end
• align-self-xl-center
• align-self-xl-baseline
• align-self-xl-auto
• align-self-xl-stretch

Auto Margins

We can apply one of the margin helper classes from Vuetify to a flex container to control the positioning of flex items on the x-axis or y-axis for a flex direction of row or column respectively.

<template>
  <v-app>
    <div class="ma-4">
      <v-card
        class="d-flex mb-6"
        color="grey lighten-2"
        flat
        tile
      >
        <v-card
          v-for="n in 3"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          Flex item
        </v-card>
      </v-card>

      <v-card
        class="d-flex mb-6"
        color="grey lighten-2"
        flat
        tile
      >
        <v-card
          v-for="n in 3"
          :key="n"
          :class="n === 1 && 'mr-auto'"
          class="pa-2"
          outlined
          tile
        >
          Flex item
        </v-card>
      </v-card>

      <v-card
        class="d-flex mb-6"
        color="grey lighten-2"
        flat
        tile
      >
        <v-card
          v-for="n in 3"
          :key="n"
          :class="n === 3 && 'ml-auto'"
          class="pa-2"
          outlined
          tile
        >
          Flex item
        </v-card>
      </v-card>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Using align-items

If we set flex-direction to column and specify a value for align-items, we can use either the mb-auto or mt-auto helper class to adjust flex item positioning:

<template>
  <v-app>
    <div class="ma-4">
      <v-card
        class="d-flex align-start flex-column mb-6"
        color="grey lighten-2"
        flat
        tile
        height="200"
      >
        <v-card
          v-for="n in 3"
          :key="n"
          :class="n === 1 && 'mb-auto'"
          class="pa-2"
          outlined
          tile
        >
          Flex item
        </v-card>
      </v-card>
      <v-card
        class="d-flex align-end flex-column"
        color="grey lighten-2"
        flat
        tile
        height="200"
      >
        <v-card
          v-for="n in 3"
          :key="n"
          :class="n === 3 && 'mt-auto'"
          class="pa-2"
          outlined
          tile
        >
          Flex item
        </v-card>
      </v-card>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Vuetify Flex Wrap Classes

By default, the d-flex class does not provide wrapping (it behaves similar to setting flex-wrap to nowrap). We can change this by applying one of the flex-wrap helper classes to the container. The classes are:

• flex-nowrap
• flex-wrap
• flex-wrap-reverse

flex-nowrap

flex-nowrap specifies that the items should not wrap.

<template>
  <v-app>
    <div class="ma-4">
      <v-card
        class="d-flex flex-nowrap py-3"
        color="grey lighten-2"
        flat
        tile
        width="125"
      >
        <v-card
          v-for="n in 5"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          Flex item
        </v-card>
      </v-card>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

flex-wrap

flex-wrap makes the items wrap if necessary.

<template>
  <v-app>
    <div class="ma-4">
      <v-card
        class="d-flex flex-wrap"
        color="grey lighten-2"
        flat
        tile
      >
        <v-card
          v-for="n in 20"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          Flex item {{ n }}
        </v-card>
      </v-card>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

flex-wrap-reverse

flex-wrap-reverse specifies that the flex items will wrap if necessary, in reverse order.

<template>
  <v-app>
    <div class="ma-4">
      <v-card
        class="d-flex flex-wrap-reverse"
        color="grey lighten-2"
        flat
        tile
      >
        <v-card
          v-for="n in 20"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          Flex item {{ n }}
        </v-card>
      </v-card>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Vuetify also provides responsive variations of these classes to set the flex-wrap property for certain breakpoints:

• flex-sm-nowrap
• flex-sm-wrap
• flex-sm-wrap-reverse
• flex-md-nowrap
• flex-md-wrap
• flex-md-wrap-reverse
• flex-lg-nowrap
• flex-lg-wrap
• flex-lg-wrap-reverse
• flex-xl-nowrap
• flex-xl-wrap
• flex-xl-wrap-reverse

Vuetify Flex Order Classes

We can use one of the flex order utility classes to customize the visual order of the flexbox items within their container.

<template>
  <v-app>
    <div class="ma-4">
      <v-card
        class="d-flex flex-wrap"
        color="grey lighten-2"
        flat
        tile
      >
        <v-card
          class="order-2 pa-2"
          outlined
          tile
        >
          First flex item
        </v-card>
        <v-card
          class="order-3 pa-2"
          outlined
          tile
        >
          Second flex item
        </v-card>
        <v-card
          class="order-1 pa-2"
          outlined
          tile
        >
          Third flex item
        </v-card>
      </v-card>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

These classes set the order flex property of the container. They are:

• order-first
• order-0
• order-1
• order-2
• order-3
• order-4
• order-5
• order-6
• order-7
• order-8
• order-9
• order-10
• order-11
• order-12
• order-last

Vuetify also provides responsive variants of these classes that set the order property for certain breakpoints:

• order-sm-first
• order-sm-0
• order-sm-1
• order-sm-2
• order-sm-3
• order-sm-4
• order-sm-5
• order-sm-6
• order-sm-7
• order-sm-8
• order-sm-9
• order-sm-10
• order-sm-11
• order-sm-12
• order-sm-last
• order-md-first
• order-md-0
• order-md-1
• order-md-2
• order-md-3
• order-md-4
• order-md-5
• order-md-6
• order-md-7
• order-md-8
• order-md-9
• order-md-10
• order-md-11
• order-md-12
• order-md-last
• order-lg-first
• order-lg-0
• order-lg-1
• order-lg-2
• order-lg-3
• order-lg-4
• order-lg-5
• order-lg-6
• order-lg-7
• order-lg-8
• order-lg-9
• order-lg-10
• order-lg-11
• order-lg-12
• order-lg-last
• order-xl-first
• order-xl-0
• order-xl-1
• order-xl-2
• order-xl-3
• order-xl-4
• order-xl-5
• order-xl-6
• order-xl-7
• order-xl-8
• order-xl-9
• order-xl-10
• order-xl-11
• order-xl-12
• order-xl-last

Vuetify Flex Align Content

Vuetify provides flex align content classes that we can use to set the align-content CSS property of the flex container. The align-content modifies the flexbox items on the x-axis or y-axis for a flex-direction of row or column respectively. The helper classes can set align-content to start (browser default), end, center, between, around or stretch. They are:

• align-content-start
• align-content-end
• align-content-center
• align-content-between
• align-content-around
• align-content-stretch

align-content-start

<template>
  <v-app>
    <div class="ma-4">
      <v-card
        class="d-flex align-content-start flex-wrap"
        color="grey lighten-2"
        flat
        tile
        min-height="200"
      >
        <v-card
          v-for="n in 20"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          Flex item
        </v-card>
      </v-card>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

align-content-end

<template>
  <v-app>
    <div class="ma-4">
      <v-card
        class="d-flex align-content-end flex-wrap"
        color="grey lighten-2"
        flat
        tile
        min-height="200"
      >
        <v-card
          v-for="n in 20"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          Flex item
        </v-card>
      </v-card>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

align-content-center

<template>
  <v-app>
    <div class="ma-4">
      <v-card
        class="d-flex align-content-center flex-wrap"
        color="grey lighten-2"
        flat
        tile
        min-height="200"
      >
        <v-card
          v-for="n in 20"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          Flex item
        </v-card>
      </v-card>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

align-content-space-between

<template>
  <v-app>
    <div class="ma-4">
      <v-card
        class="d-flex align-content-space-between flex-wrap"
        color="grey lighten-2"
        flat
        tile
        min-height="200"
      >
        <v-card
          v-for="n in 20"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          Flex item
        </v-card>
      </v-card>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

align-content-space-around

<template>
  <v-app>
    <div class="ma-4">
      <v-card
        class="d-flex align-content-space-around flex-wrap"
        color="grey lighten-2"
        flat
        tile
        min-height="200"
      >
        <v-card
          v-for="n in 20"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          Flex item
        </v-card>
      </v-card>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

There are also responsive variations of theses classes that set the align-content property for certain breakpoints:

• align-sm-content-start
• align-sm-content-end
• align-sm-content-center
• align-sm-content-space-between
• align-sm-content-space-around
• align-sm-content-stretch
• align-md-content-start
• align-md-content-end
• align-md-content-center
• align-md-content-space-between
• align-md-content-space-around
• align-md-content-stretch
• align-lg-content-start
• align-lg-content-end
• align-lg-content-center
• align-lg-content-space-between
• align-lg-content-space-around
• align-xl-content-start
• align-xl-content-end
• align-xl-content-center
• align-xl-content-space-between
• align-xl-content-space-around
• align-xl-content-stretch

Vuetify Flex Grow and Shrink Classes

Vuetify also comes with helper classes that set the flex-grow and flex-shrink of a flexbox container. These utility classes are in the form flex-{condition}-{value}, where condition can be either grow or shrink and value can be either 0 or 1. The grow condition will allow an element to grow to fill available space, while shrink will allow an element to shrink down only to the space needed for its contents if there is not enough space in its container. The value 0 will prevent the condition from happening, while 1 will allow it. The classes are:

• flex-grow-0
• flex-grow-1
• flex-shrink-0
• flex-shrink-1

<template>
  <v-app>
    <div class="ma-4">
      <v-container class="grey lighten-5">
        <v-row
          no-gutters
          style="flex-wrap: nowrap"
        >
          <v-col
            cols="2"
            class="flex-grow-0 flex-shrink-0"
          >
            <v-card
              class="pa-2"
              outlined
              tile
            >
              I'm 2 column wide
            </v-card>
          </v-col>
          <v-col
            cols="1"
            style="min-width: 100px; max-width: 100%"
            class="flex-grow-1 flex-shrink-0"
          >
            <v-card
              class="pa-2"
              outlined
              tile
            >
              I'm 1 column wide and I grow to take all the
              space
            </v-card>
          </v-col>
          <v-col
            cols="5"
            style="min-width: 100px"
            class="flex-grow-0 flex-shrink-1"
          >
            <v-card
              class="pa-2"
              outlined
              tile
            >
              I'm 5 column wide and I shrink if there's not
              enough space
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

There are also responsive variations of these classes that set the flex-grow and flex-shrink properties for certain breakpoints:

• flex-sm-grow-0
• flex-sm-grow-1
• flex-sm-shrink-0
• flex-sm-shrink-1
• flex-md-grow-0
• flex-md-grow-1
• flex-md-shrink-0
• flex-md-shrink-1
• flex-lg-grow-0
• flex-lg-grow-1
• flex-lg-shrink-0
• flex-lg-shrink-1
• flex-xl-grow-0
• flex-xl-grow-1
• flex-xl-shrink-0
• flex-xl-shrink-1

Conclusion

Flexbox layouts allow responsive items inside a container to be automatically arranged depending on the screen size. Vuetify comes with various flexbox utility classes for controlling the layout of flex containers with alignment, justification, wrapping, and more.

Breadcrumbs are navigation helpers that allow users to keep track and maintain awareness of their location within a website. They serve as a navigational aid that enables the user to understand the relation between the current page and higher-level pages. In this article, we’re going to learn how to create breadcrumbs with the Vuetify breadcrumbs component.

The Vuetify Breadcrumbs Component (v-breadcrumbs)

Vuetify provides the v-breadcrumbs component for creating and displaying breadcrumbs. The breadcrumbs component comes with an items prop that takes an array containing information about each item of the breadcrumbs. Each array element is an object that represents one item. Here are some of the properties of this object that we can set:

• text: sets the text that will be displayed for that item.
• href: sets the location that the user can navigate to by clicking on the breadcrumbs item.
• disabled: determines whether the user can click on the breadcrumb to navigate to the location specified with href.

<template>
  <v-app>
    <v-breadcrumbs :items="items"></v-breadcrumbs>
  </v-app>
</template>
<script>
export default {
  name: 'App',
  data: () => ({
    items: [
      {
        text: 'Home',
        disabled: false,
        href: 'breadcrumbs_home',
      },
      {
        text: 'Link 1',
        disabled: false,
        href: 'breadcrumbs_link_1',
      },
      {
        text: 'Link 2',
        disabled: true,
        href: 'breadcrumbs_link_2',
      },
    ],
  }),
};
</script>

Vuetify Breadcrumbs Divider

We can customize the separator displayed between the breadcrumbs with the divider prop. The default separator is a forward slash (/).

<template>
  <v-app>
    <div>
      <v-breadcrumbs :items="items" divider="-"></v-breadcrumbs>

      <v-breadcrumbs :items="items" divider="."></v-breadcrumbs>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
  data: () => ({
    items: [
      {
        text: 'Home',
        disabled: false,
        href: 'breadcrumbs_home',
      },
      {
        text: 'Link 1',
        disabled: false,
        href: 'breadcrumbs_link_1',
      },
      {
        text: 'Link 2',
        disabled: true,
        href: 'breadcrumbs_link_2',
      },
    ],
  }),
};
</script>

Large Breadcrumbs

We can increase the font size of the breadcrumbs by setting the large prop to true. large increases the font-size of each item from the default 14px to 16px.

<template>
  <v-app>
    <div>
      <v-breadcrumbs :items="items"></v-breadcrumbs>

      <v-breadcrumbs :items="items" large></v-breadcrumbs>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
  data: () => ({
    items: [
      {
        text: 'Home',
        disabled: false,
        href: 'breadcrumbs_home',
      },
      {
        text: 'Link 1',
        disabled: false,
        href: 'breadcrumbs_link_1',
      },
      {
        text: 'Link 2',
        disabled: true,
        href: 'breadcrumbs_link_2',
      },
    ],
  }),
};
</script>

Vuetify Breadcrumbs Icon Dividers

We can use the divider slot of v-breadcrumbs to display custom HTML between each item of the breadcrumbs. For example, we can display any of the icons from Material Design Icons with the Vuetify icon component (v-icon):

<template>
  <v-app>
    <div>
      <v-breadcrumbs :items="items">
        <template v-slot:divider>
          <v-icon>mdi-forward</v-icon>
        </template>
      </v-breadcrumbs>

      <v-breadcrumbs :items="items">
        <template v-slot:divider>
          <v-icon>mdi-chevron-right</v-icon>
        </template>
      </v-breadcrumbs>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    items: [
      {
        text: 'Home',
        disabled: false,
        href: 'breadcrumbs_home',
      },
      {
        text: 'Link 1',
        disabled: false,
        href: 'breadcrumbs_link_1',
      },
      {
        text: 'Link 2',
        disabled: true,
        href: 'breadcrumbs_link_2',
      },
    ],
  }),
};
</script>

Vuetify Breadcrumbs item Slot

We can use the item slot of v-breadcrumbs to customize each breadcrumb. For example, here we display an uppercased text for each item:

<template>
  <v-app>
    <div>
      <v-breadcrumbs :items="items">
        <template v-slot:item="{ item }">
          <v-breadcrumbs-item :href="item.href" :disabled="item.disabled">
            {{ item.text.toUpperCase() }}
          </v-breadcrumbs-item>
        </template>
      </v-breadcrumbs>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    items: [
      {
        text: 'Home',
        disabled: false,
        href: 'breadcrumbs_home',
      },
      {
        text: 'Link 1',
        disabled: false,
        href: 'breadcrumbs_link_1',
      },
      {
        text: 'Link 2',
        disabled: true,
        href: 'breadcrumbs_link_2',
      },
    ],
  }),
};
</script>

Conclusion

Breadcrumbs serve as a navigation aid that helps users to maintain awareness of their location within a website. We can the Vuetify breadcrumbs component (v-breadcrumbs) to create breadcrumbs.