@Deveodk/vue-toastr

A easy to use toastr plugin inspired by CodeSeven/toastr made without jquery with pure vue.js

Demo

See a functioning demo deveo demo site

Installation

npm install --save @deveodk/vue-toastr

Usage

Bundler (Webpack, Rollup)

import Vue from 'vue'
import VueToastr from '@deveodk/vue-toastr'
// You need a specific loader for CSS files like https://github.com/webpack/css-loader
// If you would like custom styling of the toastr the css file can be replaced
import '@deveodk/vue-toastr/dist/@deveodk/vue-toastr.css'

Vue.use(VueToastr)

Browser

<!-- From CDN -->
<link rel="stylesheet" href="https://unpkg.com/@deveodk/vue-toastr/dist/@deveodk/vue-toastr.min.css"></link>
<script src="https://unpkg.com/@deveodk/vue-toastr/dist/@deveodk/vue-toastr.min.js"></script>

Configuration

The toastr defaults can be configured in the following way

Available positions:

'toast-top-right'
'toast-bottom-right'
'toast-bottom-left'
'toast-top-left'
'toast-top-full-width'
'toast-bottom-full-width'
'toast-top-center'
'toast-bottom-center'

Available types:

'success'
'error'
'info'
'warning'

import VueToastr from '@deveodk/vue-toastr'
Vue.use(VueToastr, {
    defaultPosition: 'toast-bottom-left',
    defaultType: 'info',
    defaultTimeout: 1000
})

Usage

The $toastr prototype hook and how to use it.

// Make a success toastr
this.$toastr('success', 'i am a toastr success', 'hello')

// Make a error toastr
this.$toastr('error', 'i am a toastr error', 'hello')

// Make a warning toastr
this.$toastr('warning', 'i am a toastr warning', 'hello')

// Make a info toastr
this.$toastr('info', 'i am a toastr info', 'hello')

// Make a toastr with custom properties
this.$toastr('add', {
  title: 'Heyy', // Toast Title
  msg: 'I am a custom property toastr' // Message
  timeout: 1000, // Timeout in ms
  position: 'toast-bottom-full-width', // Toastr position
  type: 'info', // Toastr type
  closeOnHover: true, // On mouse over stop timeout can be boolean; default true
  clickClose: false, // On click toast close can be boolean; default false
  // Available callbacks
  onCreated: () => console.log('toast was created'),
  onClicked: () => console.log('toast was clicked'),
  onClosed: () => console.log('toast was closed'),
  onMouseOver: () => console.log('toast was moused over'),
  onMouseOut: () => console.log('mouse left the toast')
})

example

// Using toastr in real world application
<link rel="stylesheet" href="/@deveodk/vue-toastr/dist/vue-toastr.css"></link>
<script src="/@deveodk/vue-toastr/dist/vue-toastr.js"></script>
<script>
new Vue({
  el: 'body',
  mounted: function () {
      this.showToastr()
   },
  methods: {
    showToastr: function () {
        this.$toastr('success', 'it works!', 'Yeahh')
    }
  }
})
</script>

Special thanks

A special thanks to s4l1h for creating the original package. About 30% of the source code is forked from vue-toastr

License

MIT