How to include bootstrap-vue in vue.js with npm?

Question

I am using vue.js, webpack, npm and jQuery. Now I want to include the framework bootstrap-vue in my project. I followed the guide of https://bootstrap-vue.js.org/docs via npm and included bootstrap-vue. While starting the build-process of npm, I am getting too many errors with babel-runtime like:

ERROR in ./node_modules/bootstrap-vue/es/utils/popover.class.js
Module not found: Error: Can't resolve '@babel/runtime/helpers/typeof' in 
'C:\Users\abdul\WebstormProjects\editor\node_modules\
bootstrap-vue\es\utils'
@ ./node_modules/bootstrap-vue/es/utils/popover.class.js 10:38-78
@ ./node_modules/bootstrap-vue/es/directives/popover/popover.js
@ ./node_modules/bootstrap-vue/es/directives/popover/index.js
@ ./node_modules/bootstrap-vue/es/directives/index.js
@ ./node_modules/bootstrap-vue/es/index.js
@ ./src/main.js

main.js:

import Vue from 'vue'
import App from './App'
import router from './router'
import 'jquery'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})

I have similar errors like this for other javascript files. Popover.class.js is one of them.

I except a successful run build with bootstrap-vue. Optional: I could include bootstrap-vue on other ways.

hey bigiza, welcome to stack overflow, can you please try to delete your whole folder of node_modules and then open a new terminal and then run nam install...and tell me after how things went :) — Dabees
– Dabees, Commented Feb 17, 2019 at 16:18
@Ahm. npm WARN rollback Rolling back [email protected] failed (this is probably harmless): EPERM: operation not permitted, lstat 'C:\Users\abdul\WebstormProjects\editor\node_modules\fsevents\node_modules' npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (cur rent: {"os":"win32","arch":"x64"}) npm run build: same errors like before. — Abdulkadir Uyanik
– Abdulkadir Uyanik, Commented Feb 17, 2019 at 16:28
i think that the problem is that some packages is not downloaded when you nam install or that there a problem with the path that babel using — Dabees
– Dabees, Commented Feb 17, 2019 at 16:42
can you try to make a vue.config.js file in your root folder and add this inside const path = require('path') module.exports = { configureWebpack: { resolve: { alias: { 'bootstrap-components': path.resolve(__dirname, 'node_modules/bootstrap-vue/es/components') } } } } — Dabees
– Dabees, Commented Feb 17, 2019 at 16:43
also if you can add to the post the content of your babel.config.js i think it will be helpful — Dabees
– Dabees, Commented Feb 17, 2019 at 16:47

gian29 · Accepted Answer · 2019-02-18 05:10:44Z

9

Install vue-cli 3 and add bootstrap-vue as a plugin

Run these commands:

npm install -g @vue/cli

vue create project-name

cd project-name

vue add bootstrap-vue

The plugin will be automatically added and configured.

answered Feb 18, 2019 at 5:10

gian29

7342 gold badges7 silver badges9 bronze badges

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

Comments

Saeed · Accepted Answer · 2019-11-04 12:22:16Z

3

Create Project then run this command:

npm i bootstrap-vue

edited Nov 4, 2019 at 12:22

Saeed

3,5466 gold badges40 silver badges58 bronze badges

answered Oct 14, 2019 at 20:01

user8272461

Collectives™ on Stack Overflow

How to include bootstrap-vue in vue.js with npm?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related