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


6171.1.02 years ago4 years agoMinified + gzip package size for @deveodk/vue-toastr in KB



npm vue2

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


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'



<!-- 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>


The toastr defaults can be configured in the following way

Available positions:


Available types:

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


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')


// 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>
new Vue({
  el: 'body',
  mounted: function () {
  methods: {
    showToastr: function () {
        this.$toastr('success', 'it works!', 'Yeahh')

Special thanks

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




If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.