Morioh
Login
James Ellis

James Ellis

3 years ago

Yet another toast notification plugin for Vue.js

Vue Toast Notification

Yet another Vue.js Toast notification plugin.

Demo or JSFiddle

Installation

# yarn
yarn add vue-toast-notification

# npm
npm install vue-toast-notification

Usage

import Vue from 'vue';
import VueToast from 'vue-toast-notification';
// Import one of available themes
import 'vue-toast-notification/dist/theme-default.css';
//import 'vue-toast-notification/dist/theme-sugar.css';

Vue.use(VueToast);
let instance = Vue.$toast.open('You did it!');
//Vue.$toast.open({/* options */});

// Force close specific toast
instance.close();
// Close all opened toast immediately
Vue.$toast.clear();

Available options

The API methods accepts these options:

Attribute Type Default Description
message String – Message text/html (required)
type String success One of success, info, warning, error, default
position String bottom-right One of top, bottom, top-right, bottom-right,top-left, bottom-left
duration Number 3000 Visibility duration in milliseconds
dismissible Boolean true Allow user close by clicking
onClick Function – Do something when user clicks
onClose Function – Do something after toast gets dismissed
queue Boolean false Wait for existing to close before showing new
pauseOnHover Boolean true Pause the timer when mouse on over a toast

API methods

Vue.$toast.open(options)

This is generic method, you can use this method to make any kind of toast.

// Can accept a message as string and apply rest of options from defaults
Vue.$toast.open('Howdy!');

// Can accept an Object of options
Vue.$toast.open({
    message: 'Something went wrong!',
    type: 'error',
    // all of other options may go here
});

Vue.$toast.success(message,?options)

There are some proxy methods to make it more readable.

Vue.$toast.success('Profile saved.', {
  // optional options Object
})

Vue.$toast.error(message,?options)

Vue.$toast.warning(message,?options)

Vue.$toast.info(message,?options)

Vue.$toast.default(message,?options)

Global options

You can set options for all the instances during plugin initialization

Vue.use(VueToast, {
  // One of the options
  position: 'top'
})

Further you can override option when creating new instances

Vue.$toast.success('Order placed.', {
  // override the global option
  position: 'bottom'
})

Install in non-module environments (without webpack)

<!-- Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
<!-- Lastly add this package -->
<script src="https://cdn.jsdelivr.net/npm/vue-toast-notification"></script>
<link href="https://cdn.jsdelivr.net/npm/vue-toast-notification/dist/theme-default.css" rel="stylesheet">
<!-- Init the plugin -->
<script>
Vue.use(VueToast);
</script>

Run examples on your localhost

  • Clone this repo
  • Make sure you have node-js >=10.13 and yarn >=1.x pre-installed
  • Install dependencies - yarn install
  • Run webpack dev server - yarn start
  • This should open the demo page at http://localhost:9000 in your default web browser

Acknowledgements

Download Details:

Author: ankurk91

Demo: https://ankurk91.github.io/vue-toast-notification/

Source Code: https://github.com/ankurk91/vue-toast-notification

#vuejs #vue #vue-js #javascript

Yet another toast notification plugin for Vue.js
2.95 GEEK