Tutorial

Using Bootstrap 4 with Vue.js

Vue.js

While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.

The Bootstrap 4 beta is “right around the corner,” and I’m sure there are plenty who are excited to start using it with Vue. Well, they already can, using bootstrap-vue. However, be warned that bootstrap-vue (like Bootstrap 4) is not yet stable, and usage may change between releases.

Installation

As usual, bootstrap-vue can be installed from NPM or Yarn. You’ll also want to install the normal bootstrap package for styles.

# Yarn
$ yarn add bootstrap-vue bootstrap

# NPM
$ npm install bootstrap-vue bootstrap --save

Then, in your app’s main file, enable the VueBootstrap plugin.

main.js
import Vue from 'vue';
import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm';
import App from 'App.vue';

// Import the styles directly. (Or you could add them via script tags.)
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';

Vue.use(BootstrapVue);

new Vue({
  el: '#app',
  render: h => h(App)
});

NOTE: Styles are injected globally and may affect other components. Use with care.

Components

vue-bootstrap’s current roster of components includes most of the interactive Bootstrap 4 components: Alert, Badge, Breadcrumb, Button, Button group, Card, Collapse, Dropdown, The Usual Form Elements, Jumbotron, List group, Modal, Nav, Navbar, Pagination, Popover, Progress, Table and Tabs

NOTE: You don’t need to worry about including Bootstrap’s JS, interactivity is handled by the components.

Usage

Just use the various components in your app as normal! Non-interactive elements are still handled via CSS, so don’t get too worried about it deprecating all your current Bootstrap knowledge.

<template>
  <b-card no-block>
    <b-tabs>
      <b-tab title="Tab 1">
        Tab 1 Contents
      </b-tab>
      <b-tab title="Tab 2">
        Tab 2 Contents <b-button size="md">Boop</b-button>
      </b-tab>
      <b-tab title="Tab 3" disabled>
        Tab 3 Contents
      </b-tab>
    </b-tabs>
  </b-card>
</template>

Documentation

Obviously there’s not a lot here to help you write a complete app, so consult the docs for Bootstrap Vue, and Bootstrap 4.

0 Comments

Creative Commons License