I am currently in the process of transitioning an app from jQuery/Bootstrap3 to Vue/Vuetify. My approach is to tackle one small task at a time, such as converting the Navbar into its own Vue component and then gradually updating other widgets.
Since the navbar is globally loaded on every page, Vuetify's styles are conflicting with Bootstrap3 styles (like .row, etc). I have intentionally opted not to utilize Vuetify's row, container, or similar components, sticking solely to the components listed in my custom vuetify.js setup.
Is there a way to prevent Vuetify's styling from interfering with Bootstrap? I have configured Vuetify with tree shaking and only imported necessary components in my vuetify.js file:
import Vue from 'vue';
import Vuetify, {
VApp,
VCheckbox,
VRadio,
VSelect,
VSwitch,
} from 'vuetify/lib';
Vue.use(Vuetify, {
components: {
VApp,
VCheckbox,
VRadio,
VSelect,
VSwitch,
},
});
const opts = {};
export default new Vuetify(opts);
Then, using Vue.extend, I extend the NavbarApp:
const NavbarAppRoot = Vue.extend(NavbarApp);
Lastly, I incorporate it into my Navbar app along with other elements like this:
new NavbarAppRoot({
el: navbarAppRootEl,
store,
vuetify, // <-- referring to the above vuetify.js
propsData: {
lang: config.lang,
},
i18n,
});
It is important to note that I am not importing vuetify.min.css anywhere in the codebase.
To illustrate the conflict between Vuetify and Bootstrap, here is a screenshot: https://i.stack.imgur.com/EWXzs.png
Any suggestions on how to prevent Vuetify's styles from taking precedence over crucial Bootstrap3 styles during this transition phase?