Vue Toasts

Vue Bootstrap 5 Toast component

Bootstrap Toast component is a non-disruptive message in the corner of the interface. It provides quick "at-a-glance" feedback on the outcome of an action.

Push notifications to your visitors with a 'toast', a lightweight and easily customizable alert message. Toasts are designed to mimic the push notifications that have been popularized by mobile and desktop operating systems.

Note: Read the API tab to find all available options and advanced customization


Basic example

Click the buttons to launch the toasts.


Static example


Colors


Placement

You can set position of every notification using position property.

Select horizontal / vertical alignment

Current position: top-right

Offset

You can also change offset of every notification using offset property.


Container

You can display notification anywhere. Just put your toast in your target element and fill container property with id or class of parent.


Stacking

You can turn on/off stacking your notifications using stacking property.


Stacking (container)

You can also stack alerts inside the container

Vue Toasts - API


Import


        <script>
          import {
            MDBToast
          } from 'mdb-vue-ui-kit';
        </script>
      

Properties

Name Type Default Description
tag String 'div' Defines tag of the MDBToast element
position String 'top-right' Sets a position for the toast. Any combination of 'vertical-horizontal' position: 'top|bottom-left|center|right'
delay Number 5000 Sets the length of animation delay
autohide Boolean true Alerts will hide automatically or not
width String 'unset' Sets width of toast
stacking Boolean true Enables stacking toasts
offset String '10 Changes toast offset
container String '' Defines container selector
appendToBody Boolean false Appends element to the end of the body
color String null Allows to set the color of an toast - primary | secondary | secondary | danger | warning | info | light | dark
text String '' Set to 'white' for better text contrast on dark toast background
icon String '' Adds icon with given class to a toast header
animation Boolean true Allows to turn on or off the showing and hiding toast animation
static Boolean false Makes toast static (open by default)
id String 'MDBToast-generated id' Allows to add custom id to toast element
v-model String '' Returns current picked time

Methods

Name Description Example
show Manually shows an toast toastRef.show()
hide Manually hides an toast toastRef.hide()

            <MDBTimepicker v-model="toast1" ref="toastRef" />
            <MDBBtn @click.stop="$refs.toastRef.show()" color="primary">Show</MDBBtn>
          

Events

Name Description
show This event fires immediately when the show method is called or `v-model` is set to true
shown This event fires immediately when the Alert is shown
hide This event fires immediately when the hide method is called or `v-model` is set to false
hidden This event fires immediately when the Alert is hidden

            <MDBTimepicker v-model="picker1" @close="doSomething" />