vue-toaster

A fully customizable toaster.

Demo

• register your own toast-components with the toaster
• singleton, same instance shared by all using components

Install

npm install --save-dev vue-toaster
// vue@1.0
npm install --save-dev vue-toaster@1

or include build/bundle.js.

Usage

# default is to use it as a mixin 
# in your component: 
mixins: [
  require("vue-toaster") # adds a method `toast(options)` 
  # or with bundle.js 
  window.vueComps.toaster
]
methods:
  doToast: ->
    # this will just create a `<div class="toast">{{options.text}}</div>` 
    # for each toast: 
    toast = @toast({text:"I'm toast"})
    toast.close() # to dismiss 
    # the returned object is identical with the options argument: 
    toastIn = {text:"I'm toast"}
    toastOut = @toast(toastIn)
    toastOut === toastIn # true 

For examples see dev/.

Options

The options object will be used in the toaster and then passed down to the toast. These are used by the toaster:

Name	type	default	description
component	String	"toast"	Name of the component to display
timeout	Number	2500	time in milliseconds, when a toast will be closed automatically. The timeout will be halted on mouseenter and started again on mouseleave
class	Vue class	["toast"]	class of the toast element
style	Vue Style	-	style of the toast element
cb	Function	-	will be called on close of toast

These are used in the default toast:

Name	type	default	description
text	String	-	text to display

Provide your own toast component

You can provide your own toast component with the help of the global Vue instance:

Vue.component('toast2', {template: "<div v-text='options.text'></div>",props:["options"]})
 

You can then use it in your component:

mixins: [require("vue-toaster")],
methods:{
  doToast: function() {
    @toast({text:"I'm toast",component:"toast2"})
  }
}

Provide your own toast transition

You can provide a default transition like this:

// must be a transition group
// be sure to pass down the context data
Vue.component('toaster-transition', {
  functional: true
  render: function(h,context) {
    context.data.attrs.name = "fade"
    context.data.props = {css: false}
    context.data.on = {
      enter: ...
    }
    return h "transition-group",context.data,context.children)
  }
})

Changelog

• 2.0.0
  now compatible with vue 2.0.0
  changed way of using own transition

• 1.1.0
  toast now closes on click, can be prevented by a custom toast with @click.prevent="onClick"
  added vue transition
  renamed classes option to class
  properly remove toaster from dom when last using component is destroyed

• 1.0.0
  added unit tests

Development

Clone repository

npm install
npm run dev

Browse to http://localhost:8080/.

License

Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.