The Artima Developer Community
Sponsored Link

Java Buzz Forum
Vue + Webpack + Bootstrap

0 replies on 1 page.

Welcome Guest
  Sign In

Go back to the topic listing  Back to Topic List Click to reply to this topic  Reply to this Topic Click to search messages in this forum  Search Forum Click for a threaded view of the topic  Threaded View   
Previous Topic   Next Topic
Flat View: This topic has 0 replies on 1 page
Ross Mahony

Posts: 58
Nickname: rossma
Registered: Apr, 2010

Ross Mahony is a Java developer interested in collaboration, development and new ideas
Vue + Webpack + Bootstrap Posted: Sep 13, 2017 7:33 PM
Reply to this message Reply

This post originated from an RSS feed registered with Java Buzz by Ross Mahony.
Original Post: Vue + Webpack + Bootstrap
Feed Title: Monster Sandwich - Java, Spring, Hibernate, JPA, JEE, Scala
Feed URL: http://monstersandwich.blogspot.com/feeds/posts/default?alt=rss
Feed Description: A practical site with discussions on a wide range of Java topics where I have tried to include best practices. I try to include practical working examples that anyone can download, install and run. I would love to open discussion to other developers to collaborate with and to learn.
Latest Java Buzz Posts
Latest Java Buzz Posts by Ross Mahony
Latest Posts From Monster Sandwich - Java, Spring, Hibernate, JPA, JEE, Scala

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

Read: Vue + Webpack + Bootstrap

Topic: Vue + Webpack + Bootstrap Previous Topic   Next Topic Topic: Modern TDD-oriented Java 8 JUnit test template for Idea (with Mockito and AssertJ)


Sponsored Links



Google
  Web Artima.com   

Copyright © 1996-2017 Artima, Inc. All Rights Reserved. - Privacy Policy - Terms of Use - Advertise with Us