Including bootstrap in Vue.js throwing jQuery not found error

Question

I'm writing a chrome extension using Vue.js, for the interface I need bootstrap. I added the bootstrap like the following but it throwing the the error Uncaught ReferenceError: jQuery is not defined at Object.dismiss (popup.js:9113)

import jQuery from 'jquery';
import bootstrap from 'bootstrap';
import Vue from 'vue';
import App from '../component/app.vue';

var app=new Vue({
  el:'#app',
  data:{
    name:'vue-chrome-extension'
},
render: h =>h(App)
})

how i can fix this error?

Answer 1

 - First Upoll Install the Jquery Npm Package via this command where ur
   project is situated .

   open the command prompt >> enter the following Command.

   **cd "your Project folder path"**   then Press enter  Then  Type the following command to install the Jquery package in ur project. As

    @TremendusApps suggests in his answer, add the Expose Loader
   package:

   npm install expose-loader --save-dev

   import in your entry point main.js like this:

   import 'expose?$!expose?jQuery!jquery'


   Or 

   Add the ProvidePlugin to the plugins array in both
   build/webpack.dev.conf.js and build/webpack.prod.conf.js so that
   jQuery becomes globally available to all your modules:

   plugins: [
     new webpack.ProvidePlugin({
       $: 'jquery',
       jquery: 'jquery',
       'window.jQuery': 'jquery',
       jQuery: 'jquery'   }) 
            ]

Regards.