Vue Toast Notification

Pelican Toast Notification

https://pelican.ots.la.gov/

Installation

npm i @la-ots/pelican-vue-toast-notification

Usage

import Vue from 'vue';
import VueToast from '@la-ots/pelican-vue-toast-notification/src/index.js';
// Import one of the available themes
import '@la-ots/pelican-vue-toast-notification/src/themes/default/index.scss';
//or theme with icons
//import '@la-ots/pelican-vue-toast-notification/src/themes/sugar/index.scss';

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

// Force dismiss specific toast
instance.dismiss();
// Dismiss 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, set to 0 to keep toast visible | | dismissible | Boolean | true | Allow user dismiss by clicking | | onClick | Function | -- | Do something when user clicks | | onDismiss | Function | -- | Do something after toast gets dismissed | | queue | Boolean | false | Wait for existing to dismiss 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'
})

## Run examples on your localhost

* Clone this repo
* Make sure you have node-js `>=16.9` and [pnpm](https://pnpm.io/) `>=7.2` pre-installed
* Install dependencies - `pnpm install`
* Run webpack dev server - `npm start`
* This should open the demo page in your default web browser

## Acknowledgements

* Buefy [Toast](https://buefy.org/documentation/toast) component
* ankurk91 [https://github.com/ankurk91/vue-toast-notification]

## License

[MIT](LICENSE.txt) License