Vuetify — Text Styles

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>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

to style text with or without lines.

Text Transform

We can transform text with some text- classes.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <p class="text-lowercase">Lowercased text.</p>
        <p class="text-uppercase">Uppercased text.</p>
        <p class="text-capitalize">CapiTaliZed text.</p>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

We can change the text to upper case, lower case, or capitalized as we wish.

Font Weights and Italics

We can change the font-weight and toggle on or off italics with classes provided by Vuwetify.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <p class="font-weight-black">Black text.</p>
        <p class="font-weight-bold">Bold text.</p>
        <p class="font-weight-medium">Medium weight text.</p>
        <p class="font-weight-regular">Normal weight text.</p>
        <p class="font-weight-light">Light weight text.</p>
        <p class="font-weight-thin">Thin weight text.</p>
        <p class="font-italic">Italic text.</p>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

The font-weight- classes let us set the font-weight to what we want.

Text Opacity

The text opacity can be changed with different classes.

For instance, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <p class="text--primary">opacity 87%.</p>
        <p class="text--secondary">opacity 60%.</p>
        <p class="text--disabled">opacity 38%.</p>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

The opacity can be changed with the text--primary , text--secondary and text--disabled classes.

They have the opacities listed.

RTL Alignment

Vuetify has classes to change the alignment to RTL.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <p class="subtitle-2 text-center">lorem ipsum</p>
        <p
          class="text-sm-left"
        >lorem ipsum</p>
        <p
          class="text-md-left"
        >lorem ipsum.</p>
        <p
          class="text-lg-right"
        >lorem ipsum.</p>
        <p
          class="text-xl-left"
        >lorem ipsum</p>
        <p class="subtitle-2 text-center">lorem ipsum</p>
        <p class="text-start">lorem ipsum</p>
        <p class="text-end">lorem ipsum</p>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

We have the classes to align text according to breakpoints and the position.

Conclusion

We can align text and change text style with the classes provided by Vuetify.