Elegant Toast Notification For Vue.js 3 – Toaster

Install & Download:

# Yarn
$ yarn add @meforma/vue-toaster
# NPM
$ npm i @meforma/vue-toaster --save

Description:

Just another toaster that helps developers create customizable toast-style notification messages in Vue.js 3 apps.

Features:

• Configurable duration
• 5 notification types: success, info, warning, error, default
• 6 positions: top, bottom, top-right, bottom-right,top-left, bottom-left
• Pause countdown on hover.

See Also:

• 7 Best Material Design Inspired Toast Components For Vue.js

How to use it:

1. Import and mount the component on your app.

import Toaster from '@meforma/vue-toaster';
createApp(App).use(Toaster).mount('#app')

2. Display toast notifications on the app.

this.$toast.show(`Default Toast Message`);
this.$toast.success(`Success Toast Message`);
this.$toast.error(`Error Toast Message`);
this.$toast.warning(`Warning Toast Message`);
this.$toast.info(`Info Toast Message`);

3. All possible component props with default values.

message: {
  type: String,
  required: true
},
type: {
  type: String,
  default: 'default'
},
position: {
  type: String,
  default: Positions.BOTTOM_RIGHT,
  validator(value) {
    return Object.values(Positions).includes(value)
  }
},
maxToasts: {
  type: [Number, Boolean],
  default: false
},
duration: {
  type: [Number, Boolean],
  default: 4000
},
dismissible: {
  type: Boolean,
  default: true
},
queue: {
  type: Boolean,
  default: false
},
pauseOnHover: {
  type: Boolean,
  default: true
},
useDefaultCss: {
  type: Boolean,
  default: true
},
onClose: {
  type: Function,
  default: () => {}
},
onClick: {
  type: Function,
  default: () => {}
}

4. Or pass the options as follows:

this.$toast.info(`Info Toast Message`,{
  position: "top-right",
  duration: false
  // ...
});

Preview:

Changelog:

v1.3.0 (10/07/2021)

• Toaster locally creation

v1.2.2 (02/08/2021)

• Fiz style imports

v1.2.1 (02/07/2021)

• Fix default css import

v1.2.0 (01/17/2020)

• Added maxToast prop

v1.1.1 (12/23/2020)

• Now, if setting dismissible is set to false, the onClick function still being called