How to set main.js file to add Bootstrap-vue to the Vuex project?

Question

I started a project with vue/vuex and trying to add Bootstrap-vue to it.

How to organize main.js file merging two fragments -

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

const app = createApp(App)

app.use(store)

app.mount('#app')

---------------add this:

import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

// Import Bootstrap and BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

vuex starting code with bootstrap starting code ?

Moritz Ringler · Accepted Answer · 2023-05-16 19:40:20Z

0

The upper part is Vue 3, the lower part is Vue 2 - the two do not mix, you have to use the one matching your Vue version.

Note that BootstrapVue does not yet support Vue 3, so you either have to downgrade to Vue 2, use the compat module, wait a while or switch to a different design system, like Vuetify, PrimeVue, Antd, etc.

answered May 16, 2023 at 19:40

Moritz Ringler

16.4k10 gold badges29 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to set main.js file to add Bootstrap-vue to the Vuex project?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related