CODEWITHSUNDEEP
vue.jscolorsvuetify.jsvuejs3vuetifyjs3
Mjelin
Mjelin

Reputation: 38

Vue 3 - Vuetify 3 : color--text not working

I've tried to install Vuetify with Vue3 for the first time today. Almost everything is working properly: components are being imported correctly, classes like "text-center" are working well too.

But I've noticed that props like "dark", and classes like "color--text" are not and I can't tell why ...

Here is my plugins/vuetify.js file:

import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/lib/styles/main.sass'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/lib/components'
import * as directives from 'vuetify/lib/directives'

export default createVuetify({
  components,
  directives,
})

For example:

<h1 class="display-2 font-weight-bold mb-3">
    <div class="red--text">Welcome to the Vuetify 3 Alpha</div>
</h1>

The text will not be red, nothing changes.

I have no clue where the problem could come from soo ... This is an S.O.S

Thanks!

Upvotes: 2

Views: 4198

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

According to vuetify classes It should be text-red instead of red--text :

 <v-app>
    <div class="bg-purple-darken-2 text-center">
      <span class="text-red">Lorem ipsum</span>
    </div>
  </v-app>

Upvotes: 4

Related Questions