CODEWITHSUNDEEP
cssvuejs2stylesheetvue-componentvuetify.js
Tugsbayar Buyadaa
Tugsbayar Buyadaa

Reputation: 133

How to use clearly and separatedly a component from vuetify in my existing Vue2 project

I have a project, working on Laravel & Vue2. I want to use some material components from a Vue plugins, Vuetify, in a specific section of my project. First of all, I added Vuetify styles in my project as shown bellow:

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

In this case, vuetify styles effected my whole project styles, as well as my core styles altered vuetify component styles.
I, also, used to scoped style in a Vue component, single file component. But the result was the same as previous, altered the whole Vue component. So, How can I use a vuetify component, such as FAB, properly and clearly separate styles of the component and my core styles? please help me.

Upvotes: 3

Views: 9849

Answers (2)

Farzad.Kamali
Farzad.Kamali

Reputation: 593

in Vuetify2, to import only necessary components should import them as below:

import Vue from 'vue';
import Vuetify, {VBtn} from 'vuetify/lib';
import {Ripple} from 'vuetify/lib/directives';

Vue.use(Vuetify, {
  components: {VBtn},
  directives: {Ripple}
});
export default new Vuetify({});

it's possible to import them directly in page or components also.

Upvotes: 0

jofftiquez
jofftiquez

Reputation: 7708

It's only normal to have a conflict when you are using 2 different css frameworks. Luckily you can now import specific components from vuetify using it's a la carte feature since 15.x.

Sample

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

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

This way, you'll only have to import what you need.

Link

Upvotes: 6

Related Questions