Do you know the latest update of 2022? Our roadmap is alive for future updates.

Notification

Push notifications to your visitors with a <b-toast> and <b-toaster>, lightweight components which are easily customizable for generating alert messages.

Basic

To encourage extensible and predictable toasts, we recommend providing a header (title) and body. Toast headers use the style 'display: flex', allowing easy alignment of content thanks to Bootstrap's margin and flexbox utility classes. Toasts are slightly translucent, too, so they blend over whatever they might appear over. For browsers that support the backdrop-filter CSS property, they also attempt to blur the elements under the toast.

Hello, world! This is a toast message.

Toasts on demand

Generate a dynamic toast from anywhere in your app via the this.$bvToast Vue component instance injection, without the need to place a <b-toast> component in your app.

Use the this.$bvToast.toast() method to generate on demand toasts. The method accepts two arguments:

message: the content of the toast body (either a string, or an array of VNodes). Required. Toasts with an empty message will not be shown. See the Advanced usage section for an example of passing an array of VNodes as the message.
options: an optional options object for providing a title and/or additional configuration options. The title option can be either a string or an array of VNodes

The options argument accepts most of the props that the <b-toast> component accepts (with the exception of static, and visible) in camelCase name format instead of kebab-case.

Variants

BootstrapVue toasts provide custom CSS to define color variants. Variants follow the standard Bootstrap v4 variant names. If you have custom SCSS defined Bootstrap color theme variants, the toast custom SCSS will automatically create toast variants for you (refer to the Theming reference section).

Toaster target

BootstrapVue comes with the following "built-in" toaster names (and associated styles defined in SCSS):

b-toaster-top-right
b-toaster-top-left
b-toaster-top-center
b-toaster-top-full
b-toaster-bottom-right
b-toaster-bottom-left
b-toaster-bottom-center
b-toaster-bottom-full

Links

Optionally convert the toast body to a link (<a>) or <router-link> (or <nuxt-link> ) via the href and to props respectively. When set, the entire toast body becomes a link.

Advanced usage

When using the this.$bvToast.toast(...) method for generating toasts, you may want the toast content to be more than just a string message. As mentioned in the Toasts on demand section above, you can pass arrays of VNodes as the message and title for more complex content.

Remember to keep toast content simple and to the point. Avoid placing interactive components or elements inside toasts, as this can cause issues for users of assistive technologies. Refer to the Accessibility section below.

Below is an example of using Vue's this.$createElement() method for generating more complex toast content:

My Cart

Smart Watches 3