Vuetify button colors are not working

user_8785652 0
Viewed 14071

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?

vuetify.js vue.js
4 Answers

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

user_47252950
user_110581920

update to vuetify v0.16.9 to use color

user_70239220

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>
user_52937910
Related