VueBoot

VueBoot is a project designed to ease the use of Bootstrap in VueJS applications. It takes the approach that the Bootstrap team has done a lot of hard work, and reproducing that work is beyond this project's scope. Because of that, we choose to use the official Bootstrap javascript, and simply wrap the API in a thin VueJS wrapper.

VueBoot has the following dependencies:

VueJS (requires v1.0+, tested with v1.0.21). Any version of v1.0 should work fine.
Bootstrap (requires v4.0.0, tested with v4.0.0-alpha2). Both the CSS and the JS are required, as is JQuery, for the Bootstrap JS.

VueBoot attempts to be as non-opinionated about how you use it as either Bootstrap or VueJS are, which is why VueBoot is built as a UMD module, which will allow use in AMD, CommonJS or standard Global module development. Simply setup your project however you want, add Vue and Bootstrap, and then add VueBoot in whatever method is most appropriate.

Bower

$ bower install --save vueboot

NPM

$ npm install --save vueboot

VueBoot is built as a series of VueJS components, which can be included on an 'as needed' basis. Simply include what you need, where you need it.

Note: Some VueBoot components are made up of more than one vue component. These will be marked in the documentation, but you will be required to pull in both.

CommonJS

var vueboot = require('vueboot');

var app = new Vue({
    components: {
        modal: vueboot.modal
    }
});

AMD

define(['vueboot'], function(vueboot)
{
    var app = new Vue({
        components: {
            modal: vueboot.modal
        }
    });
});

ES6

import { modal } from 'vueboot';

var app = new Vue({
    components: {
        modal
    }
});

Global

<script src="/vendor/vueboot/vueboot.js"></script>
<script>
    var app = new Vue({
        components: {
            modal: vueboot.modal
        }
    });
</script>

Alerts are useful as temporary notifications. Alerts can also be dismissable, either by a button, a timeout, or both.

Dismissal
When an alert is dismissed, it is removed from the dom. However, due to the semantics of v-if, you can get it back simply by toggling the if statement.

Example

Alert Types

This is a success alert. This is an info alert. This is a warning alert. This is a danger alert.

No Animation

This is a success alert.

Static

This is an info alert.

Timeout

This message should time out after 4 seconds.

HTML

        <h4>Alert Types</h4>
<alert type="success">
    This is a <strong>success</strong> alert.
</alert>
<alert type="info">
    This is an <strong>info</strong> alert.
</alert>
<alert type="warning">
    This is a <strong>warning</strong> alert.
</alert>
<alert type="danger">
    This is a <strong>danger</strong> alert.
</alert>

<h4>No Animation</h4>
<alert type="success" :animation="false">
    This is a <strong>success</strong> alert.
</alert>

<h4>Static</h4>
<alert type="info" :dismissible="false">
    This is an <strong>info</strong> alert.
</alert>

<h4>Timeout</h4>
<button class="btn btn-primary" @click="showAlert()">Show Alert</button>

<alert v-if="show" type="danger"
       :timeout="4000"
       :on-closed="onClosed">
    This message should time out after 4 seconds.
</alert>

Javascript

var app = new Vue({
    debug: true,
    el: '#example',
    components: {
        alert: vueboot.alert
    },
    data: {
        show: false
    },
    methods: {
        showAlert: function(){ this.show = true; },
        onClosed: function()
        {
            console.log('onClosed!');
            this.show = false;
        }
    }
});

Component Props

We've added some properties to make alerts more dynamic and useful.

Prop	Type	Default	Description
type	`Boolean`	`false`	Required. The alert will get the class `"alert-{{ type }}"`.
dismissible	`Boolean`	`true`	Enables or disables the close button.
animation	`Boolean`	`true`	Enables or disables animation on the alert dismissing.
timeout	`Number`	`-1`	Number of miliseconds before automatically dismissing. Must be `0` or greater.
onClosed	`Function`		This callback is triggered once the closing animation for the alert has completed.

Component Methods

Reference Required
These functions are exposed to the parent, which means that you will want to use v-ref to expose the alert instance to the parent controller.

In addition to the properties, the alert component exposes methods that can be called:

dismiss() - dismisses the alert, removing it from the DOM.

Toast are alerts that pop up over top of content on the page, as a way of alerting users to important events.

Service Required
The functionality of this component relies on a javascript service. The toastService must be included in your code, if you want to use toasts. Custom CSS Required
By default, VueBoot does not put css styling on the .toast-container class. This is left up to the user to decide where on the page they want their toasts, as well as if they want them 'always on top' of other content.

Example

HTML

<div class="btn-toolbar">
    <button class="btn btn-primary"
            @click="createToast('Default Alert!!!!')">
        Create Default Toast
    </button>
    <button class="btn btn-warning"
            @click="createToast({ type: 'warning', content: '<b>Warning!</b> This is a warning!' })">
        Create Warning Toast
    </button>
    <button class="btn btn-success"
            @click="createToast({ type: 'success', dismissible: true, content: 'Dismiss me with a button.', timeout: false })">
        Create Dismissible Toast
    </button>
</div>
<toast></toast>

Javascript

var app = new Vue({
    debug: true,
    el: '#example',
    components: {
        toast: vueboot.toast
    },
    data: {
        show: false
    },
    methods: {
        createToast: function(toast)
        {
            vueboot.toastService.create(toast);
        }
    }
});

Service Methods

Adding a new toast involves calling functions on the toastService. This service is exported just like the components, and for a globally installed version, can be accessed directly as vueboot.toastService.

create(toastDef) - (String or Object) creates a new toast, and displays it. If you pass an object, it takes the same options as alerts, except for onClosed.

Custom CSS

In order to make toasts appear in the lower left corner, you can use the following CSS:

Javascript

.toast-container {
    position: fixed;
    width: 400px;
    bottom: 10px;
    left: 10px;
    z-index: 9001;
}

Example

HTML

            <button class="btn btn-secondary"
        @click="showModal('basicModal')">Open Basic Modal</button>

<modal v-ref:basic-modal>
    <div class="modal-header" slot="header">
        <h4 class="modal-title">Modal title</h4>
    </div>
    <div class="modal-body" slot="body">
        <p>So, this is a thing.</p>
    </div>
    <div class="modal-footer" slot="footer">
        <button type="button"
                class="btn btn-primary"
                @click="hideModal('basicModal')">Save changes</button>
        <button type="button"
                class="btn btn-secondary"
                @click="hideModal('basicModal')">Close</button>
    </div>
</modal>

Javascript

        var app = new Vue({
    debug: true,
    el: '#example-app',
    methods: {
        showModal: function(name)
        {
            this.$refs[name].showModal();
        },
        hideModal: function(name)
        {
            this.$refs[name].hideModal();
        }
    },
    components: {
        modal: vueboot.modal
    }
});

Component Props

We support all of the same parameters as the default Bootstrap modal. In addition, we've added a few additional properties to make working with a modal a little easier.

Prop	Type	Default	Description
show	`Boolean`	`false`	This is a two-way binding. When `show` is `true`, we open the modal, and when it is `false` we close the modal.
autoFocus	`String`		A JQuery selector for the element to focus when the modal is shown.
onClosed	`Function`		This callback is triggered once the closing animation for the modal has completed.
animation	`Boolean`	`true`	Enables or disables animation on modal opening and closing.
modal-class	`String`		A class to apply to the `.modal-dialog` div. Bootstrap defined `'modal-sm'` and `'modal-sm'` for you, but you can use any class and define it yourself.
width	`String`		A css value to set the width of the modal element. It can be any valid value for the css `width` property. (Note: This overrides `modal-class`.)
backdrop	`Boolean` or `'static'`	`true`	Includes a modal-backdrop element. Alternatively, specify the string `'static'` for a backdrop which doesn't close the modal on click.
keyboard	`Boolean`	`true`	Closes the modal when escape key is pressed.

Component Methods

Reference Required
These functions are exposed to the parent, which means that you will want to use v-ref to expose the modal instance to the parent controller.

In addition to the properties, the modal component exposes methods that can be called:

showModal() - shows the modal, and sets show to true.
hideModal() - hides the modal, and sets show to false.
refresh() - if the height of the modal changes while it's open, you will need to call this function to update it. (See here for more details.)

Tabs are a frequently used tool to separate related but distinct sections of information. VueBoot's tabs are designed to work well inside existing containers, such as cards. Additionally, we include extra styling beyond the Bootstrap default to allow tabs in various orientations.

Multiple Components Required
In order to use tabs, you will need to include both the tabset component and the tab component. Cards Support
VueBoot includes custom styling to allow tabs inside of .card blocks. However, this styling assumes the tabset is the only element contained inside. Use at your own risk.

Example

Simple Tabs

This is Tab 1. This is Tab 2. This is Tab 3.

Kitchen Sink

Bacon ipsum dolor amet pariatur andouille bacon, dolore filet mignon id in corned beef et. Venison kielbasa sausage spare ribs ball tip, eu landjaeger drumstick meatball. Leberkas dolore biltong, incididunt tenderloin nulla ground round aute salami exercitation ad consequat. Kevin landjaeger laborum sunt quis ball tip. Ipsum ut aliquip, esse sirloin incididunt boudin turducken picanha turkey.

Qui corned beef

Qui tri-tip tail, ullamco tongue picanha corned beef laboris salami minim chicken. Exercitation ullamco in pig. Turkey incididunt andouille corned beef ham ham hock. Shankle esse ball tip dolore. Cupim jerky officia do id sint.

HTML Tab ~~Header~~

I need your help, Luke. She needs your help. I'm getting too old for this sort of thing. But with the blast shield down, I can't even see! How am I supposed to fight? I suggest you try it again, Luke. This time, let go your conscious self and act on instinct.

I find your lack of faith disturbing.

What!? Look, I can take you as far as Anchorhead. You can get a transport there to Mos Eisley or wherever you're going. I have traced the Rebel spies to her. Now she is my only link to finding their secret base.

Alert!

As an interesting side note, as a head without a body, I envy the dead. I'll get my kit! I videotape every customer that comes in here, so that I may blackmail them later. We don't have a brig.

Hey! I'm a porno-dealing monster, what do I care what you think?

I guess if you want children beaten, you have to do it yourself. Okay, it's 500 dollars, you have no choice of carrier, the battery can't hold the charge and the reception isn't very… Oh right. I forgot about the battle.

Should not see me.

Tabs in Cards

Qui corned beef

This is Tab 2. This is Tab 3.

HTML

        <h4>Simple Tabs</h4>
<tabset>
    <tab :header="'Tab 1'">
        This is Tab 1.
    </tab>
    <tab :header="'Tab 2'">
        This is Tab 2.
    </tab>
    <tab :header="'Tab 3'">
        This is Tab 3.
    </tab>
</tabset>

<h4>Kitchen Sink</h4>
<tabset>
    <tab :header="'Tab 1'">
        <p><b>Bacon ipsum dolor amet</b> pariatur andouille bacon, dolore filet mignon id in corned beef et. Venison kielbasa sausage spare ribs ball tip, eu landjaeger drumstick meatball. Leberkas dolore biltong, incididunt tenderloin nulla ground round aute salami exercitation ad consequat. Kevin landjaeger laborum sunt quis ball tip. Ipsum ut aliquip, esse sirloin incididunt boudin turducken picanha turkey.</p>
        <h4>Qui corned beef</h4>
        <p>Qui tri-tip tail, ullamco tongue picanha corned beef laboris salami minim chicken. Exercitation ullamco in pig. Turkey incididunt andouille corned beef ham ham hock. Shankle esse ball tip dolore. Cupim jerky officia do id sint.</p>
    </tab>
    <tab>
        <header>
            <i class="fa fa-ge"></i> <i>HTML</i> Tab <s>Header</s>
        </header>
        <p>I need your help, Luke. She needs your help. I'm getting too old for this sort of thing. But with the blast shield down, I can't even see! How am I supposed to fight? I suggest you try it again, Luke. This time, let go your conscious self and act on instinct.</p>
        <h4>I find your lack of faith disturbing.</h4>
        <p>What!? Look, I can take you as far as Anchorhead. You can get a transport there to Mos Eisley or wherever you're going. I have traced the Rebel spies to her. Now she is my only link to finding their secret base.</p>
    </tab>
    <tab :on-selected="showAlert">
        <header>
            <i class="fa fa-bell"></i>
            Alert!
        </header>
        <p>As an interesting side note, as a head without a body, I envy the dead. <strong> I'll get my kit!</strong> <em> I videotape every customer that comes in here, so that I may blackmail them later.</em> We don't have a brig.</p>
        <h4>Hey! I'm a porno-dealing monster, what do I care what you think?</h4>
        <p>I guess if you want children beaten, you have to do it yourself. Okay, it's 500 dollars, you have no choice of carrier, the battery can't hold the charge and the reception isn't very… Oh right. I forgot about the battle.</p>
    </tab>
    <tab :header="'Disabled'" :disabled="true">
        Should not see me.
    </tab>
</tabset>

<h4>Tabs in Cards</h4>
<div class="card">
    <tabset>
        <tab :header="'Tab 1'">
            <p><b>Bacon ipsum dolor amet</b> pariatur andouille bacon, dolore filet mignon id in corned beef et. Venison kielbasa sausage spare ribs ball tip, eu landjaeger drumstick meatball. Leberkas dolore biltong, incididunt tenderloin nulla ground round aute salami exercitation ad consequat. Kevin landjaeger laborum sunt quis ball tip. Ipsum ut aliquip, esse sirloin incididunt boudin turducken picanha turkey.</p>
            <h4>Qui corned beef</h4>
            <p>Qui tri-tip tail, ullamco tongue picanha corned beef laboris salami minim chicken. Exercitation ullamco in pig. Turkey incididunt andouille corned beef ham ham hock. Shankle esse ball tip dolore. Cupim jerky officia do id sint.</p>
        </tab>
        <tab :header="'Tab 2'">
            This is Tab 2.
        </tab>
        <tab :header="'Tab 3'">
            This is Tab 3.
        </tab>
    </tabset>
</div>

Javascript

        var app = new Vue({
    debug: true,
    el: '#example',
    components: {
        tabs: vueboot.tabs,
        tab: vueboot.tab
    },
    methods: {
        showAlert: function()
        {
            alert('Got Clicked!');
        }
    }
});

Multiple Orientations

The tabs component supports multiple orientations for it's tabs. These are set with the orientation property.

Example

Tabs Left

This is Tab 1. This is Tab 2. This is Tab 3.

Tabs right

This is Tab 1. This is Tab 2. This is Tab 3.

Tabs bottom

This is Tab 1. This is Tab 2. This is Tab 3.

HTML

        <h4>Tabs Left</h4>
<tabset :orientation="'left'">
    <tab :header="'Tab 1'">
        This is Tab 1.
    </tab>
    <tab :header="'Tab 2'">
        This is Tab 2.
    </tab>
    <tab :header="'Tab 3'">
        This is Tab 3.
    </tab>
</tabset>

<br>

<h4>Tabs right</h4>
<tabset :orientation="'right'">
    <tab :header="'Tab 1'">
        This is Tab 1.
    </tab>
    <tab :header="'Tab 2'">
        This is Tab 2.
    </tab>
    <tab :header="'Tab 3'">
        This is Tab 3.
    </tab>
</tabset>

<br>

<h4>Tabs bottom</h4>
<tabset :orientation="'bottom'">
    <tab :header="'Tab 1'">
        This is Tab 1.
    </tab>
    <tab :header="'Tab 2'">
        This is Tab 2.
    </tab>
    <tab :header="'Tab 3'">
        This is Tab 3.
    </tab>
</tabset>

Javascript

        var app = new Vue({
    debug: true,
    el: '#example',
    components: {
        tabs: vueboot.tabs,
        tab: vueboot.tab
    },
    methods: {
        showAlert: function()
        {
            alert('Got Clicked!');
        }
    }
});

Tabset Props

These properties are supported on the tabset component.

Prop	Type	Default	Description
orientation	`String`	`top`	Specifies the tab orientation. Values are: `'top'`, `'bottom'`, `'left'`, and `'right'`.

Tab Props

Alternative Syntax
Instead of specifying the header property, you can use a <header>...</header> block. This block must be the first element in the tab.

These properties are supported on the tab component.

Prop	Type	Default	Description
header	`String`		Sets the title of the tab. (Supports HTML)
on-selected	`Function`		A function that is called when a given tab is selected.

Component Methods

Reference Required
These functions are exposed to the parent, which means that you will want to use v-ref to expose the tabs instance to the parent controller.

The following functions may be called on the tabs instance:

activateTab(index) - activates the tab specified by index. Additionally supports the string 'first' and 'last'.

VueBoot

About the Project

Dependencies

Getting Started

Installation

Bower

NPM

Usage

CommonJS

AMD

ES6

Global

Alerts

Alert Types

No Animation

Static

Timeout

Component Props

Component Methods

Toast

Service Methods

Custom CSS

Modal

Component Props

Component Methods

Tabs

Simple Tabs

Kitchen Sink

Qui corned beef

I find your lack of faith disturbing.

Hey! I'm a porno-dealing monster, what do I care what you think?

Tabs in Cards

Qui corned beef

Multiple Orientations

Tabs Left

Tabs right

Tabs bottom

Tabset Props

Tab Props

Component Methods