Vuetify: цвета не отображаются

Я пытаюсь интегрировать Vuetify в мой существующий проект Vue, но цвета не отображаются правильно. Я следую руководству по https://vuetifyjs.com/en/getting-started/quick-start → существующим приложениям.

Файл css, кажется, как-то загружен правильно, поскольку кнопки, кажется, выделены тенями, и есть некоторые эффекты щелчка. Однако цвета и текст не отображаются правильно:

Мой 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/>"
});

Мой компонент.

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

Ответ 1

Я нашел проблему. Мне пришлось обернуть компоненты Vuetify внутри тега v-app.

<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 гласит:

Чтобы ваше приложение работало правильно, вы должны обернуть его в компонент v-app. Этот компонент используется для динамического управления областью содержимого и является точкой крепления для многих компонентов.

Ответ 2

просто оберните APP.vue → <v-app>all other components</v-app> <= это решение !!!! Спасибо Канер! Я был в оцепенении несколько дней.