Vue Bootstrap alerts

Vue Alerts - Bootstrap 4 & Material Design

Vue Bootstrap alerts are feedback messages which are displayed after specific actions preceded by the user. Length of the text is not limited.

With the right use of colors, they add some emotional weight to our information, ranging from a simple warning to critical system failure or from an operation success to a neutral information.


Basic example MDB Pro component

Info message Warning message Success message Error message

              <btn color="info" @click.native="info">info message</btn>
              <btn color="warning" @click.native="warning">warning message</btn>
              <btn color="success" @click.native="success">success message</btn>
              <btn color="danger" @click.native="error">error message</btn>
            

              import { Btn } from 'mdbvue';

              export default {
                components: {
                  Btn,
                },
                methods: {
                  info() {
                    this.$alert.info({message: 'Hi! I am info message.', position: 'top right', timeOut: 5000});
                  },
                  warning() {
                    this.$alert.warn({message: 'Hi! I am warning message.', position: 'top right', timeOut: 5000});
                  },
                  success() {
                    this.$alert.success({message: 'Hi! I am success message.', position:'top right', timeOut: 5000});
                  },
                  error() {
                    this.$alert.error({message: 'Hi! I am error message.', position: 'top right', timeOut: 5000});
                  }
                }
              };
            

Vue Alerts - API

In this section you will find information about how exactly to use Alerts.


Basic usage

Toastr-like Alert feature is rather special among the general components population, as it is rather a funtionality (a plugin, if you may), rather than the template markup.

It means that to display an alert you do not have to import it and position it yourself. Rather, it works as a plugin, meaning that all Vue instances have the ability to call an alert. Let's start off by adding this ability to their arsenal. To make alert available to the all (aka. to add it as a plugin), import it into your root Vue instance and make Vue .use() AlertPlug. If you are using vue-cli, the root Vue instance is accessible in the /src/main.js file. Make sure it looks something like this:

import Vue from 'vue';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbvue/build/css/mdb.css';
import App from './App.vue'
import AlertPlug from 'mdbvue';

Vue.use(AlertPlug);

VoilĂ ! Now, alert is available everywhere!


Calling an alert

Generally, an alert pops up once we call one of the $alert global property methods, namely


          this.$alert.success(); // or
          this.$alert.info(); // or
          this.$alert.wargning(); // or
          this.$alert.danger();
        
With no parameters, calling it will show a basic alert of designated color and with no content in its default position, being top center.


Customization

To give a notification some character, pass in a configuration object as the function parameter. Below are it's available properties:

Name Type Default Description
title String '' Title, if any
message String '' Text within the alert's "paragraph"
closeButton Boolean true Should the close button ("x") be there?
progressBar Boolean false Sets whether a progress bar should mark alert's timeout
position String top right Available values: 'top right', 'bottom right', 'bottom left', 'top left', 'top center', 'bottom center', 'top full width', 'bottom full width'
showMethod String fadeIn Animations class name for shown, default as fadeIn
hideMethod String fadeOut Animations class name for hide, default as fadeOut
showDuration Number 1000 Duration of show animation in ms
hideDuration Number 1000 Duration of hide animation in ms
delay Number 0 (no dalay) Helps to set up a delay on when the alert should appear in ms
timeOut Number 1500 Sets duration of time the alert is out there in ms
color String successColor Overwrite the type default color of an alert

A full exemplification of an this.$alert with a configuration object inside some component's method:


      this.$alert.warn({
                        message: 'This is a programmatic warning from within some component',
                        position: 'top right',
                        timeOut: 5000,
                        closeButton: false,
                        progressBar: true,
                        delay: 2000
                      });
    

Closing alerts

Alerts disappear after a time-out, which covers most use cases. To dismiss an alert, an user may click the close button, which is provided by default. Lastly, application's logic can clear all the alerts programmatically, calling

this.$alert.removeAll()