0

I have a component I designed with Vuetify and I'm trying to use it in my Nuxt.js application which is styled with Bootstrap. Is there any way for me to use my Vuetify component without affecting the styles of the rest of the application? I've tried importing Vuetify in head() tag of component and also importing specific Vuetify components but no luck. The styles are conflicting everywhere within my application.

Khalid
  • 259
  • 1
  • 2
  • 7
  • 1
    I think you can't. Bootstrap is a css framework an this wil provide a lot of default settings in your application by default. And the vuetify will do the same things. So you can use only a one css lib as default. Or one ou another. Both css frameworks can't work togeter. – Henrique Van Klaveren Aug 07 '20 at 15:07

2 Answers2

1

Maybe "scoped" attribute in css will help with your issue

Igor Sushko
  • 33
  • 6
0

According to some of the responses here it can be possible. You can use a scoped style tag to import the vuetify css within your vuetify component so that it doesn't conflict with the bootstrap styles.

hey_its_jimmy
  • 66
  • 6