Currently, I am in the process of installing bootstrap-vue into my vue-cli project. I referred to the documentation provided at for guidance:
To begin, BootstrapVue needs to be registered in your app entry point:
import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
// Installation of BootstrapVue
Vue.use(BootstrapVue)
// Optionally add the BootstrapVue icon components plugin
Vue.use(IconsPlugin)
Additionally, import the Bootstrap and BootstrapVue css files:
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Alternatively, you can opt to import the Bootstrap and BootstrapVue scss files within a custom SCSS file:
@import 'node_modules/bootstrap/scss/bootstrap';
@import 'node_modules/bootstrap-vue/src/index.scss';
Ensure that you import the custom.scss file in your app entry point:
import './custom.scss'
It is essential to @import or define your custom variable values prior to including Bootstrap SCSS (bootstrap.scss) and subsequently incorporate BootstrapVue SCSS (bootstrap-vue.scss) to guarantee correct setup of variables.
Compile all SCSS @imports into a single SCSS file and include this single file in your project. Failing to do so may result in variable values and functions not being shared across files by default.
Webpack and Parcel offer support for prepending the scss modules with tilde paths (~) when importing from an scss file:
// Sample Webpack import
@import '~bootstrap';
@import '~bootstrap-vue';
// Sample Parcel import
@import '~bootstrap/scss/bootstrap';
@import '~bootstrap-vue/src/index.scss';
For further details on configuring asset loading and resolving modules, kindly refer to the respective module bundlers' documentation.
I am uncertain about where to place all this. As a newcomer to vue.js, I am confused. Is the main.js the designated entry point? Should all this go there? The current state of my main.js is as follows:
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import Routes from './routes'
import App from './App.vue'
import Vue from 'vue'
import './style/customColor.scss';
//import 'regenerator-runtime';
import store from "./store/store";
import { USER_ROLECHECK } from './store/actions/user'
import { REQ_ADMIN_ROLE } from "./utility/namespaces";
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
Vue.use(VueResource);
Vue.use(VueRouter);
Vue.config.devtools = true; //this line should be removed in the actual live build!
const router = new VueRouter({
routes: Routes,
mode: 'history'
})
router.beforeEach((to, from, next) => {
if(to.meta.reqAuth){
if(store.getters.isAuthenticated){
if(to.meta.reqAdmin){
store.dispatch(USER_ROLECHECK, REQ_ADMIN_ROLE).then(() =>{
next();
}).catch(() =>{
next({path: '/'})
})
}else{
next();
}
}else{
next({path: '/login'});
}
}else{
next();
}
})
new Vue({
el: '#app',
router,
store,
render: h => h(App),
})
What modifications are required here for the integration to function as intended?