Create Beautiful Toast Message Using Vue And Bootstrap 4


A Vue.js component which uses Bootstrap 4 toasts component to create beautiful, configurable toast-style notification popups on the app.

More features:

  • RTL support.
  • Progress bar to show the remaining time.
  • Custom timeout.
  • Closeable.
  • 4 notification types: success, info, warning, error.

How to use it:

Install, import, and register the component.

$ npm install vue-bootstrap-toasts --save
import VueBootstrapToasts from "vue-bootstrap-toasts";

Create the Toast component in the app.


Config the component with the following props.


Show the toast messages.

this.$toast.success('your message');
this.$toast.error('your message');
this.$toast.warning('your message');
this.$'your message');

Download Details:

Author: rakk7

Live Demo:

Download Link:

Official Website:

Install & Download:

$ npm install vue-bootstrap-toasts --save

You Might Be Interested In:


Add Comment