Vue Toast Service That Uses The Vuetify Snackbar Component

vuetify-toast-snackbar is a basic vue toast service with queue support that uses the snack bar component.

vuetify snackbar stack, vuetify global snackbar, vuetify alert popup, vuetify snackbar not showing

A Lightweight JavaScript Library to Create Snackbar and Toaster Notifications | Notify.js

How to make use of it:

Install & Download:

$ npm install vuetify-toast-snackbar --save


import VuetifyToast from 'vuetify-toast-snackbar'

Vue.use(VuetifyToast, {
    x: 'right', // default
    y: 'bottom', // default
    color: 'info', // default
    icon: 'info',
    iconColor: '', // default
    classes: [
    timeout: 3000, // default
    dismissable: true, // default
    multiLine: false, // default
    vertical: false, // default
    queueable: false, // default
    showClose: false, // default
    closeText: '', // default
    closeIcon: 'close', // default
    closeColor: '', // default
    slot: [], //default
    shorts: {
        custom: {
            color: 'purple'
    property: '$toast' // default
import Vue from 'vue'
import Vuetify, { VSnackbar, VBtn, VIcon } from 'vuetify/lib'
import VuetifyToast from 'vuetify-toast-snackbar'

Vue.use(Vuetify, {
  components: {

this.$toast('Default toast')

this.$'Info toast')

this.$toast('Custom options', {
    color: 'green',
    dismissable: true,
    queueable: true

this.$toast.custom('Custom short')

this.$toast(null, {
    slot: [this.$createElement('button', ['Click here'])]

Get currently displayed Toast component.

let cmp = this.$toast.getCmp()
cmp.message = 'Dynamic properties'

Vuetify Toast Snackbar Component, Vuetify Toast Snackbar Plugin/Github

See Demo And Download

Official Website(eolant): Click Here

This superior jQuery/javascript plugin is developed by eolant. For extra advanced usage, please go to the official website.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…