VueJS + NuxtJS + Vuetify - Text size not applied

Question

I have the following component

<v-card v-for="item in items">
  .
  .
  <v-card-title class="text-button" v-text="item.category" />
  .
  .
</v-card>

However the "text-button" class is not applied.

According to the vuetify docs there are several font size classes, h1, h2 etc but none of them work. But adding class="text-uppercase" or class="text-underline" or any of the other classes does work the only thing that wont work are the font size classes, which is extremely inconvenient as they offer a shorthand for device sizes (text-xl-h2) and such.

If it helps, this here is the style from inspecting the element

.v-card__title {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: 0.0125em;
    line-height: 2rem;
    word-break: break-all;
}

the font-size is always 1.25rem no matter what. If I modify that value by hand, the text size changes. So possibly the problem is this 1.25rem value, which I am not setting anywhere and I have no idea where it is

Nicolas Durant · Accepted Answer · 2021-03-09 10:16:40Z

1

I just copied the v-card Vuetify example and applied the class to the v-card-title without a problem Codepen. Which Version of Vuetify are you using? If you are using 1.5.x, text-button doesn't exist there and text-classes get applied differently, I can't tell you on which 2.4.x Version it came, but I think this might be the issue. Are other text-{values} classes working for you, like text-h1?

answered Mar 9, 2021 at 10:16

Nicolas Durant

4654 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

isebarn Over a year ago

npm install @nuxtjs/vuetify@next will update vuetify to latest

Collectives™ on Stack Overflow

VueJS + NuxtJS + Vuetify - Text size not applied

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related