• Stars
    star
    128
  • Rank 274,731 (Top 6 %)
  • Language Vue
  • License
    MIT License
  • Created almost 6 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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()