eolant / vuetify-toast-snackbar

Basic Vue toast service that uses Vuetify Snackbar component.

Vuetify Toast Snackbar

Basic Vue toast service with queue support that uses Vuetify Snackbar component. Inspired by https://github.com/pzs/vuetify-toast

Installation

npm install vuetify-toast-snackbar

Demo

Demo: https://eolant.github.io/vuetify-toast-snackbar

Usage

Bundler (Webpack, Rollup)

import VuetifyToast from 'vuetify-toast-snackbar'

Vue.use(VuetifyToast, {
	x: 'right', // default
	y: 'bottom', // default
	color: 'info', // default
	icon: 'info',
	iconColor: '', // default
	classes: [
		'body-2'
	],
	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
})

Vue loader (e.g. Nuxt.js)

Update plugins/vuetify.js

import Vue from 'vue'
import Vuetify, { VSnackbar, VBtn, VIcon } from 'vuetify/lib'
import VuetifyToast from 'vuetify-toast-snackbar'

Vue.use(Vuetify, {
  components: {
    VSnackbar,
    VBtn,
    VIcon
  }
})

Vue.use(VuetifyToast)

Call

this.$toast('Default toast')

this.$toast.info('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'
cmp.close()

Clear Toasts queue

let queue = this.$toast.clearQueue()

vuetify-toast-snackbar's Issues

compoent not register

I am getting app.js:142552 [Vue warn]: Unknown custom element: - did you register the component correctly?

Add vuetify loader in README

It's a bit unclear how to load vuetify-toast-snackbar with vuetify loader.

I found this closed issue which helped.

It would be helpful to add specifically how to load this with vuetify loader to the README

Typescript declaration file?

Any chance you could write a Typescript declaration (.d.ts) for this module?

app prop for Snackbar

In Vuetify 2.6 VSnackbar only add app padding if app prop is true (28e9e9d), closes #11758

Please create a new app options to set VSnackbar app prop.

Possible to call toast out of this context?

Hi,

I wondered if it's possible to call the toast methods without having to go through the 'this' context but with a static method or so? I would like to call this in a vuex plugin, but the 'this' context doesn't have the $toast property here unfortunately.

Thanks.

Using Nuxt.js production build, snackbar isn't shown

I'm using Nuxt.js latest version and Vuetify module for nuxt. Toast service works OK when running in development via npm run dev. But when i build application for production, toast messages aren't shown.

I have this in plugins/vuetify-toast.js

import Vue from 'vue'
import Vuetify, { VSnackbar, VBtn, VIcon } from 'vuetify/lib'
import VuetifyToast from 'vuetify-toast-snackbar'

Vue.use(Vuetify, {
  components: {
    VSnackbar,
    VBtn,
    VIcon
  }
})

Vue.use(VuetifyToast)

and in config/nuxt.js

  plugins: [
    '~/plugins/vuetify-toast.js',
  ],

Can you help me to identify what might be wrong in my code?

Cannot find module '../node_modules/style-inject/dist/style-inject.es.js

Cannot find module '../node_modules/style-inject/dist/style-inject.es.js

Démo is not working

When accessing the demo there seems to be an issue :

https://eolant.github.io/vuetify-toast-snackbar

It dose not work as expected in vuetify 2.0.2

excellent job. But after i upgrade vuetify from 1.5.16 to 2.0.2, i found the snackbar wont show any more , only a plain text appened after the page.

Can the toast be queued?

As we can call the toast from anywhere in case multiple toasts are displayed the old ones vanish as soon as new one is created

VuetifyToastObject.queueable is not found

https://github.com/eolant/vuetify-toast-snackbar/blob/master/src/index.d.ts

export interface VuetifyToastObject {
  x?: string
  y?: string
  color?: string
  icon?: string
  classes? : string | object | Array<object | string>
  timeout?: number
  dismissable?: boolean
  autoHeight? : boolean
  multiLine? : boolean
  vertical? : boolean
  shorts? : any
}

Inject in Nuxt context

Hello.

Do you have idea how I can inject you package in nuxt context. I tried created plugin like:

import Vue from 'vue'
import VuetifyToast from 'vuetify-toast-snackbar'

Vue.use(VuetifyToast, {
  x: 'right',
  y: 'top',
  color: 'info',
  icon: 'info',
  timeout: 3000,
  dismissable: true,
  autoHeight: false,
  multiLine: false,
  vertical: false,
  shorts: {
    custom: {
      color: 'purple',
    },
  },
  property: '$toasted',
})

export default function (ctx, inject) {
  inject('toast', Vue.prototype.$toasted)
}

inspired: https://github.com/nuxt-community/modules/blob/master/packages/toast/plugin.js

But it doesn't work :(

abnormal style ？

vuetify-2.5.4
vuetify-toast-snackbar-0.6.1

[Feature Request] Option to add custom attributes

Problem to solve

I need to get the component in my end-to-end tests. The current solution is to get it by the vts CSS class, but the the ideal is to get it by the attribute data-cy.

Proposed solution

Add a prop attrs that will receive an object and use v-bind with this prop in the snackbar component . Each key of the attrs object will be the name of the attribute being created.

Missing method for close all "$toasts"

When I have group of $toasts (error form validation messages), then fix the form and submit, I want to close all current $toasts and show new one (maybe a success message if I got lucky).

So something like this.$toast.closeAll().
(And this.$toast.getQueue) could be also nice to have accessable 😇 )

Current behavior: new success message appears at the end of queue and user does not see it until he close manualy all the error $toasts.

Quick fix could be show LIFO (last in - first out) order instead of current FIFO (first in - first out).

Position toast within dialog

I believe this is an enhancement request. I would like to show a toast within a dialog, meaning, the 'x' and 'y' properties would be relative to either the 'current' component (if that can be deduced) or a named component. As an example, I have a 'Sign In' component that is popped up in a modal dialog. The 'window' (of the dialog) is small in comparison to the overall browser window. If the user provides a bad password, the 'error message' is a toast, however it appears at the bottom of the browser, not at the bottom of the Sign In 'window', and is thus harder to 'see' (since eye focus is still on the Sign In content, in the middle of the screen, versus the bottom of the screen).

I see that the Vuetify snackbar has an Absolute property, however there is no example for it and I do not understand what setting it to true actually does (aside from setting 'position:absolute' in css). I do not for instance see a numerical 'x' or 'y' coordinate property. Another widget library, Buefy, offers a snackbar widget, and they do include a 'component' property, i.e., 'display this snackbar relative to that component'.

Thank you!

VSnackbar component not found when using Vue Cli 3.0

Probably an issue regarding me as a newbie: but

When creating project using Vue cli 3.0 vuetify is imported with

import vuetify from './plugins/vuetify';`

Using
import vuetify, { VIcon, VSnackbar } from './plugins/vuetify';

Results in:
export 'VSnackbar' was not found in './plugins/vuetify'

and

Unknown custom element: <v-snackbar> - did you register the component correctly?

[Suggestion] Make snack readable by screenreaders

Hey!
I was creating my own solution and just came across yours, which seems to be more complete.

Screenreaders aren't reading the toast notification, that's because it lacks a role="alert" on it.

Just putting role="alert" on the <v-snackbar fixes the issue.

The root SNACK node DOM is not removed after snackBar is closed

Hello, I am using your plug-in and found that after multiple executions of the show method, multiple elements of .v-snack v-application type Dom will be generated at the root node. I think this may not be true for a single page Great, I read many methods and issues #28, and there is no good way to deal with it.
run this.$toast('hello')

After testing myself, I added a line of code to the vuetify-toast-snackbar/src/index.js file:

cmp.$nextTick(function () {
             cmp.$destroy();
             +++ cmp.$el.remove();
             cmp = null;
             if (queue.length) {
               var toast = queue.shift();
               show(toast.message, toast.options);
             }
});

This is the method I found temporarily. If you have a good method, or the method I used is wrong, please let me know.

There is no 'plugins/vuetify.js' in nuxt

I'm using nuxt with vuetify. The instructions say to update plugins/vuetify.js to add the toast-snackbar but I don't have this in my default nuxt-vuetify config, which uses @nuxtjs/vuetify module.

I've tried to create a plugin anyway. But I'm getting an Unknown custom element: <v-snackbar> error after I added a plugins/toast.js file, added it to the plugins list in nuxt.config.js and put the following in it:

import Vue from 'vue'
import Vuetify, { VSnackbar, VBtn, VIcon } from 'vuetify/lib'
import VuetifyToast from 'vuetify-toast-snackbar'

Vue.use(Vuetify, {
  components: {
    VSnackbar,
    VBtn,
    VIcon
  }
})

Vue.use(VuetifyToast)

I'm not sure what to do.

"@nuxt/cli": {
      "version": "2.11.0",
"@nuxtjs/vuetify": {
      "version": "1.11.0",
"vuetify": {
      "version": "2.2.14",
"vuetify-toast-snackbar": {
      "version": "0.6.1",

Demo is not working

Demo at https://eolant.github.io/vuetify-toast-snackbar/ seems to be broken...

Remove snackbar element from DOM when closed

This library adds a new snackbar every time the $toast method is called. When this method is used extensively, it creates a lot of snackbar elements that just end up sitting in the DOM.

Maybe these should be removed, for performance reasons?

Allow "close" icon to be text or use another icon pack

Currently, showClose will make the close button show <v-icon>close</v-icon>, but that won't work if you use mdi, or another icon pack.

I'd suggest allowing changing the default close button with either a custom icon or custom text, if I wanted it to say "Close" instead of an X, for example.

OnClick Handler

I'm using your toast component for a chat inside my application and it would be nice if you could add the option of adding a clickable button (call to action) into the toast.

to open the mentioned chat for example.

not working as should under vuetify 2.0.5

after upgrading to vuetify 2.0.5, the stylings are wrong.

all toasts have black background no matter what options will be passed.
also the font is Arial instead of roboto.

toast call:

app.$toast(
    app.$t(error.message) as string,
    {
        color: 'error',
        icon: 'error',
    },
);

Replace the "flat" prop of close button in "text"

This is also a change from Vuetify1 to Vuetify2.
The "flat" prop of VBtn has been renamed to "text".

[Vuetify] [BREAKING] 'flat' has been removed, use 'text' instead. For more information, see the upgrade guide https://github.com/vuetifyjs/vuetify/releases/tag/v2.0.0#user-content-upgrade-guide

Also the prop 'auto-height' has been removed

[Vuetify] [REMOVED] 'auto-height' has been removed. You can safely omit it.

Upgrading the vuetify library results in style exception

In nuxt, `$toast` is not available in context inside another plugins like axios

I have the $toast property working just fine in my components and in the store, but when I try to call it from a plugin (axios in this case), the property isn't available.

I tried this in ~/plugins/vuetify-toast-snackbar.js:

import Vue from 'vue'
import VuetifyToast from 'vuetify-toast-snackbar'

Vue.use(VuetifyToast)

export default ({ app }, inject) => {
  inject('toast', Vue.prototype.$toast)
}

And in ~/plugins/axios.js, with:

export default function ({ $axios, $toast }) {
  $axios.onError((error) => {
    if (process.client && !!$toast) {
      if (error.response) {
        $toast.error(`${error.response.status} ${error.response.statusText}`)
      } else if (error.request) {
        $toast.error('A aplicação não foi capaz de completar a requisição.')
      } else {
        $toast.error(`Algo deu errado! ${error.message}`)
      }
    }
  })
}

neither app.$toast nor ctx.$toast is available.

Can you help me to identify what might be wrong in my code?
All the workaround I have tried up to here are being unsuccessful.

Remove alert role from root element.

Hello again!

A few months ago I opened issue #23 and you added the role="alert" to the component, fixing the issue.

But now Vuetify itself added role="alert" to the snackbar_wrapper element.

With this, this plugin is generating two role="alert" within a single snackbar, causing the screenreader to say "alert" twice.

toast-snackbar not work with nuxt build

Hello

toast-snackbar work with only run dev (yarn dev)
run build not work , snackbar not show

HTML Source from run dev
<div class="v-snack v-application vts v-snack--active v-snack--bottom v-snack--right" role="alert"><div class="v-snack__wrapper success"><div class="v-snack__content"><i aria-hidden="true" class="v-icon notranslate vts__icon v-icon--left mdi mdi-check theme--dark"></i> <div class="vts__message"><div>บันทึก</div> </div> <!----></div></div></div>

HTML Source from run build
<v-snackbar timeout="3000" color="success" bottom="true" right="true" role="alert" class="v-application vts"><v-icon dark="" left="" color="" class="vts__icon"> mdi-check </v-icon> <div class="vts__message"><div>Save</div> </div></v-snackbar>

nuxt.config.js

plugins: [
    '@plugins/vuetify',
]

plugins/vuetify.js

import Vue from 'vue'
import Vuetify, { VSnackbar, VBtn, VIcon } from 'vuetify/lib'
import VuetifyToast from 'vuetify-toast-snackbar'

Vue.use(Vuetify, {
  components: {
    VSnackbar,
    VBtn,
    VIcon
  }
})
Vue.use(VuetifyToast)

Plugin doesn't work

Hello. I want to use your plugin, but i have an error in my console when i emit it like:
this.$toast('Default toast').
I installed it correct in main.js:
import VuetifyToast from 'vuetify-toast-snackbar'
Vue.use(VuetifyToast)

There is an error: Error in v-on handler: "TypeError: this.$toast is not a function"
I tried to emit this toast from my component by click. Why this error happens?

[Vue Warn] - Error in render

vue.js:634 [Vue warn]: Error in render: "TypeError: Cannot read property 'bar' of undefined"

found in

getting the above error in console when trying to use this plugin, also I am getting this error when using the demo site:
https://eolant.github.io/vuetify-toast-snackbar/

This seems to only of started happening today, any thoughts on why this is happening?

Toast appearance: There's no close button on the toasts, text isn't centered

When the toast notification is displayed, there's no indication to the user that they can close it. It would be helpful (and look better IMO) if there was an "X" or close button at the end of the toast. It would also be nice to be able to center the text in the toast.

Cannot get snackbar to show - Unknown custom element

Hello, I am very new to both Vue and Vuetify. However I have the beginning of a project working fine. I would like to use this plug in. I am not using nuxt. I am using vuetify 2.x and vue 2.x. I've tried installing as instructed - I did: npm install vuetify-toast-snackbar just fine.

My 'main.js' has: import VuetifyToast from 'vuetify-toast-snackbar' at the top... and: Vue.use(VuetifyToast) in the middle, near the other 'Vue.use' blocks. I do not have it in the new Vue ({ block. i tried it there and it did not make a differenece.

My plugins/vuetify.js now looks like this:

import Vue from 'vue'
import Vuetify, { VSnackbar, VBtn, VIcon } from 'vuetify/lib'
import VuetifyToast from 'vuetify-toast-snackbar'

Vue.use(Vuetify)

export default new Vuetify({
  theme: {
    options: {
      customProperties: true
    }
  },
  components: {
    'v-snackbar': VSnackbar,
    'v-btn': VBtn,
    'v-icon': VIcon
  }
})

Vue.use(VuetifyToast) //new line for vuetify toast

In the 'components' block I tried it first without 'names', and then with. I tried 'proper names' for each name, i.e., VSnackbar, as well as the value that the errors display, i.e., v-snackbar. Neither seems to work.

Here are the errors I get back when trying a test from within my App.vue component:

[Vue warn]: Unknown custom element: <v-snackbar> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in <Root>)

I've tried reading through other issues/resolutions, but could not find a solution. Assuming I get this working, I then want to use this within another plug-in I am using, vuetify-dialog. I read about the problems of using this plug-in from within another plugin and did not see a final resolution. Maybe I missed it (or didn't understand it yet).

Thank you!

update text in real time

Any way to update a part of message string in real time?
I want notification (toast) that update a download progress from axios.
¿Any idea?

Default queueable doesn't work

Thank you for this great vuetify extension. It works great.
I only seeing one issue.
I set the default option queueable to true when setting up the plugin (nuxt).
When firing notices they're not queued. When I directly add the queueable true option the calling method it works great. Other default options like position are working great.

Does not work with Vuetify 2+

vue.js:634 [Vue warn]: Error in render: "TypeError: Cannot read property 'bar' of undefined"

found in

unknown custom element v-snakbar & v-btn

When using vuetify loader the browser console says

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

main.js

import Vue from 'vue'
import './plugins/vuetify'
import './plugins/veeValidate'
import './plugins/vuetifyToastSnackbar'
import App from './App.vue'
import router from './router'
import store from './store/main'
import './registerServiceWorker'

import './shared/lib/request'

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

vuetifyToastSnackbar.js

import VuetifyToast from 'vuetify-toast-snackbar'

Vue.use(VuetifyToast, {
    x: 'right', // default
    y: 'bottom', // default
    color: 'info', // default
    icon: 'info',
    timeout: 3000, // default
    dismissable: true, // default
    autoHeight: false, // default
    multiLine: false, // default
    vertical: false, // default
    shorts: {
        custom: {
            color: 'purple'
        }
    },
    property: '$toast' // default
});

Error in nextTick: "ReferenceError: document is not defined"

There is an error poping using this library:

Error in nextTick: "ReferenceError: document is not defined" 
document is not defined

Which refere to this line of code https://github.com/eolant/vuetify-toast-snackbar/blob/master/src/index.js#L10

should we check if document is defined before? as it works, it's just an annoying warning

nuxtjs打包后无法正常显示，将变成一段文字

How to set an custom function

Hello, on the docs I can see you calling this.$toast.custom('Custom'), is possible to create different functions to call the toast? this.$toast.custom1('Custom'), this.$toast.custom2('Custom') and so on?

Missing info, error, ... in TS declaration file

Hi,

thanks for the great component! Since the last update I get the following error:

ERROR in /app/src/modules/validation/ScanList.vue
147:17 Property 'info' does not exist on type '(message: string, options?: VuetifyToastObject | undefined) => void'.
146 |

147 | this.$toast.info('Files were uploaded... please wait until processing has finished');

I looks like the declaration for the info, errror,... functions is missing in the added TS file.

Thanks!