Adding Vuetify to my laravel/Vue app breaks some laravel components css

Question

I have a laravel/VueJs app which was normal until I decided to add Vuetify. After installing the Vuetify package with npm, I imported it via a plugin/vuetify.js folder inside my resources/js folder like so(inside plugin/vuetify.js)

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

export default new Vuetify;

I imported into app.js like so;

import vuetify from './plugin/vuetify'

And in the Vue instance added vuetify;

const app = new Vue({
    el: '#app',
    router,
    vuetify
});

My vuetify components work well but some laravel components like the navbar breaks, the height increasing significantly. When I comment out the vuetify import, it goes back to normal. Can somebody help point out a fix or what am doing wrong please? Laravel 5.8, vuetify 2.0.7

What css library are you using for your laravel components?

Tom Headifen
– Tom Headifen

2019-08-23 04:14:23 +00:00
Commented Aug 23, 2019 at 4:14 — Tom Headifen
– Tom Headifen, Commented Aug 23, 2019 at 4:14
Thanks @hdifen.Im using bootstrap 4

banky
– banky

2019-08-23 08:56:29 +00:00
Commented Aug 23, 2019 at 8:56 — banky
– banky, Commented Aug 23, 2019 at 8:56

Tom Headifen · Accepted Answer · 2020-01-06 22:21:01Z

Vuetify and Bootstrap 4 share some of their css class names. You are trying to use two different css frameworks on the same page. Vuetify is probably getting loaded after bootstrap 4 which means it's overwriting some of bootstraps css.

The easy solution is just to use one or the other for your application. There are libraries for vue that allow you to easily use bootstrap 4 with vue. I've used bootstrap-vue before and it works well.

If you REALLY want to use two different css frameworks on the same page you can load vuetify css inside of a class.

e.g. app.scss

.my-app {
    @import 'vuetify/dist/vuetify.min.css'
}

app.vue

<template>
  <div class="my-app">
    Everything in here is using vuetify
  </div>
</template>

Collectives™ on Stack Overflow

Adding Vuetify to my laravel/Vue app breaks some laravel components css

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related