Have ideas to improve npm?Join in the discussion! »

    vue-toast

    3.1.0 • Public • Published

    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.

    Install

    npm i vue-toast

    DownloadsWeekly Downloads

    485

    Version

    3.1.0

    License

    MIT

    Last publish

    Collaborators

    • avatar