Vue Toast Notification (Degica version)

This is a modification of ankurk91/vue-toast-notification. There is one main difference: this version contains an explicit "X" button to close the toasts.

Yet another Vue.js Toast notification plugin.

Demo or JSFiddle

Version matrix

Vue.js version	Package version	Branch
2.x	1.x	1.x
3.x	2.x	`master`

Installation

# yarn
yarn add vue-toast-notification-x@^2.0

# npm
npm install vue-toast-notification-x@^2.0

Usage

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

const app = createApp({});
app.use(VueToast);
app.mount('#app');

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

// Force dismiss specific toast
instance.dismiss();
// Dismiss all opened toast immediately
app.$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`	Add a "close" button and allow users to dismiss by clicking it
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

`app.$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
app.$toast.open('Howdy!');

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

`app.$toast.success(message,?options)`

There are some proxy methods to make it more readable.

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

`app.$toast.error(message,?options)`

`app.$toast.warning(message,?options)`

`app.$toast.info(message,?options)`

`app.$toast.default(message,?options)`

Global options

You can set options for all the instances during plugin initialization

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

Further you can override option when creating new instances

app.$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@3"></script>
<!-- Lastly add this package -->
<script src="https://cdn.jsdelivr.net/npm/vue-toast-notification@2"></script>
<link href="https://cdn.jsdelivr.net/npm/vue-toast-notification@2/dist/theme-sugar.css" rel="stylesheet">
<!-- Init the plugin -->
<script>
    const app = Vue.createApp({});
    app.use(VueToast);
    app.mount('#app');
</script>

Run examples on your localhost

Clone this repo
Make sure you have node-js >=14.15 and yarn >=1.22 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

Buefy Toast component

License

MIT License

degica / vue-toast-notification Goto Github PK

vue-toast-notification's Introduction

Vue Toast Notification (Degica version)

Demo or JSFiddle

Version matrix

Installation

Usage

Available options

API methods

app.$toast.open(options)

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

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

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

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

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

Global options

Install in non-module environments (without webpack)

Run examples on your localhost

Acknowledgements

License

vue-toast-notification's People

Contributors

Watchers

Recommend Projects

Recommend Topics