Neoclassical Programming Multitude

    vue-toast-notification
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.1 • Public • Published

    Vue Toast Notification

    downloads js-delivr npm-version github-tag build license ts

    Yet another Vue.js Toast notification plugin.

    Demo or JSFiddle

    Version matrix

    Vue.js version Package version Branch
    2.x 1.x 1.x
    3.x 2.x master

    Installation

    # yarn
    yarn add vue-toast-notification@^2.0
    
    # npm
    npm install vue-toast-notification@^2.0

    Usage

    import {createApp} from 'vue';
    import VueToast from 'vue-toast-notification';
    // Import one of the available themes
    //import 'vue-toast-notification/dist/theme-default.css';
    import 'vue-toast-notification/dist/theme-sugar.css';
    
    const app = createApp({});
    app.use(VueToast);
    app.mount('#app');
    
    //Vue.$toast.open({/* options */});
    let instance = app.$toast.open('You did it!');
    
    // Force dismiss specific toast
    instance.dismiss();
    // Dismiss all opened toast immediately
    app.$toast.clear();

    Available options

    The API methods accepts these options:

    Attribute Type Default Description
    message String -- Message text/html (required)
    type String success One of success, info, warning, error, default
    position String bottom-right One of top, bottom, top-right, bottom-right,top-left, bottom-left
    duration Number 3000 Visibility duration in milliseconds, set to 0 to keep toast visible
    dismissible Boolean true Allow user dismiss by clicking
    onClick Function -- Do something when user clicks
    onDismiss Function -- Do something after toast gets dismissed
    queue Boolean false Wait for existing to dismiss before showing new
    pauseOnHover Boolean true Pause the timer when mouse on over a toast

    API methods

    app.$toast.open(options)

    This is generic method, you can use this method to make any kind of toast.

    // Can accept a message as string and apply rest of options from defaults
    app.$toast.open('Howdy!');
    
    // Can accept an Object of options
    app.$toast.open({
        message: 'Something went wrong!',
        type: 'error',
        // all of other options may go here
    });

    app.$toast.success(message,?options)

    There are some proxy methods to make it more readable.

    app.$toast.success('Profile saved.', {
        // optional options Object
    })

    app.$toast.error(message,?options)

    app.$toast.warning(message,?options)

    app.$toast.info(message,?options)

    app.$toast.default(message,?options)

    Global options

    You can set options for all the instances during plugin initialization

    app.use(VueToast, {
        // One of the options
        position: 'top'
    })

    Further you can override option when creating new instances

    app.$toast.success('Order placed.', {
        // override the global option
        position: 'bottom'
    })

    Install in non-module environments (without webpack)

    <!-- Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
    <!-- Lastly add this package -->
    <script src="https://cdn.jsdelivr.net/npm/vue-toast-notification@2"></script>
    <link href="https://cdn.jsdelivr.net/npm/vue-toast-notification@2/dist/theme-sugar.css" rel="stylesheet">
    <!-- Init the plugin -->
    <script>
        const app = Vue.createApp({});
        app.use(VueToast);
        app.mount('#app');
    </script>

    Run examples on your localhost

    • Clone this repo
    • Make sure you have node-js >=14.15 and yarn >=1.22 pre-installed
    • Install dependencies - yarn install
    • Run webpack dev server - yarn start
    • This should open the demo page at http://localhost:9000 in your default web browser

    Acknowledgements

    License

    MIT License

    Install

    npm i vue-toast-notification

    DownloadsWeekly Downloads

    12,131

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    47.8 kB

    Total Files

    26

    Last publish

    Collaborators

    • ankurk91