Menu
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?
520
Answer 1: There are css classes for coloring text anywhere in vuetify, just append --text to a color. It should work with colors defined in your theme as well e.g. primary--text and similar. Note that this is not specific to a v-btn , class should work anywhere.
Changing text color and background color is easy with Vuetify, too. For the background color, simply add the name of the required color to the element's class. For text color, just add the color name followed by --text .
The current version of Vuetify does not support Vue 3. Support for Vue 3 will come with the release of Vuetify v3 . When creating a new project, please ensure you selected Vue 2 from the Vue CLI prompts, or that you are installing to an existing Vue 2 project.
Unlike other frameworks, Vuetify is designed from the ground up to be easy to learn and rewarding to master with hundreds of carefully crafted components from the Material Design specification .
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
71
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With