Introduction

Vue Toasted is One of the Best Toast plugin available for VueJS. it is used by VueJS, Laravel, NuxtJS and trusted by many more organizations it is responsive, touch compatible, easy to use, attractive and feature rich with icons, actions etc...

Interactive Demo

Checkout the Interactive Demo here.

Menu

• Installation
  • Npm
  • Yarn
  • Direct Usage
  • Nuxt
• Usage
  • Basic Usage
  • Actions
  • Icons
  • Standalone Usage
• Api
  • Options
  • Methods
  • Toast Object
  • Custom Toast Registration
  • Vue Router
• Browser Support
• Mobile Responsiveness
• Credits

Installation

Install using npm

1# install it via npm
2npm install @gitlab/vue-toasted --save

Install using yarn

1# install it via yarn
2yarn add @gitlab/vue-toasted

---

Nuxt ???? Officially uses vue-toasted for their toast module.

installation guide ???? @nuxtjs/toast

Usage

It is simple. couple of lines all what you need.

1// register the plugin on vue
2import Toasted from '@gitlab/vue-toasted';
3
4Vue.use(Toasted)
5
6// you can also pass options, check options reference below
7Vue.use(Toasted, Options)
8

1// you can call like this in your component
2this.$toasted.show('hello billo')
3
4// and also
5Vue.toasted.show('hola billo');

All Good Now you have this cool toast in your project..

Icons :fire:

Material Icons, Fontawesome and Material Design Icons are supported. you will have to import the icon packs into your project. example using icons

1{
2    // pass the icon name as string
3    icon : 'check'
4    
5    // or you can pass an object
6    icon : {
7        name : 'watch',
8        after : true // this will append the icon to the end of content
9    }
10}

Actions :fire:

You can have single or multiple actions in the toast. take a look at the example below

Check below Vue Router section for router integration

Parameters	Type's	Default	Description
text*	String	-	name of action
href	String	null	url of action
icon	String	null	name of material for action
target	String	null	target of url
class	String/Array	null	custom css class for the action
push	Object	null	Vue Router push parameters
onClick	Function(e,toastObject)	null	onClick Function of action

Examples

1{
2    // you can pass a single action as below
3    action : {
4        text : 'Cancel',
5        onClick : (e, toastObject) => {
6            toastObject.goAway(0);
7        }
8    },
9
10    // you can pass a multiple actions as an array of actions
11    action : [
12        {
13            text : 'Cancel',
14            onClick : (e, toastObject) => {
15                toastObject.goAway(0);
16            }
17        },
18        {
19            text : 'Undo',
20            // router navigation
21            push : { 
22            	name : 'somewhere',
23            	// this will prevent toast from closing
24            	dontClose : true
25             }
26        }
27    ]
28}

API

Options

below are the options you can pass to create a toast

Option	Type's	Default	Description
position	String	'top-right'	Position of the toast container ['top-right', 'top-center', 'top-left', 'bottom-right', 'bottom-center', 'bottom-left']
duration	Number	null	Display time of the toast in millisecond
keepOnHover	Boolean	false	When mouse is over a toast's element, the corresponding duration timer is paused until the cursor leaves the element
action	Object, Array	null	Add single or multiple actions to toast explained here
fullWidth	Boolean	false	Enable Full Width
fitToScreen	Boolean	false	Fits to Screen on Full Width
className	String, Array	null	Custom css class name of the toast
containerClass	String, Array	null	Custom css classes for toast container
iconPack	String	'material'	Icon pack type to be used ['material', 'fontawesome', 'mdi', 'custom-class', 'callback']
Icon	String, Object	null	Material icon name as string. explained here
type	String	'default'	Type of the Toast ['success', 'info', 'error']
theme	String	'toasted-primary'	Theme of the toast you prefer ['toasted-primary', 'outline', 'bubble']
onComplete	Function	null	Trigger when toast is completed
closeOnSwipe	Boolean	true	Closes the toast when the user swipes it
singleton	Boolean	false	Only allows one toast at a time.

Methods

Methods available on Toasted...

1// you can pass string or html to message
2Vue.toasted.show( 'my message', { /* some option */ })

Method	Parameter's	Description
show	message, options	show a toast with default style
success	message, options	show a toast with success style
info	message, options	show a toast with info style
error	message, options	show a toast with error style
register	name, message, options	register your own toast with options explained here
clear	-	clear all toasts

Toast Object

Each Toast Returns a Toast Object where you can manipulate the toast.

1
2// html element of the toast
3el : HtmlElement
4
5// change text or html of the toast
6text : Function(text)
7
8// fadeAway the toast. default delay will be 800ms
9goAway : Function(delay = 800)
10

using the toast object

1let myToast = this.$toasted.show("Holla !!");
2myToast.text("Changing the text !!!").goAway(1500);

Vue Router

Adding vue-router to vue-toasted where you can use it on toast actions.

1
2// your app router instance
3var router = new VueRouter({
4	mode: 'history',
5	routes: [{
6		path: '/foo',
7		name : 'foo-name'
8	}],
9	linkActiveClass: "active"
10});
11
12// pass it to vue toasted as below..
13Vue.use(Toasted, {
14	router
15});

Custom Toast Registration

You can register your own toasts like below and it will be available all over the application.

Toasted.register methods api details...

Parameters	Type's	Default	Description
name*	String	-	name of your toast
message*	String/Function(payload)	-	Toast Body Content
options	String/Object	{}	Toast Options as Object or either of these strings ['success', 'info', 'error']

Take a look at the below examples

Simple Example

1import Toasted from '@gitlab/vue-toasted';
2Vue.use(Toasted);
3
4// Lets Register a Global Error Notification Toast.
5Vue.toasted.register('my_app_error', 'Oops.. Something Went Wrong..', {
6    type : 'error',
7    icon : 'error_outline'
8})

After Registering your toast you can easily access it in the vue component like below

1// this will show a toast with message 'Oops.. Something Went Wrong..'
2// all the custom toasts will be available under `toasted.global`
3this.$toasted.global.my_app_error();

Advanced Example

You can also pass message as a function. which will give you more power. Lets think you need to pass a custom message to the error notification we built above.

1this.$toasted.global.my_app_error({
2    message : 'Not Authorized to Access'
3});

you can register a toast with payload like below on the example.

1import Toasted from '@gitlab/vue-toasted';
2Vue.use(Toasted);
3
4// options to the toast
5let options = {
6    type : 'error',
7    icon : 'error_outline'
8};
9
10// register the toast with the custom message
11Vue.toasted.register('my_app_error',
12    (payload) => {
13		
14        // if there is no message passed show default message
15        if(! payload.message) {
16    	    return "Oops.. Something Went Wrong.."
17        }
18		
19        // if there is a message show it with the message
20        return "Oops.. " + payload.message;
21    },
22    options
23)

Browsers support

IE / Edge	Firefox	Chrome	Safari	Opera	iOS Safari	Chrome for Android
IE10, IE11, Edge	last 7 versions	last 7 versions	last 7 versions	last 7 versions	last 3 versions	last 3 versions

Please Report If You have Found any Issues.

Mobile Responsiveness

On Mobile Toasts will be on full width. according to the position the toast will either be on top or bottom.

Credits

• Inspired and developed from materialize-css toast.
• Uses hammerjs for touch events
• Uses lightweight and fast animejs for animations.
• Whoever contributes to this project :wink:

Enjoy Toasting !!