Vuetify: Default colors not apply?

Created on 14 Mar 2018 · 4Comments · Source: vuetifyjs/vuetify

Its my first time using Vuetify, but i have a problem with default css color styles? I just installed vuetify like in "Getting Started" section and when i use the color directive, nothing is applied, some help?

import Vue from 'vue'
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css'

Vue.config.productionTip = true;
Vue.use(Vuetify);

new Vue({

  el: '#app',
  template: '<div id="app">' +
              '<v-btn color="primary">Primary</v-btn>'+
              '<v-btn color="success">Success</v-btn>'+
            '</div>'
});

I'm using vue-cli with webpack, i have css loader, everything is ok, if i inspect the DOM the class primary, success, is applied to the buttons, but not display any color ..
Link with displayed result: https://imgur.com/a/042Du
Link with DOM inspection result: https://imgur.com/a/UBENu

Vuetify version: 1.0.8 (i have tested in 1.0.7 too)
Vue version: 2.5.2 (i have tested in 2.5.16 too)

Source

ankology

Most helpful comment

@ankology You must use v-app. (Large red alert at the top page)
Right code:

new Vue ({
   el: '#app',
   template: '<div id="app">' +
               '<v-app>' +
               '<v-btn color="primary">Primary</v-btn>' +
               '<v-btn color="success">Success</v-btn>' +
               '</v-app></div>'
});

FFxSquall on 14 Mar 2018

👍3

All 4 comments

Please only create issues with the provided issue creator. In the boilerplate for creating an issue, it explains that any ticket made without this will be automatically closed. Thank you.

johnleider on 14 Mar 2018

@ankology You must use v-app. (Large red alert at the top page)
Right code:

new Vue ({
   el: '#app',
   template: '<div id="app">' +
               '<v-app>' +
               '<v-btn color="primary">Primary</v-btn>' +
               '<v-btn color="success">Success</v-btn>' +
               '</v-app></div>'
});

FFxSquall on 14 Mar 2018

👍3

Thanks! @FFxSquall

ankology on 14 Mar 2018

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord