Simple Toast Plugin For Vue.js

Simple Toast Plugin For Vue.js

A simple toast notification plugin thatĀ supports both Vue 1.x and 2.x.

Vue-Toast-Plugin

Build Status NPM Version

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, 'Information!', 'info', 1000, 100)
    },

    error () {
      this.$toast(this.$refs.error, 'Oops!', '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

Github Repository

Tags: #VueJs