Create Beautiful Toast Message Using Vue And Bootstrap 4

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');

Download Details:

Author: rakk7

Live Demo: https://rakk7.github.io/vue-bootstrap-toasts/demo/

Download Link: https://github.com/rakk7/vue-bootstrap-toasts/archive/master.zip

Official Website: https://github.com/rakk7/vue-bootstrap-toasts

Last Update: August 27, 2019

Install:

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

You Might Be Interested In:

Tags:

Add Comment