Comment utiliser clairement et distinctement un composant de vuetify dans mon projet Vue2 existant

Question

J'ai un projet, travaillant sur Laravel & Vue2. Je souhaite utiliser certains composants matériels d'un plugin Vue, Vuetify, dans une section spécifique de mon projet. Tout d'abord, j'ai ajouté des styles Vuetify dans mon projet, comme illustré ci-dessous:

... 
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet"> 
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"> 
</head> 

Dans ce cas, les styles vuetify effectué tout mon style de projet, ainsi que mes styles de base modifié les styles de composants vuetify.
J'ai également utilisé le style Scope dans un composant Vue, un composant de fichier unique. Mais le résultat était le même que précédemment, altéré l'ensemble du composant Vue. Alors, comment puis-je utiliser un composant vuetify, tel que FAB, séparer correctement et clairement les styles du composant et mes styles de base? Aidez-moi, s'il vous plaît.

Answer 1

Il est normal d'avoir un conflit lorsque vous utilisez 2 frameworks CSS différents. Heureusement, vous pouvez maintenant importer des composants spécifiques de vuetify en utilisant sa fonctionnalité a la carte depuis 15.x.

Exemple

import Vue from 'vue' 
import { Vuetify, VApp, VBtn } from 'vuetify' 

Vue.use(Vuetify, { 
    components: { 
    VApp, 
    VBtn 
    } 
}) 

De cette façon, vous ne devez importer ce dont vous avez besoin.

Voir