Vuejs-Vue toasted v1.1.27: vue-toasted - Responsive Touch Compatible Toast plugin for VueJS.

icon
Latest Release: v1.1.27

#127 FIX: Mobile full width #124 Added keepOnHover option #119 add "export" to all interfaces and types #115 Add ARIA attribute to improve accessibility

Source code(tar.gz)
Source code(zip)

Gitpod Ready-to-Code

Introduction

Vue Toasted is one of the best toast plugins available for VueJS. It's used by VueJS, Laravel, NuxtJS and trusted by many more organizations. It's responsive, touch compatible, easy to use, attractive and feature rich with icons, actions, and more!

Interactive Demo

Checkout the Interactive Demo here.

Menu

Installation

Install using npm

# install it via npm
npm install vue-toasted --save

Install using yarn

# install it via yarn
yarn add vue-toasted

Direct usage with html

<!-- Insert the vue core before vue-toasted -->
<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's simple. A couple of lines is all you need.

// register the plugin on vue
import Toasted from '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 ?

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 ?

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
{
    // 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

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

// you can pass string or html to message
Vue.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.

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

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
import Toasted from '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 '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, 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.

Contribute using the one-click online setup.

Contribute to Vue Toasted using a fully featured online development environment that will automatically: clone the repo, install the dependencies and start the webserver.

Open in Gitpod

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

Comments

  • vue 3 support (without changed /dist)
    vue 3 support (without changed /dist)

    Jul 13, 2021

                                                                                                                                                                                                           
    Reply
  • TypeError: Cannot read property 'style' of null
    TypeError: Cannot read property 'style' of null

    Jul 19, 2021

    For some reason I end up with this error which is strange

    Here is how I register the Toasts in the main,js file

    /**
     * TOASTS
     */
    // register the plugin on vue
    import Toasted from 'vue-toasted';
    Vue.use(Toasted);
    

    Here is how I use it in my component

    mounted() {
    
        this.$toasted.show('test', {class: "test"});
        this.fetchProjects();
      },
    
    Reply
  • Update README.md
    Update README.md

    Aug 24, 2021

    punctuation ' ; ' correction not necessary

    Reply
  • Stops toasts stretching inside container if msg length vary
    Stops toasts stretching inside container if msg length vary

    Sep 19, 2021

    Before: image After: image

    Reply
  • Edit styling of default this.$toast.success('message') ?
    Edit styling of default this.$toast.success('message') ?

    Sep 30, 2021

    Are we able to edit the styling of the default this.$toast.success('message') and add icons?

    OR

    Do we have to make a custom toast to accomplish these things?

    Reply
  • Bump url-parse from 1.4.7 to 1.5.3
    Bump url-parse from 1.4.7 to 1.5.3

    Oct 5, 2021

    Bumps url-parse from 1.4.7 to 1.5.3.

    Commits
    • ad44493 [dist] 1.5.3
    • c798461 [fix] Fix host parsing for file URLs (#210)
    • 201034b [dist] 1.5.2
    • 2d9ac2c [fix] Sanitize only special URLs (#209)
    • fb128af [fix] Use 'null' as origin for non special URLs
    • fed6d9e [fix] Add a leading slash only if the URL is special
    • 94872e7 [fix] Do not incorrectly set the slashes property to true
    • 81ab967 [fix] Ignore slashes after the protocol for special URLs
    • ee22050 [ci] Use GitHub Actions
    • d2979b5 [fix] Special case the file: protocol (#204)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • [Feature] 🎨 Action buttons cannot be set dynamically when using custom registration
    [Feature] 🎨 Action buttons cannot be set dynamically when using custom registration

    Oct 8, 2021

    It would be great to pass actions in the payload of the global custom toasts like we can do with the message:

    this.$toast.global.myToast({
          message: 'Hello there!',
          action : [
            {
                text : 'Ignore',
                onClick : (e, toastObject) => {
                    toastObject.goAway(0);
                }
            },
            {
                text : 'Hey',
                onClick : (e, toastObject) => {
                    console.log('👋')
                    toastObject.goAway(0);
                }
            }
          ]
    })
    

    Unfortunately only the message property can currently take the payload as parameter in the custom toast registration.

    Reply
  • Aria Role should be configurable
    Aria Role should be configurable

    Dec 17, 2021

    The attributes set here are redundant.

    Elements with the role status have an implicit aria-live value of polite and an implicit aria-atomic value of true.

    It would be nice if one could change the role. For example for alerts it would be more suitable to set the role to alert This would allow users of screen readers to get immediately get notified about the message.

    my current workaround is:

    const parent = error.el.parentElement;
    parent?.setAttribute('role', 'alert');
    parent?.setAttribute('aria-live', 'assertive');
    parent?.setAttribute('aria-atomic', 'true');
    

    The aria-live and aria-atomic are here also redundant but needed because of the initial set attributes.

    Reply
  • Add example where icon can be added by function
    Add example where icon can be added by function

    Jan 10, 2022

    Hi, I had a task to add custom icon to the toast, so tried to find the example in docs, but didn't succeed. Here is the example from docs: Screenshot 2022-01-10 at 16 13 20

    But if after setting "iconPack: 'callback'; " we can use prop "icon" as function which returns us HTMLelement: Screenshot 2022-01-10 at 16 16 45

    So it is not an issue, maybe some kind of recommendation to add such an example to docs as it was not obvious for me and I suppose some people can also get stuck for a while.

    Thanks a lot!

    Reply
  • Bump follow-redirects from 1.10.0 to 1.14.7
    Bump follow-redirects from 1.10.0 to 1.14.7

    Jan 13, 2022

    Bumps follow-redirects from 1.10.0 to 1.14.7.

    Commits
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • d01ab7a Release version 1.14.5 of the npm package.
    • 40052ea Make compatible with Node 17.
    • 86f7572 Fix: clear internal timer on request abort to avoid leakage
    • 2e1eaf0 Keep Authorization header on subdomain redirects.
    • 2ad9e82 Carry over Host header on relative redirects (#172)
    • 77e2a58 Release version 1.14.4 of the npm package.
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • support router-link in toasts
    support router-link in toasts

    Jun 15, 2017

    Please add support of router-link in toasts. For example when creating a user named "Milad", toast text should be "User Milad created successfully" and "Milad" should be linked to "users/10".

    help wanted feature-request 
    Reply
  • add
    add "export" to all interfaces and types

    Mar 28, 2019

    Hello, I have add export to all interfaces and types for enable to use that in https://github.com/nuxt-community/modules/tree/master/packages/toast In same time i have implement the PR #116.

    Thanks

    Reply
  • Only one toast at a time
    Only one toast at a time

    Sep 29, 2017

    Is there a way to globally prevent that no more than a single toast is shown simultaneously? I'm trying to prevent this from happening:

    screenshot_1

    I know I could just use the recently-added clear method but it seems a bit too overwhelming to have to make that call each time I trigger a toast. I was wondering if I could clear all toasts as soon as a new one is shown.

    feature-request 
    Reply
  • mobile position off screen
    mobile position off screen

    Jul 12, 2017

    On the demo site it seems when it comes from the bottom it is not fixed to viewport but the page height, thus appearing beneath the screen area and invisible. at least it did after scrolling around a few times.

    Reply
  • Issue with appending container to body
    Issue with appending container to body

    May 20, 2019

    I think that there is some problem with commit 3cb3cbb098d4b4b545a23646ce2533c816f27ac5 (merged 3 days ago which in case of issue #115 ). This is due to the following error which occures in console when vue-toasted should be append to body.

    Image with content of error in console: image

    It makes following syntax not working: this.$toasted...

    This syntax is still working: Vue.toasted...

    Reply
  • Better ReadME for Advanced Custom Toast Registration
    Better ReadME for Advanced Custom Toast Registration

    Jul 5, 2018

    The readme says you can pass a message to a globally registered toast like this: this.$toasted.global.my_app_error({ message : 'Not Authorized to Access' }); But it does not work.

    Reply
  • Accept custom class in toast icons
    Accept custom class in toast icons

    Apr 27, 2018

    Added another option to iconPack, custom-class. With this the icon/icon.name is used as direct classes to the icons, so you can use any class based icon set, like fontawesome5 for example like this:

    this.$toasted.show('test', { icon: { name: 'fal fa-check fa-spin' }, type: 'error' });

    This will render a toast with an icon as <i class="fal fa-check fa-spin"></i>

    Also had to fix the webpack config for path so I could build, it now needs an absolute path in output.path

    Reply
  • Request: Typescript types/definition files
    Request: Typescript types/definition files

    Jan 18, 2018

    This is a great library, that I'd love to use in my project, however, my project is entirely Typescript - and I'm still a bit of a TS noob, so I'm not entirely sure how to create TS definitions that also interact with the Vue plugin system.

    I've tried some permutations, but each one falls over at some point - from compilation all the way to runtime.

    I think right now, the biggest problem for me is that TS can't seem to pick up the this.$toasted variable, even though I'm following https://vuejs.org/v2/guide/typescript.html#Augmenting-Types-for-Use-with-Plugins and basically copied what Vue-Router did.

    If there are any TS devs with more experience pulling 3rd party plugins in, I'd be happy to get something running and do a PR

    help wanted : Typescript 
    Reply
  • className does not seem to work
    className does not seem to work

    Apr 19, 2019

    Hi, maybe I didn't understand something in the docs, but when I pass the options of my toast:

    this.$toasted.show('New user added.', {duration: 1000, className: 'toasts'})
    

    duration works, className has no effect, while if I edit it with containerClass it works:

    this.$toasted.show('New user added.', {duration: 1000, containerClass: 'toasts'})
    

    anybody can tell me why? I am using @nuxtjs/toast but I tested it also using pure vue-toasted.

    Reply
  • Compability with vue-fontawesome
    Compability with vue-fontawesome

    Feb 8, 2018

    I am using the vue-fontawesome components for all the icons in my project, so is there a way to use this with it?

    The component looks like this: <font-awesome-icon :icon="['far', 'trash-alt']"></font-awesome-icon>

    vue-fontawesome

    help wanted feature-request hacktoberfest 
    Reply