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