Load Boostrap 4 alpha into Vue.js project

Once upon a time one usually desires to add Bootstrap into one’s project. Adding support for Bootstrap might seem a little hard without understanding Webpack or even despite the understanding. I started working with Vue.js (by the way, it’s great!) using the official webpack template and indeed – I struggled for a few hours.

Thus, I describe foreseen steps for the weary travelers who want Bootstrap-ify their Vue.js project.

EDIT: Look down into comments for current solutions.

Bootstrap in Vue.js

On awesome-vue list you can find a few components mentioning the Bootstrap. Between them there are the two most interesting:

Both are based on original Bootstrap’s CSS styles, but vue-strap rewrites components specifically for Vue.js and VueBoot does the opposite – behaves as a wrapper for original components written with jQuery.

I decided to use VueBoot for convenience and more reasonable idea of development. Neither is needed but either choice, you need to install Bootstrap itself first:

Note: For me, alpha-2 version of Bootstrap is the latest version that worked. Installing alpha-3 produced this error:

ERROR in ./~/bootstrap-loader/lib/bootstrap.loader.js!./~/bootstrap-loader/no-op.js
and alpha-4 is not yet (in the moment of writing this) available in npm.

Next, let’s build and load Bootstrap into application.

webpack and bootstrap-loader

To load Bootstrap we could just add few .js and .css files into webpack configuration. I decided to use bootstrap-loader instead. If using Webpack 1.x then go into branch v1, for newer Webpack 2.x (beta ATM) take the master.

Install the loader:

Now create .bootstraprc  file in project root folder (next to node_modules  folder) and fill it with .bootstraprc4-default contents.

Let’s open our webpack.base.conf.js  and add the loader:

Bootstrap dependencies

At this moment you can npm run dev  on your project and see that Bootstrap is loading! The style of the project should be bootstrappy right now. However, Boostrap JS components won’t work because there is no jQuery and Tether.

You can either turn off those components or include jQuery + tether.js.

1. I don’t want Bootstrap Components – remove jQuery dependency

Simply edit the .bootstraprc  and turn all properties captioned as “Bootstrap scripts” to false . It makes sense to turn off styles for “Components w/ Javascript” too.

Note: VueBoot needs jQuery.

2. I want Boostrap Components – install jQuery

So you need jQuery. And optionally tether.js – to provide tooltip functionality.

First step is to download jquery:

Next, how to load jQueryThis answer on StackOverflow treats the topic the excellent way. I’ll show you 2 methods.

a. webpack.ProvidePlugin

Let’s provide jQuery as global $ variable. Add this next to loaders :

In case you didn’t have webpack  variable in the webpack config file, simply import it:

b. globally require jQuery

The fallback to the plugin method could be this line in your entry file (in my case it’s app/main.js ):

window.$ = require('jquery')

placed between other imports.

Configure tooltips (tether.js)

Probably won’t need tooltips, right? You can open your .bootstraprc  then turn popover  and tooltip  options to false – both in scripts  and styles .

Still insist?

then add it to entry point (probably beginning of your webpack config):

and load it using the same instance of ProvidePlugin as for jQuery, by adding:

so it will look like this:

Test popover tooltips

To make sure it works put some markup code as in documentation:

and some JavaScript:

clicking on the button should display the popover tooltip.

Load Bootstrap in application

DevTools will be no more yelling about lack of $  or Tether . But if you tried to use the  modal component then you’d see this or similiar error:

Uncaught TypeError: $(…).modal is not a function

Simply, import 'bootstrap'  in src/main.js

Bootstrap will configure then it’s components’ setup functions into jQuery.

Summary

That’s all I’ve got folks. The worst thing about installing the Bootstrap is about versioning and finding working (non-deprecated) modules, whereas whole JavaScript world develops quickly and many things become deprecated quicker than thoughts of it would cross one’s mind.

References

  • Bikram Tuladhar

    i was able to load jquery but can’t tether. tether script is loaded but cannot find by bootstrap

    • Hey, sorry, somehow I missed your comment! Have you got rid of it already?

      • Konrad Viltersten

        I have the same issue. It says that target.popover is not a function. target is the name of my component. When I run the code but link to tether using tag links and not in the bundle with webpack, it works, though. Suggestions?

      • Bikram Tuladhar

        Actually i load bootstrap js and tether without bootstrap loader and it worked fine. Actually i was using bootstrap with vue webpack

  • Syed Haroon

    This is for someone who is looking for VUE.JS 2 and Bootstrap 4 solution:
    Stack overflow: http://stackoverflow.com/a/43383449/1292050
    Git setup https://github.com/syed-haroon/vue-js-2-basic-setup

    I also encourage you to take look at this URL for more sophisticate work setup https://github.com/prograhammer/example-vue-project

    • Thanks for sharing! The post was written in times when I couldn’t find any solution out there.

  • I found that for the tests, you need approaches (a) and (b).