Vue Bootstrap Notifications

Vue Notifications - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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.

Material example MDB Pro component

Info message Warning message Success message Error message 
<template>
  <div>
    <mdbBtn color="info" @click.native="info">info message</mdbBtn>
    <mdbBtn color="warning" @click.native="warning">warning message</mdbBtn>
    <mdbBtn color="success" @click.native="success">success message</mdbBtn>
    <mdbBtn color="danger" @click.native="error">error message</mdbBtn>
  </div>
</template>
<script>
  import {
    mdbBtn
  } from 'mdbvue';
  export default {
    components: {
      mdbBtn
    },
    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
        });
      }
    }
  }
</script>

Bootstrap example 

<template>
  <mdb-toast-notification :show="show"></mdb-toast-notification>
</template>
<script>
  import {
    mdbToastNotification
  } from "mdbvue";
  export default {
    name: "NotificationsFreePage",
    components: {
      mdbToastNotification,
    },
    data() {
      return {
        show: true
      }
    }
  };
</script>

Stacking

When you have multiple toasts, we default to vertiaclly stacking them in a readable manner.

<template>
  <section>
    <mdb-toast-notification :show="show"></mdb-toast-notification>
    <mdb-toast-notification :show="show"></mdb-toast-notification>
    <mdb-toast-notification :show="show"></mdb-toast-notification>
  </section>
</template>
<script>
  import {
    mdbToastNotification
  } from "mdbvue";
  export default {
    name: "NotificationsFreePage",
    components: {
      mdbToastNotification,
    },
    data() {
      return {
        show: true
      }
    }
  };
</script>

Placement

Use the css position property on wrapping components to controll placement of your notification. 

<template>
  <section class="grey">
    <div class="container">
      <div class="placement">
        <mdb-toast-notification
          v-for="message in messages"
          :key="message.id"
          :title="message.title"
          :message="message.message"
          :icon="message.icon"
          :iconColor="message.color"
          :show="show"
        />
      </div>
    </div>
  </section>
</template>
<script>
  import {
    mdbToastNotification
  } from "mdbvue";
  export default {
    name: "NotificationsPage",
    components: {
      mdbToastNotification
    },
    data() {
      return {
        show: true,
        messages: [{
            id: 1,
            title: "alert",
            message: "important meeting in 15 minutes!",
            icon: 'exclamation',
            color: 'danger'
          },
          {
            id: 2,
            title: "new message",
            message: "Can you buy carrots on your way home?",
            icon: "envelope"
          },
          {
            id: 3,
            title: "alarm",
            message: "it's 7 o'clock!",
            icon: 'bell',
            color: 'elegant'
          },
        ]
      };
    }
  };
</script>
<style>
  .container {
    position: relative;
    min-height: 340px;
  }

  .placement {
    position: absolute;
    right: 0;
  }
</style>

Custom icons

Use icon property to set custom icon from the icons list. 

<template>
  <mdb-toast-notification title="Title" message="Message with the cusom icon" icon="robot" iconColor="default"
    :show="show" />
</template>
<script>
  import {
    mdbToastNotification
  } from "mdbvue";
  export default {
    name: "NotificationsPage",
    components: {
      mdbToastNotification
    },
    data() {
      return {
        show: true,
      };
    }
  };
</script>

Time display

To hide time count set the time property to false. 

<template>
  <mdb-toast-notification :time="false" :show="show"></mdb-toast-notification>
</template>
<script>
  import {
    mdbToastNotification
  } from "mdbvue";
  export default {
    name: "NotificationsPage",
    components: {
      mdbToastNotification
    },
    data() {
      return {
        show: true
      };
    }
  };
</script>

You can overwrite the default starting point for time count by passing Date Object to the received property. 

<template>
  <mdb-toast-notification :show="show" :received="date"></mdb-toast-notification>
</template>
<script>
  import {
    mdbToastNotification
  } from "mdbvue";
  export default {
    name: "NotificationsPage",
    components: {
      mdbToastNotification
    },
    data() {
      return {
        show: true,
        date: new Date('2019-04-16 16:00')
      };
    }
  };
</script>

Vue Material 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: 

<script>
  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);
</script>

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 

<script>
  this.$notify.success(); // or
  this.$notify.info(); // or
  this.$notify.warn(); // or
  this.$notify.error();
</script>

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:

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

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()

Vue Bootstrap Notifications - API

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

Basic example 

<template>
  <mdb-toast-notification :show="show"></mdb-toast-notification>
</template>
<script>
  import {
    mdbToastNotification
  } from "mdbvue";

  export default {
    name: "NotificationsFreePage",
    components: {
      mdbToastNotification,
    },
    data() {
      return {
        show: true
      }
    }
  };
</script>

Properties

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
message String '' Text within the notification's "paragraph"
icon String 'square' Sets a custom icon.
iconSize String 'lg' Changes a size of an icon.
iconColor String 'primary' Changes a color of an icon.
show Boolean false Controls displaying of a notification.
time Boolean true Controls displaying of a time counter.
received Date Sets a starting points for a time counter.