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-starte

Answer 1

Initially just add <v-app> tag in the root vue file or the app.vue file and dont use <v-app> tag in any other vue files.

In app.vue file:

<template>
  <v-app>
    <HomePage />
  </v-app>
</template>

I think data-app issues, colour issues, modal issues with respect to vue's v-app can be solved.

Answer 2

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.