๐Ÿ–– Responsive Touch Compatible Toast plugin for VueJS 2+

Overview

Gitpod Ready-to-Code

Updated for Vue 3

Adjusted plugin installation to use Vue 3 specification

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 @clayzar/vue-toasted --save

Install using yarn

# install it via yarn
yarn add @clayzar/vue-toasted

Direct 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's simple. A couple of lines is all you need.

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

// or you can use it with require
var Toasted = require('@clayzar/vue-toasted').default

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

Parameter Type 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 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 Parameters 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...

Parameter Type 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 '@clayzar/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 '@clayzar/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 !!

You might also like...
Enable tap, swipe, touch, hold, mouse down, mouse up events on any HTML DOM Element in vue.js 3.x.
Enable tap, swipe, touch, hold, mouse down, mouse up events on any HTML DOM Element in vue.js 3.x.

vue3-touch-events Enable tap, swipe, touch, hold, mouse down, mouse up events on any HTML DOM Element in vue.js 3.x. The easiest way to make your inte

responsive image with zoomed image on hover
responsive image with zoomed image on hover

vue-zoom-on-hover responsive image with zoomed image on hover. demo (ctrl+click to open in new tab) this vue.js component displays an image with the w

A Vue component that lets you quickly create responsive image tags with an optimal number of image sources for all devices.

Vue Responsive Image Vue Responsive Image is a Vue component that allows you to quickly insert responsive image tags in your Vue project, provided you

๐Ÿ•ต๏ธโ€โ™€๏ธ๐Ÿ•ต๏ธโ€โ™‚๏ธ One easy-to-use component for Vue.js to build beautiful responsive timelines.
๐Ÿ•ต๏ธโ€โ™€๏ธ๐Ÿ•ต๏ธโ€โ™‚๏ธ One easy-to-use component for Vue.js to build beautiful responsive timelines.

Documentation You can browse the documentation for Vue Timeline on the website. Installation npm install @growthbunker/vuetimeline # Or if you prefer

๐ŸŽ‰ Custom ripple effect plugin for @vuejs
๐ŸŽ‰ Custom ripple effect plugin for @vuejs

vue-rippler ๐ŸŽ‰ Simple Vue.js plugin for custom ripple effect Live Demo Installation npm i vue-rippler --save yarn add vue-rippler CDNs jsDelivr, UNPKG

VueJS mixin plugin for creating element size queries in components

VueJS mixin plugin for creating element size queries in components.

MKTemplate is Free and Open Source. It features multiple HTML and VueJS elements and it comes with dynamic components for VueJS
MKTemplate is Free and Open Source. It features multiple HTML and VueJS elements and it comes with dynamic components for VueJS

MKTemplate A beautiful UI . Start your Web Site with this bootstrap and VueJS UI . MKTemplate is Free and Open Source. It features multiple HTML and V

๐Ÿช ๐Ÿ‘ฎ Hackable EU Cookie Law Plugin for Vue.js
๐Ÿช ๐Ÿ‘ฎ Hackable EU Cookie Law Plugin for Vue.js

๐Ÿช ๐Ÿ‘ฎ Vue Cookie Law EU Cookie Law Plugin for Vue.js ๐Ÿ“บ Demo ๐Ÿ”ง Install yarn add vue-cookie-law ๐Ÿ‘ˆ Usage template footer cookie-law theme="

Vue.js 2.x plugin that helps to use id-related attributes with no side-effect

VueUniqIds A Vue.js plugin that helps to use id-related attributes with no side-effect It is a trend to use components. Components are cool, they are

๐Ÿ‘† Touch ripple component for @vuejs

Vue-Touch-Ripple Touch ripple component for Vue. Example Demo Page CDN Example Install CDN <script type="text/javascript" src="path/to/vue.min.js"></s

Surmon 460 Sep 25, 2022
Touch ripple component for @vuejs 3.x

Turborepo starter with NPM This is an official starter turborepo. What's inside? This turborepo uses NPM as a package manager. It includes the followi

Ejiro Asiuwhu 2 Sep 13, 2022
:fire: A SPA/PWA framework which is highly compatible with Google Firebase

Myfirebase SPA framework Myfirebase is a decoupled SPAs framework which is highly compatible with Google Firebase Docs Documentation. Prerequisites NP

Myfirebase 71 May 21, 2022
Vue 3.0 Compatible Click Away Directive

Demo is available using VitePress and is included in this repository. See Demo Section on how to use and the reason why it's not live yet.

Vincent 89 Sep 2, 2022
A beautiful chat rooms component made with Vue.js - compatible with Vue, React & Angular

vue-advanced-chat Vue 3 compatibility ?? Features Vue, Angular & React compatibility Customizeable realtime chat messaging Backend agnostic Images, vi

Antoine Dupont 988 Sep 28, 2022
๐Ÿš€ Discover the advancement of Strapi for the latest Strapi version and the list of compatible plugins.

?? Discover the advancement of Strapi for the latest Strapi version and the list of compatible plugins. (Current: v4)

Thibaut DAVID 22 Sep 10, 2022
โฑ๏ธ A composable for storage-persisted stopwatches compatible with Vue 2 & 3.

Artwork by David Ko use-persistent-stopwatch A Vue composable bringing storage persisted stopwatches to your apps compatible with Vue 2 & 3. โœจ Feature

PraZ 6 Sep 16, 2022
Card counter for Pandemic infection deck, compatible with base and Legacy game versions

pandemic-card-counter Project setup yarn install Compiles and hot-reloads for development yarn serve Compiles and minifies for production yarn build

Mike 0 Jan 9, 2022
๐Ÿ’ฌ Responsive Vue.js comment system plugin that built with CSS Grid and Firebase REST API + Authentication. https://tugayyaldiz.github.io/vue-comment-grid

Vue.js Comment Grid Table of Contents Introduction Installation Downloading Plugin Dependencies Include Plugin Creating Firebase Project Setting Up Si

Tugay Yaldฤฑz 156 Jul 15, 2022
A Vue & Vue3 reliable, simple and touch-ready panes splitter / resizer.

A Vue & Vue3 reliable, simple and touch-ready panes splitter / resizer.

Antoni 1.1k Oct 1, 2022