Elegant Toast Notification For Vue.js 3 – Toaster

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:

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:

Elegant Toast Notification For Vue.js 3 - Toaster

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

Download Details:

Author: MeForma

Live Demo: https://meforma.github.io/vue-toaster/

Download Link: https://github.com/MeForma/vue-toaster/archive/master.zip

Official Website: https://github.com/MeForma/vue-toaster

Install & Download:

# Yarn
$ yarn add @meforma/vue-toaster

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

You Might Be Interested In:

Tags:

Add Comment