Vue + Webpack + Bootstrap

I created a simple Vue, Webpack and Bootstrap template to showcase how to integrate Bootstrap with Vue using Webpack.

Dependencies 

Required Dependencies

• bootstrap
• css-loader
• file-loader

Optional Dependencies 

• jquery
• popper.js

 package.js

{
  "name": "vue-webpack-bootstrap-template",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "bootstrap": "4.0.0-beta",
    "jquery": "^3.2.1",
    "popper.js": "^1.12.5",
    "vue": "^2.3.3"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-env": "^1.5.1",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "vue-loader": "^12.1.0",
    "vue-template-compiler": "^2.3.3",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  }
}

Webpack Configuration

Loaders

The following loaders need to be added to the webpack.config.js

 
 {
   test: /\.(png|jpg|gif|svg)$/,
   loader: 'file-loader',
   options: {
     name: '[name].[ext]?[hash]'
   }
 },
 {
   test: /\.css$/,
   loaders: ['style-loader','css-loader']
 },
 {
   test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
   loader: 'url-loader?limit=10000&mimetype=application/font-woff'
 },
 {
   test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
   loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
 },
 {
   test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
   loader: 'file-loader'
 }

Provide Plugin

If you optionally want to use Bootstrap for the components that make use of JQuery and Popper.js you will need to add the following plugin:

 new webpack.ProvidePlugin({
   $: 'jquery',
   jQuery: 'jquery',
  'window.jQuery': 'jquery',
   Popper: ['popper.js', 'default'],
   // In case you imported plugins individually, you must also require them here:
   Util: "exports-loader?Util!bootstrap/js/dist/util",
   Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown"
 })

Main.js

require('bootstrap/dist/css/bootstrap.css')

import Vue from 'vue'
import App from './App.vue'

import 'bootstrap'

new Vue({
  el: '#app',
  render: h => h(App)
})

BootstrapVue

Instead of doing the above you could use BootstrapVue dependency that is a library that creates Vue Bootstrap components. The following GitHub project is a simple bootstrap-vue template.