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.