Vuetify button colors are not working

Question

I'm using webpack to compile my vuejs project and use the vuetify framework but I can't get the colors to work. For example this:

<v-btn color="error">Error</v-btn>

Does not produce the red error button, instead it's just the white one. I include all the files using this:

main.js

import Vuetify from 'vuetify'
Vue.use(Vuetify)
import '../node_modules/vuetify/dist/vuetify.min.css'

and App.vue

<style lang="stylus">
  @require '../node_modules/vuetify/src/stylus/main'
</style>

Could someone tell me what I'm forgetting?

Solution 1

update to vuetify v0.16.9 to use color

Solution 2

If you do not wrap your app with the v-app like so...

<v-app>
  <router-view/>
</v-app>

You will get funny behavior. Wrapping the app in that tag fixed it for me. I obviously skipped the entry statement in the quick setup guide tho :D

Solution 3

To solve this problem use :

<v-app>

For more information read this article: My application does not look correct

https://vuetifyjs.com/en/getting-started/frequently-asked-questions#my-application-does-not-look-correct

Comments

[Tomer]

any error in the console? does the button have any styling?

[hupakeeeeee]

The button does have styling, it just ignores the color="error" part. It's just a default button. There are no errors at all. I'm really confused

[Marcell Toth]

Hi! There is already an answer with exactly the same solution: stackoverflow.com/a/50866408/10614791 Please do not post duplicate answers

[Ing Oscar MR]

I wrote helpful urls for more information from official vuetify documentation, perhaps I should have written it the comments, I am sorry , I am new on this community

[Marcell Toth]

No problem, I was just trying to guide you in the right direction. In your case, where you were just adding a bit of useful information to an already standing answer, the best thing to do is to edit that answer. (Or write a comment as you said if it's not as important)

[pmalbu]

THIS TIME 10000000% :) Ugh... I don't want to admit how many hours I wasted scratching my head 🤦🏻‍♂️