A easy to use toastr plugin in

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

See a functioning demo deveo demo site

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

MIT