Create Beautiful Toast Message Using Vue And Bootstrap 4

Install & Download:

# NPM
$ npm install vue-bootstrap-toasts --save

Description:

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
$ npm install vue-bootstrap-toasts --save

import VueBootstrapToasts from "vue-bootstrap-toasts";
Vue.use(VueBootstrapToasts);

Create the Toast component in the app.

<Toasts></Toasts>

Config the component with the following props.

<Toasts
  :show-progress="true"
  :rtl="false"
  :max-messages="5"
  :time-out="3000"
  :closeable="true"
></Toasts>

Show the toast messages.

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

Preview: