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
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.
