Vue-toast Cannot Read Property 'unshift' of Undefined

March 08, 2022 Post a Comment

Introduction

Vue Toasted is One of the Best Toast plugin available for VueJS. information technology is used by VueJS, Laravel, NuxtJS and trusted past many more than organizations it is responsive, bear on uniform, easy to utilise, attractive and feature rich with icons, actions etc...

Interactive Demo

Checkout the Interactive Demo hither.

Bill of fare

Installation
- Npm
- Yarn
- Directly 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

npm install vue-toasted --save

Install using yarn

Directly usage with html

< script src = " https://unpkg.com/vue-toasted " > < / script >

< script >

Vue . use ( Toasted )

</ script >

Nuxt 💓 Officially uses `vue-toasted` for their toast module.

installation guide 👉 @nuxtjs/toast

Usage

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

import Toasted from ' vue-toasted ' ;

Vue . use ( Toasted )

Vue . use ( Toasted , Options )

this . $toasted . testify ( ' hello billo ' )

Vue . toasted . show ( ' hola billo ' ) ;

All Skillful At present you accept this cool toast in your project..

Icons 🔥

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

{

icon : ' bank check '

icon : {

name : ' watch ' ,

after : true

}

Actions 🔥

You can have unmarried or multiple deportment in the toast. take a look at the example below

Check beneath Vue Router section for router integration

Parameters	Type'south	Default	Description
text*	String	-	name of action
href	String	`naught`	url of activeness
icon	String	`null`	name of cloth for action
target	String	`nix`	target of url
class	String/Assortment	`cypher`	custom css class for the action
push button	Object	`null`	Vue Router push parameters
onClick	Function(east,toastObject)	`null`	onClick Function of action

Examples

{

action : {

text : ' Cancel ' ,

onClick : ( e , toastObject ) => {

toastObject . goAway ( 0 ) ;

}

} ,

action : [

{

text : ' Cancel ' ,

onClick : ( e , toastObject ) => {

toastObject . goAway ( 0 ) ;

}

} ,

{

text : ' Undo ' ,

push : {

name : ' somewhere ' ,

dontClose : truthful

}

]

}

API

Options

beneath are the options you tin pass to create a toast

Selection	Blazon's	Default	Clarification
position	Cord	'top-right'	Position of the toast container ['pinnacle-right', 'pinnacle-center', 'acme-left', 'lesser-correct', 'lesser-centre', 'bottom-left']
duration	Number	cypher	Brandish time of the toast in millisecond
keepOnHover	Boolean	false	When mouse is over a toast's chemical element, the corresponding `duration` timer is paused until the cursor leaves the element
activeness	Object, Array	zilch	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	Cord, Array	null	Custom css class proper noun of the toast
containerClass	String, Array	cipher	Custom css classes for toast container
iconPack	String	'fabric'	Icon pack type to be used ['fabric', 'fontawesome', 'mdi', 'custom-class', 'callback']
Icon	String, Object	cypher	Material icon name as string. explained here
blazon	String	'default'	Type of the Toast ['success', 'info', 'error']
theme	String	'toasted-main'	Theme of the toast you prefer ['toasted-primary', 'outline', 'bubble']
onComplete	Part	null	Trigger when toast is completed
closeOnSwipe	Boolean	true	Closes the toast when the user swipes it
singleton	Boolean	false	Merely allows i toast at a fourth dimension.

Methods

Methods available on Toasted...

Vue . toasted . show ( ' my bulletin ' , { } )

Method	Parameter'southward	Description
prove	message, options	evidence a toast with default style
success	message, options	show a toast with success style
info	bulletin, options	show a toast with info style
error	bulletin, options	show a toast with error way
register	name, bulletin, options	register your own toast with options explained hither
articulate	-	clear all toasts

Toast Object

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

el : HtmlElement

text : Function ( text )

goAway : Office ( filibuster = 800 )

using the toast object

allow myToast = this . $toasted . show ( " Holla !! " ) ;

myToast . text ( " Changing the text !!! " ) . goAway ( 1500 ) ;

Vue Router

Adding vue-router to vue-toasted where y'all can use it on toast actions.

var router = new VueRouter ( {

fashion : ' history ' ,

routes : [ {

path : ' /foo ' ,

name : ' foo-name '

} ] ,

linkActiveClass : " agile "

} ) ;

Vue . utilise ( Toasted , {

router

} ) ;

Custom Toast Registration

You can annals your own toasts like beneath and it will exist available all over the application.

Toasted.register methods api details...

Parameters	Type's	Default	Description
proper 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', 'mistake']

Accept a look at the below examples

Simple Instance

import Toasted from ' vue-toasted ' ;

Vue . utilise ( Toasted ) ;

Vue . toasted . register ( ' my_app_error ' , ' Oops.. Something Went Wrong.. ' , {

type : ' error ' ,

icon : ' error_outline '

} )

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

this . $toasted . global . my_app_error ( ) ;

Advanced Example

You lot can besides pass message equally a function. which will give you more power. Lets think you demand to laissez passer a custom message to the error notification nosotros congenital above.

this . $toasted . global . my_app_error ( {

message : ' Not Authorized to Access '

} ) ;

you can annals a toast with payload like below on the instance.

import Toasted from ' vue-toasted ' ;

Vue . utilize ( Toasted ) ;

let options = {

type : ' error ' ,

icon : ' error_outline '

} ;

Vue . toasted . register ( ' my_app_error ' ,

( payload ) => {

if ( ! payload . bulletin ) {

return " Oops.. Something Went Wrong.. "

}

return " Oops.. " + payload . message ;

} ,

options

)

Browsers back up

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

Please Report If Y'all take Found any Issues.

Mobile Responsiveness

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

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 😉

Enjoy Toasting !!

seltzertiongens.blogspot.com

Source: https://www.npmjs.com/package/vue-toasted

Seltzer Tiongens

Vue-toast Cannot Read Property 'unshift' of Undefined