vuejs-snackbar-queue

A Vuejs snackbar plugin that support multiple snackbars at one time

Installation

npm install vuejs-snackbar-queue

Basic Usage

import Vue from 'vue'
import SnackbarQueue from 'vuejs-snackbar-queue' 

Vue.use(SnackbarQueue)

Advanced Usage

Global options can be set when initialize the plugin

import Vue from 'vue'
import SnackbarQueue from 'vuejs-snackbar-queue' 

Vue.use(SnackbarQueue, { maxSnacks: 5, mobileBreakpoint: 600 })

Apply

Add the global component to your root component (App.vue)

<snackbar-queue/>

Open a snackbar from your .vue files

this.$snackbar.show({
    message: "Message",
    color: "green",
    timeout: 5000
});

Also you can open a snackbar from other files

import Vue from "vue";

const vue = new Vue();

vue.$snackbar.show({
    message: "Message",
    color: "green",
    timeout: 5000
});

Close all the snackbars by calling hideAll() method

this.$snackbar.hideAll();

Global Options

Name	Type	Default	Description
maxSnacks	Number	3	Maximum number of snackbars that can be added to the queue
mobileBreakpoint	Number	600	Snackbar is centered horizontally on screens those width below than mobileBreakpoint

API

Name	Type	Default	Description
message	String	null	Snackbar message
color	String	#333333	Color of the snackbar
timeout	Number	4000	Duration of the snackbar in ms. Use 0 to keep open indefinitely
horizontal	String	center	Horizontal position. Valid values : center, left, right
vertical	String	top	Vertical position. Valid values : top, bottom
actionText	String	Close	Label of the action button
onAction	Function		Specify a function that should be called when click on the action
transition	String		Transition name

License

This project is licensed under the MIT License - see the LICENSE.md file for details