vue-toast

toasts for vuejs

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-toast
15123.1.06 years ago7 years agoMinified + gzip package size for vue-toast in KB

Readme

vue-toast
Toasts for Vue 2. (Vue 1)
How does it work? Look it here.

Usage

Install:
npm i vue-toast

Import:
import 'vue-toast/dist/vue-toast.min.css'
import VueToast from 'vue-toast'

new Vue({
  template: "<div> <vue-toast ref='toast'></vue-toast> </div>",
  components: { VueToast },
  mounted() {
    const toast = this.$refs.toast

    toast.showToast('Show me toast')
    toast.showToast('Show me toast again!')
  }
})

Global
<link rel="stylesheet" href="./path/to/vue-toast.min.css" charset="utf-8">
<script src='./path/to/vue-toast.min.js'></script>
// it available in window.vueToasts.default

API

  • showToast(string, {}) - main function that generates toast with some settings of instance toast and shows him.
  • setOptions({}) - function for changing settings of component.
  • closeAll({}) - function for close all toasts.

Settings

Funcion setOptions({}) lets to change settings of component.
  • position {String} position of component | default: 'left bottom' | possible 'left, right top, bottom'
  • maxToasts {Number} max toasts number | default: 6

Funcion showToast(string, {}) lets to change settings of current toast.
  • theme {String} style for toast | default: default | possible: info warning error success
  • timeLife {Number} time of life for current toast
  • closeBtn {Boolean} turn off|on button for close toast and disabled|enabled "timeLife"

Example

Look here.