CODEWITHSUNDEEP
vue.jsvuetify.js
hupakeeeeee
hupakeeeeee

Reputation: 113

Vuetify button colors are not working

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?

Upvotes: 9

Views: 16637

Answers (5)

Nathan Wailes
Nathan Wailes

Reputation: 12222

I was just having this issue and it turned out it was because I had earlier set $color-pack: false in my Vuetify settings in settings.scss. Switching it to true fixed the problem.

enter image description here

Upvotes: 0

JChunqui
JChunqui

Reputation: 32

update to vuetify v0.16.9 to use color

Upvotes: 0

Ing Oscar MR
Ing Oscar MR

Reputation: 779

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

Upvotes: 9

Juan Pablo Ugas
Juan Pablo Ugas

Reputation: 1123

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

Upvotes: 48

Q-Master
Q-Master

Reputation: 84

If you are using an older version of vuetify you may have to use a class instead of color. I had the same issue until I updated the version. 

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

However, they also have some documentation in regards to stylus: https://vuetifyjs.com/en/style/colors

While convenient, the color pack increases the css export size by ~30kb. Some projects may only require the default provided classes that are created at run-time from the Vuetify bootstrap. To disable this feature, you will have to manually import and build the main stylus file. This will require a stylus loader and a .styl file entry.

<style lang="stylus">
  $color-pack = false

  @import '~vuetify/src/stylus/main'
</style>

Upvotes: 0

Related Questions