Vue Flash

Setup

    /**
     * Vue is a modern JavaScript library for building interactive web interfaces
     * using reactive data binding and reusable components. Vue's API is clean
     * and simple, leaving you to focus on building your next great project.
     */
    window.Vue = require('vue/dist/vue.js');
    
    /**
     * Our Vuejs event handler which we will be using for flash messaging
     * @type {Vue}
     */
    window.events = new Vue();
    
    /**
     * Our Flash function which will be used to add new flash events to our event handler
     * 
     * @param  String message Our alert message
     * @param  String type    The type of alert we want to show
     */
    window.flash = function(message, type) {
        window.events.$emit('flash', message, type);
    };
    
    Vue.component('flash', require('vue-flash'));
    
    var app = new Vue({
        el: '#app',
    }).$mount();

Usage

flash('Hello World', 'success');
flash('Hello World', 'error');
flash('Hello World', 'warning');
flash('Hello World', 'info');

Customizing Alert Classes

{
    base:    'alert',
    success: 'alert-success',
    error:   'alert-danger',
    warning: 'alert-warning',
    info:    'alert-info'
}

Supporting Icon Libraries

{
    base:    'fa',
    success: 'fa-check-circle',
    error:   'fa-exclamation-circle',
    warning: 'fa-exclamation-circle',
    info:    'fa-info-circle'
}

Props

| Name | Type | Default | Restrictions | |------------|---------|----------------|-------------------------------| | timeout | Number | 3000 | | | transition | String | slide-fade | fade, slide-fade, bounce | | types | Object | See above | | | icons | Object | See above | |

License