vue-bootalert

VueJS component for generating Bootstrap alerts

Installation

# install with npm
npm install vue-bootalert --save

var VueBootalert = require('vue-bootalert')
Vue.use(VueBootalert)

Usage

Add as a component:

components: {
    VueBootalert
}

You can then create an alert with:

<bootalert message="Your message here"></bootalert>

You can configure the alert with the following parameters:

Name	Description	Required	Allowed Values	Type	Default Value
type	The alert style, taken from Bootstrap alert classes	N	info, warning, success, danger	String	info
message	The message to display in the alert	Y	Text/HTML	String	nil
shouldDisappear	The alert should disappear automatically after a period of time	N	true, false	Boolean	true
displayTime	The time in miliseconds the message should stay on screen for (if shouldDisappear is set to true)	N		Integer	5000
alertDismissable	Allow the user to close the alert by clicking on X	N	Dismissable if present		false

Examples

Basic Usage

<bootalert type="danger" message="test message 1 (dismisable)" shouldDisappear="false" alertDismissable></bootalert>
<bootalert type="success" message="test message 2"></bootalert>

Dynamically creating alerts

<bootalert v-for="(alert,index) in alerts" :key="index" v-bind:type="alert.type" v-bind:message="alert.message" v-bind:shouldDisappear="alert.shouldDisappear" alertDismissable></bootalert>

export default {
    data: function() {
      return {
        alerts: []
      }
    },
    methods: {
      createErrorAlert: function(message) {
        this.alerts.push({
          type: 'danger',
          message: message,
          shouldDisappear: false
        });
      }
    }
}

// Then call createErrorAlert when you want a new message
createErrorAlert("Your message here")