Rate these docs

Vue Bootstrap Notifications

Vue Notifications - Bootstrap 4 & Material Design

Vue Bootstrap notifications 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.$notify.info({message: 'Hi! I am info message.', position: 'top right', timeOut: 5000});
                },
                warning() {
                  this.$notify.warn({message: 'Hi! I am warning message.', position: 'top right', timeOut: 5000});
                },
                success() {
                  this.$notify.success({message: 'Hi! I am success message.', position:'top right', timeOut: 5000});
                },
                error() {
                  this.$notify.error({message: 'Hi! I am error message.', position: 'top right', timeOut: 5000});
                }
              }
            };
          

Vue Bootstrap Notifications - API

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


Basic usage

Toastr-like Notify 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 a notification you do not have to import and position it yourself. Rather, it works as a plugin, meaning that all Vue instances have the ability to call a notification. Let's start off by adding this ability to their arsenal. To make notification available to the all (aka. to add it as a plugin), import it into your root Vue instance and make Vue .use() Notify. 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 Notify from 'mdbvue';

Vue.use(Notify);

VoilĂ ! Now, notifications are available everywhere!


Calling a notification

Generally, a notification pops up once we call one of the $notify global property methods, namely


          this.$notify.success(); // or
          this.$notify.info(); // or
          this.$notify.wargning(); // or
          this.$notify.danger();
        
With no parameters, calling it will show a basic notification 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 notification's "paragraph"
closeButton Boolean true Should the close button ("x") be there?
progressBar Boolean false Sets whether a progress bar should mark notification'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 notification should appear in ms
timeOut Number 1500 Sets duration of time the notification is out there in ms
color String successColor Overwrite the default color of a notification

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


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

Closing notifications

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

this.$notify.removeAll()