Vuetify — Text Styles

Photo by Amanda Vick on Unsplash

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Typography

We can add classes for typography.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <div class="text-h1">heading 1</div>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

We have the text-h1 class to render a large heading.

We can do the same for the other headings, body, button, caption, subtitle, overline with the class with the same names.

Text Decoration

Vuetify also provides text-decoration classes to set this CSS property.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <a href="#" class="text-decoration-none">Non-underlined link</a>
        <div class="text-decoration-line-through">Line-through text</div>
        <div class="text-decoration-overline">Overline text</div>
        <div class="text-decoration-underline">Underline text</div>
      </v-col>
    </v-row>…