Missing some css classes in VueJS3+Vuetify

Issue

We have old VueJS+Vuetify application which we are converting to VueJS3. We have some classes defined in the template which is not available in the new version.

There are classes like xs12 (which suppose to cover full screen), text-xs-left (which suppose to set the left align text), offset-xs2 (which suppose to set the offset). There are many like this which is available in VueJS2+Vuetify which are missing in new version.

How to add those classes in the new VueJS3+Vuetify?

Solution

The xs classes were removed in favor of the breakpoint-free version, i.e. text-left instead of text-xs-left. Specifications for a size apply to all larger sizes, and since xs is the smallest size, specifications on that level apply to all other sizes, same as the breakpoint-free version.

For the text class, this is mentioned in the upgrade guide:

.text-xs-{alignment} has been renamed to .text-{alignment} to reflect the fact that it applies to all breakpoints.

(I think the offset and column classes are considered internal, there is no documentation on them.)

So you either have to add those classes yourself or update the classes:

• xs12: use v-col-12 (this one was also renamed)
• text-xs-left: use text-left
• offset-xs2: use offset-2 (larger sizes now have a dash between breakpoint and width, i.e. offset-lg-2)

Answered By - Moritz Ringler