web-dev-qa-db-fra.com

Vuetify: les couleurs ne sont pas visibles

J'essaie d'intégrer Vuetify à mon projet Vue existant, mais les couleurs ne s'affichent pas correctement. Je suis le guide à l'adresse https://vuetifyjs.com/fr/getting-started/quick-start -> applications existantes.

Le fichier css semble être chargé correctement car les boutons semblent être mis en surbrillance avec des ombres et il y a des effets de clic. Cependant, les couleurs et le texte ne s'affichent pas correctement:

enter image description here

Mon 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/>"
});

Mon composant.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>
vuetify.js
22
Caner

J'ai trouvé le problème. Je devais envelopper les composants Vuetify dans la balise 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>

La documentation Vuetify dit:

Pour que votre application fonctionne correctement, vous devez l'envelopper dans un composant v-app. Ce composant est utilisé pour gérer dynamiquement votre zone de contenu et constitue le point de montage de nombreux composants.

58
Caner