You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

@gitlab/vue-toasted

Package Overview
Dependencies
0
Maintainers
9
Versions
3
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@gitlab/vue-toasted

Responsive Touch Compatible Toast plugin for VueJS 2+


Version published
Maintainers
9
Created

Changelog

Source

1.3.0 (2019-11-13)

Features

  • Add callback support to action icons (d530400)

Readme

Source

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

Install using npm
# install it via npm
npm install @gitlab/vue-toasted --save
Install using yarn
# install it via yarn
yarn 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.

// register the plugin on vue
import Toasted from '@gitlab/vue-toasted';

Vue.use(Toasted)

// you can also pass options, check options reference below
Vue.use(Toasted, Options)

// you can call like this in your component
this.$toasted.show('hello billo')

// and also
Vue.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

{
    // pass the icon name as string
    icon : 'check'
    
    // or you can pass an object
    icon : {
        name : 'watch',
        after : true // this will append the icon to the end of content
    }
}

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

ParametersType'sDefaultDescription
text*String-name of action
hrefStringnullurl of action
iconStringnullname of material for action
targetStringnulltarget of url
classString/Arraynullcustom css class for the action
pushObjectnullVue Router push parameters
onClickFunction(e,toastObject)nullonClick Function of action
Examples
{
    // you can pass a single action as below
    action : {
        text : 'Cancel',
        onClick : (e, toastObject) => {
            toastObject.goAway(0);
        }
    },

    // you can pass a multiple actions as an array of actions
    action : [
        {
            text : 'Cancel',
            onClick : (e, toastObject) => {
                toastObject.goAway(0);
            }
        },
        {
            text : 'Undo',
            // router navigation
            push : { 
            	name : 'somewhere',
            	// this will prevent toast from closing
            	dontClose : true
             }
        }
    ]
}

API

Options

below are the options you can pass to create a toast

OptionType'sDefaultDescription
positionString'top-right'Position of the toast container
['top-right', 'top-center', 'top-left', 'bottom-right', 'bottom-center', 'bottom-left']
durationNumbernullDisplay time of the toast in millisecond
keepOnHoverBooleanfalseWhen mouse is over a toast's element, the corresponding duration timer is paused until the cursor leaves the element
actionObject, ArraynullAdd single or multiple actions to toast explained here
fullWidthBooleanfalseEnable Full Width
fitToScreenBooleanfalseFits to Screen on Full Width
classNameString, ArraynullCustom css class name of the toast
containerClassString, ArraynullCustom css classes for toast container
iconPackString'material'Icon pack type to be used
['material', 'fontawesome', 'mdi', 'custom-class', 'callback']
IconString, ObjectnullMaterial icon name as string. explained here
typeString'default'Type of the Toast ['success', 'info', 'error']
themeString'toasted-primary'Theme of the toast you prefer
['toasted-primary', 'outline', 'bubble']
onCompleteFunctionnullTrigger when toast is completed
closeOnSwipeBooleantrueCloses the toast when the user swipes it
singletonBooleanfalseOnly allows one toast at a time.

Methods

Methods available on Toasted...

// you can pass string or html to message
Vue.toasted.show( 'my message', { /* some option */ })
MethodParameter'sDescription
showmessage, optionsshow a toast with default style
successmessage, optionsshow a toast with success style
infomessage, optionsshow a toast with info style
errormessage, optionsshow a toast with error style
registername, message, optionsregister 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.


// html element of the toast
el : HtmlElement

// change text or html of the toast
text : Function(text)

// fadeAway the toast. default delay will be 800ms
goAway : Function(delay = 800)

using the toast object

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

Vue Router

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


// your app router instance
var router = new VueRouter({
	mode: 'history',
	routes: [{
		path: '/foo',
		name : 'foo-name'
	}],
	linkActiveClass: "active"
});

// pass it to vue toasted as below..
Vue.use(Toasted, {
	router
});

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...

ParametersType'sDefaultDescription
name*String-name of your toast
message*String/Function(payload)-Toast Body Content
optionsString/Object{}Toast Options as Object or either of these strings ['success', 'info', 'error']

Take a look at the below examples

Simple Example
import Toasted from '@gitlab/vue-toasted';
Vue.use(Toasted);

// Lets Register a Global Error Notification Toast.
Vue.toasted.register('my_app_error', 'Oops.. Something Went Wrong..', {
    type : 'error',
    icon : 'error_outline'
})

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

// this will show a toast with message 'Oops.. Something Went Wrong..'
// all the custom toasts will be available under `toasted.global`
this.$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.

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

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

import Toasted from '@gitlab/vue-toasted';
Vue.use(Toasted);

// options to the toast
let options = {
    type : 'error',
    icon : 'error_outline'
};

// register the toast with the custom message
Vue.toasted.register('my_app_error',
    (payload) => {
		
        // if there is no message passed show default message
        if(! payload.message) {
    	    return "Oops.. Something Went Wrong.."
        }
		
        // if there is a message show it with the message
        return "Oops.. " + payload.message;
    },
    options
)
Browsers support
IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Opera
Opera
iOS Safari
iOS Safari
Chrome for Android
Chrome for Android
IE10, IE11, Edgelast 7 versionslast 7 versionslast 7 versionslast 7 versionslast 3 versionslast 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 !!

Keywords

FAQs

Package last updated on 14 Nov 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc