Vuetify Styles not visible

Question

I am a beginner in the world of Vue, so please bear with my foolish question(s).
I have a boilerplate code for a Vue project which I cloned from: Vue Enterprise Boilerplate

I wanted to use Vuetify components, so I followed the following steps:
1. Cloned the vue-enterprise-boilerplate
2. npm install vuetify --save
3. In my main.js I added the vuetify dependency like:

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

Vue.use(Vuetify);

4. I am using Vue CLI 3 (which comes with the boilerplate), also I have installed the CCS Loader.
5. Now in my app.vue, I have a simple button like:

<v-app>
  <v-btn color="primary">Test</v-btn>
</v-app>

But when I run the app, I only see the outline of the button, but the styles are missing. Here is a screenshot below:

Also here is the dev-tools snapshot:

As you can see, the vuetify.min.css is being referenced, I am unable to debug why this is not behaving as per the Vuetify guides.

What steps am I missing?

Answer 1

What fixed the issue for me was the adding of class .v-application at the top most html tag (or the first one after template tag). Usually if I add <v-app> it all works but for some reason using vuitify 2.0.4 this didn't worked (may be because I'm not using vue-cli and webpack but parcel.js).

So adding this class solved the same issue for me.

EDIT

Actually I just found why v-app was ignored. Since I'm using vuetify 2.0.4. without vue-cli and webpack I need to include the vuetify components by my self like so:

import Vue from 'vue'
import Vuetify, {
    VCard,
    VImg,
    VCardTitle,
    VBtn,
    VCardActions,
    VCardText,
    VProgressCircular,
    VSpacer,
    VDialog,
    VDivider,
    VAlert,
    VApp,
} from 'vuetify/lib'

Vue.use(Vuetify, {
    components: {
        VCard,
        VImg,
        VCardTitle,
        VBtn,
        VCardActions,
        VCardText,
        VProgressCircular,
        VSpacer,
        VDialog,
        VDivider,
        VAlert,
        VApp,
    },
})

import 'material-design-icons-iconfont/dist/material-design-icons.css';

export default new Vuetify({})

Which is then imported in the vue app like this:

import Vue from "vue";
import vuetify from './src/vuetify'

import VocabularyApp from "./src/App.vue";

new Vue({
  vuetify,
  render: h => h(VocabularyApp)
}).$mount('#app-tutor');

So v-app wasn't working as I didn't included it in the list of components that I need for my app to work. More you can find here.

Answer 2

Welcome to the vuetiful world of vue.

You are looking into the shadow dom, please inspect the button element not the div element inside button element. The parent button element of the div will have classes like .primary .error based on the prop you give.

See the screenshot:

I hope this helps.

Answer 3

I think this is mostly a problem with the enterprise boilerplate code coming with a lot of UI styling already in place, and conflicting with the Vuetify button CSS or something along those lines. You're probably going to need to either choose to go with the enterprise template more completely (without Vuetify), or go with the more common Vue/Vuetify defaults. e.g. with vue-cli 3 installed, just:

vue create my-app
cd my-app
vue add vuetify

See https://vuetifyjs.com/en/getting-started/quick-start#vue-cli-3

I know this isn't particularly helpful in terms of actually answering the question you're asking, but my gut feeling is that you will probably need to either reconsider that approach and go with the more mainstream vue+vuetify, or ask the providers of the boilerplate for help when using an alternative UI library (Vuetify) with that specific site implementation.

Answer 4

In my case I used stylus and had the css.requireModuleExtension = false option in vue.config.js. Styles just didn't load. Switching it to the true or removing this option did the trick.

// vue.congif.js

module.exports = {
  // ...
  css: {
    // ...
    requireModuleExtension: true
  }
  // ...
}