How include bootstrap and jquery to vue webpack-simple template?

Question

I need use bootstrap 3 on my vue app. I do following:

 vue init webpack-simple
 npm install jquery bootstrap

after this I add to webpack.config.js

 module.exports = {
 ...
   plugins: [
       new webpack.ProvidePlugin({
           $: "jquery",
           jQuery: "jquery"
       }),
   ]
 }

and add to src/main.js

 window.$ = window.jQuery = require('jquery')
 import 'bootstrap'

and got error in browser:

Uncaught ReferenceError: jQuery is not defined

how I can resolve this problem?

UPDATE:

I maked like say @Sandwell, but no have bootstrap.css in result. I add line to src/main.js

 import Bootstrap from 'bootstrap/dist/css/bootstrap.css'

and got webpack compilation error:

./node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf Module parse failed: Unexpected character '' (1:0) You may need an appropriate loader to handle this file type. (Source code omitted for this binary file) @ ./node_modules/css-loader!./node_modules/bootstrap/dist/css/bootstrap.css 6:4790-4842 @ ./node_modules/bootstrap/dist/css/bootstrap.css @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

I have loader in webpack.config.js module.rules:

  {
    test: /\.(png|jpg|gif|svg|ttf)$/,
    loader: 'file-loader',
    options: {
      name: '[name].[ext]?[hash]'
    }
  }

Sandwell Sandwell · Accepted Answer · 2018-01-03T15:07:02

For webpack 2

I did a vendor bundle for my libs. It should work this way.

  module.exports = {
    entry: {
        app: 'path/to/initapp.js',
        vendor: ['jQuery', 'Bootstrap']
    }
    output: {
      path: rootPath + 'public/',
      filename: 'js/[name].js'
    }, 
    plugins: [
      new webpack.optimize.CommonsChunkPlugin({
        names: ['vendor']
      })
    ]
  }

then jQuery should be in the vendor.js bundle Do not forget to import it in your initapp.js

import 'bootstrap';
import jQuery from 'jQuery'
window.jQuery = jQuery

You should check this doc for more details

How include bootstrap and jquery to vue webpack-simple template?

1 Answers