Overview

The SnackbarStack plugin for Vue and Vuetify adds features on top of the existing Vuetify snackbar.

Features

• Queues pending snackbar messages.
• Adds a $snackbar object to every component.
• Shows a progress bar until the message timing out.
• Shows an indicator if additional messages are queued.
• Provides a next/close button.
• Support for multiple message outlets.
• Message queue flushing

Demo

View Demo On Codepen

Usage

import SnackbarStackPlugin from 'snackbarstack'
Vue.use(SnackbarStackPlugin)
// Or change defaults
// Vue.use(SnackbarStackPlugin, {duration:4000})

new Vue({
  el:'#app'
})

Show snackbars using this.$snackbar.show('the message')

onButtonPress() {
    this.$snackbar.show("You pressed the button")
    this.$snackbar.show("This message was queued")
}

You can also call $snackbar on the Vue instance. The is helpful when posting a message from outside of a component.

Vue.$snackbar.show("You pressed the button")

Or use options.

onButtonPress() {
    this.$snackbar.show("Press the button to continue.", {
        duration: -1,
        closeable: false,
        actions: [{
            caption:'Close Me',
            handler(snackbar, options){
                snackbar.close()
            }
        }]
    })
}

This example hides the default close button, and adds a custom action that does the closing.

Notable Changes

• Message queues can be flushed
• Message groups (used for removing messages of a certain type)

API

Plugin Options

duration

type: number [optional]
default: 6000

The duration of each snackbar message in milliseconds. This is used for messages that do not specify their own duration.

show(message, options)

Shows or queues a snackbar message.

options.duration

type: number [optional]
default: undefined

The duration of the snackbar message in milliseconds. -1 to show until user presses Close. If not set, the plugin's duration setting is used.

options.closeable

type: boolean [optiona]
default: true

Determines if a close button appears with the snackbar message.

options.template

type: boolean [optiona]
default: false

If this is set, the message will be interpreted as an x-template. (x-template names must start with '#')

<script type="text/x-template" id="my-x-template">
  <div>
    <h2 style="display: inline-block">Hello</h2>
    <h3 style="display: inline-block">X-Template</h3>
  </div>
</script>

this.$snackbar.show('#my-x-template', {template:true})

options.actions

type: object [optional]
default: undefined

Actions to be added to the snackbar message. Can be an object or an array of objects.

var action = {
    caption: '',
    icon: '',
    handler: function(api, options){}
}

The handler api object has 1 function, close(), to close the snackbar. The options object is the object passed in to the show() call.

options.outlet

type: string [optional]
default: undefined

The selector for the outlet to display the message.

If undefined, the default snackbar is used.

If found, the innerHTML will be set. If the outlet element is not found, the message will be sent to the console as an info message.

The only option currently implemented when specifying outlets is duration.

options.flushAll

type: boolean [optiona]
default: false

Remove all other messages before displaying the message

options.flushGroup

type: boolean [optiona]
default: false

Remove all other messages of the same group before displaying the message

options.flushOtherGroups

type: boolean [optiona]
default: false

Remove all other messages not matching the message group before displaying the message

options.group

type: string [optiona]
default: undefined

The message id or group.

Tasks

• [ ] Custom size, color, font for message
• [X] Allow x-template content
• [X] Custom duration per message
• [X] Custom actions
• [X] Option to not timeout
• [X] Options for show()
• [X] Online demo

Tasks (Outlets)

• [ ] HTML flag
• [ ] Transitions
• [X] Replace messages
• [X] Flush queue
• [X] Groups
• [X] Flush groups
• [ ] Show pending message indicator in outlet
• [ ] Message group styling