Vuetify: colors are not showing up

Question

I'm trying to integrate Vuetify to my existing Vue project, but the colors are not showing up correctly. I'm following the guide at https://vuetifyjs.com/en/getting-started/quick-start -> existing applications.

The css file seems to be somehow loaded correctly as buttons seems to be highlighted with shadows and there are some click effects. However the colors and the text are not showing up correctly:

My main.js

import Vue from "vue";
import App from "./App";
import Vuetify from "vuetify";
import router from "./router";
import "../node_modules/vuetify/dist/vuetify.min.css";

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

/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  components: { App },
  template: "<App/>"
});

My component.vue

<template>
  <div class="hello">
      <v-btn color="success">Success</v-btn>
      <v-btn color="error">Error</v-btn>
      <v-btn color="warning">Warning</v-btn>
      <v-btn color="info">Info</v-btn>
  </div>
</template>

<script>
... // Removed for simplicity
</script>

<style lang="stylus" scoped>
  @import '../../node_modules/vuetify/src/stylus/main' // Ensure you are using stylus-loader
</style>

Answer 1

I found the problem. I had to wrap Vuetify components inside v-app tag.

<v-app>
  <v-btn color="success">Success</v-btn>
  <v-btn color="error">Error</v-btn>
  <v-btn color="warning">Warning</v-btn>
  <v-btn color="info">Info</v-btn>
</v-app>

Vuetify documentation says:

In order for your application to work properly, you must wrap it in a v-app component. This component is used for dynamically managing your content area and is the mounting point for many components.