Bootstrap 4 continues to be the most popular framework for creating web apps. It’s a shame that the jQuery dependency makes it less powerful than it could be!

Fortunately, it’s fairly easy to swap jQuery for Vue to make a far simpler and more flexible development experience.

In this tutorial, I’ll show you how easy it is to set up a Bootstrap 4 project with Vue. To do this, we’ll be using Bootstrap-Vue, Vue CLI, and Vue 2.6. I’ll assume you already know the basics of both Bootstrap and Vue.

Setting up a Bootstrap and Vue project

The Bootstrap-Vue project has done most of the heavy lifting of replacing jQuery with Vue by implementing Bootstrap features as Vue components.

Rather than installing it directly, we can use Bootstrap-Vue as a Vue CLI plugin. This takes care of any configuration boilerplate and will automatically add any dependencies so I highly recommend this approach.

Let’s create a new Vue CLI project:

$ vue create bootstrap-vue-app

Note that you will need to have Vue CLI installed in your dev environment already (instructions here).

Vue CLI will now take you through the Vue app setup. If you aren’t sure what options to choose, just select “default”.

Now, change into your new project directory:

$ cd bootstrap-vue-app

You can now add the Bootstrap-Vue plugin to your project. Unless you have reasons otherwise, I suggest you select “Y” for any prompts.

$ vue add bootstrap-vue

Thanks to the magic of Vue CLI, you have now set up a best-practice Vue & Bootstrap project with no configuration required!

Clearing out boilerplate

By default, Vue CLI provides a boilerplate app for you to begin with. Let’s clear the content of App.vue as we’ll still need that file, but we can delete HelloWorld.vue all together.

$ > src/components/App.vue
$ rm src/components/HelloWorld.vue

Bootstrap-Vue components

Almost all of the features of Bootstrap are available as globally registered components in Bootstrap-Vue.

These generally have the same names as the Bootstrap components, but to distinguish them from other components, they’re prefixed with b-.

For example, let’s create a new template in App.vue and add a Bootstrap container. This is packaged in the component b-container.

<template>
  <b-container>
    <p>Hello, Bootstrap-Vue</p>
  </b-container>
</template>

Let’s now serve the app we’ve created

$ npm run serve

#vue.js #bootstrap #vue #programming