Vue-Toast-Plugin

A simple toast plugin for Vue.js.

Demo

Demo

Features

• Supports both Vue 1.x and 2.x
• Simple

Installation

npm i vue-toast-plugin

Usage

Need to use with webpack because css is imported in js for convenient.

index.js

import Vue from 'vue'
import Toast from 'vue-toast-plugin'
 
Vue.use(Toast)

App.vue

export default {
  methods: {
    success () {
      this.$toast(this.$refs.success, 'Wonderful!', 'success')
    },
 
    warning () {
      this.$toast(this.$refs.warning, 'Attention!', 'warning', 3000)
    },
 
    info () {
      this.$toast(this.$refs.info, 'Infomation!', 'info', 1000, 100)
    },
 
    error () {
      this.$toast(this.$refs.error, 'Opps!', 'error', 2000, 500, 600)
    }
  }
}

Options

Option	Description	Value	Default
el	target element
text	content of the toast
type	type of the toast	'success' 'warning' 'info' 'error'
duration	time before the toast vanishes, in millisecond		4000
top	the distance between the top of the body and the toast element, in px		right of the target element
left	the distance between the left of the body and the toast element, in px		bottom of the target element

License

MIT