Vue Toastify

I wanted a notification plugin which I can use by passing props from the server and it can also take statuses at run time. With this component it's has just become super easy. It's easily extendable and customizable and it has no dependencies.

Check it out at Netlify

To use:

npm i vue-toastify

or with CDNs:

• jsDeliver
• unpkg

In your main js file:

Vue.use(VueToastify);

Then anywhere just call:

this.$vToastify.success("easy-peasy");

Settings

You may pass a settings object to the use statement like so:

Vue.use(VueToastify, {
    my: "settings"
});

or change any of the settings during run-time with the following

this.vToastify.setSettings(settingsObject);

This will return the current settings after the updates.

Available settings

Status

You can pass to the functions either a string for the body of the status and optionally a title for the second argument like so:

this.$vToastify.error("body", "title"); 

Or pass an object to the method:

this.$vToastify.info(stausObject);

The following properties can be set on the object:

You may additionally overwrite the following plugin settings on a notification by notification basis by adding them on the status object.

You may alternatively pass in an http error response like:

fetch().then().catch(error => this.$vToastify.error(error));

Only this.$vToastify.error() is capable to handle the error response.

Every call notification method returns a unique id associated to your notification object. Additional methods

The notification supports multiple modes

You can either pass the mode property on the status object which is one of the following strings: "prompt", "loader" or by calling:

this.$vToastify.loader("Please Wait...")

this.$vToastify.prompt({
    body: "Are there hot singles in your area?"
    answers: { Yes: true, No: false }
})

The prompt does not return an id instead it returns a Promise so may use it as:

...}).then(value => {
    if (value) {
        this.$vToastify.prompt({
            body: "Is it a scam?"
            answers: { Yes: true, No: false }
        })
        .then(value => console.log(value ? "Yay!" : "Nay"))
    }
})

The answers object consist of a key value pairs in the object where the key is displayed to the user and the value returned by the promise. If not set it defaults to: { Yes: true, No: false }.

Additional methods available:

A loader cannot be dismissed, you'll have to stop the loader yourself like so:

this.$vToastify.stopLoader(id)

This will stops the loader with the given id or loaders if array of ids given. If no id provided, all loaders will be closed.

For returning a notification object use:

this.$vToastify.getToast(id)

This if found returns the notification object otherwise all of the notification objects in an array.

For updating the notification object during run-time use:

this.$vToastify.changeToast(id, statusObject)

This will merge the object you pass in and the existing notification. It will return true if successfully updated and false if the notification isn't found.

For removing a notification use:

this.$vToastify.removeToast(id)

This will remove the notification if the id is given otherwise it will remove all of the notifications. The function returns the ids of the currently visible notifications.

Extending the functionality

You can add your own methods to the plugin like so:

Vue.use(VueToastify, {
  customNotifications: {
    clientError: {
      body: "You did it!",
      defaultTitle: false,
      icon: '<svg width="50" height="50">\n' +
              '<rect width="50" height="50" style="fill:rgb(0,0,255);" />\n' +
            '</svg> ',
      canTimeout: false
    },
    moreOfTheAbove: { ...
  }
});

If the above is defined in the customNotifications object, you can use this method like so:

this.$vToastify.clientError("this will overwrite the body");

or as usual pass in an object with the above outlined props which will overwrite the props you defined.

Extending the styles

To add custom styles you all you have to do is follow the example in ./src/assets/toast.scss and add your custom styles. Once added rename .vt-theme-dark to .vt-theme-my-custom-name and in the settings or the status object pass the theme as theme: "my-custom-name". Include this stylesheet in the project and you're good to go.

To pass a notification from the server, assign your notification to window.notification before importing the other scripts. On mount this will gets displayed to the user. If this notification object has a property called delay, the notification display will be delayed by the given number of milliseconds. Todos

• Option for showing one type at a time.

• Increase test coverage

• add SPA support for the url attribute

• Fix backdrop leave animation

• Expose the following events to the user: vtFinished, vtDismissed, vtStarted, vtPaused

• Add max number of notifications on display setting

• Add touch swipe gestures

• Create php library for fluently setting the initial notification

• Move animation to purely css with animation-play-state

• Re-write in TypeScript and use the vue core's validateProps(), rewrite for vue 3

• Get url props on the answers object for redirecting on click of the button

Alternatives

Vue Snotify