Vuejs-Vue toast notification: vue-toast-notification - Yet another Vue.js Toast notification plugin.

Vue Toast Notification

downloads npm-version github-tag build license

Yet another Vue.js Toast notification plugin.

Demo or JSFiddle

Installation

# yarn
yarn add vue-toast-notification

# npm
npm install vue-toast-notification

Usage

import Vue from 'vue';
import VueToast from 'vue-toast-notification';
// Import one of available themes
import 'vue-toast-notification/dist/theme-default.css';
//import 'vue-toast-notification/dist/theme-sugar.css';

Vue.use(VueToast);
let instance = Vue.$toast.open('You did it!');
//Vue.$toast.open({/* options */});

// Close specific toast
instance.close();
// Close all opened toast immediately
Vue.$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
dismissible Boolean true Allow user close by clicking
onClick Function -- Do something when user clicks
onClose Function -- Do something after toast gets dismissed
queue Boolean false Wait for existing to close before showing new
pauseOnHover Boolean true Pause the timer when mouse on over a toast

API methods

Vue.$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
Vue.$toast.open('Howdy!');

// Can accept an Object of options
Vue.$toast.open({
    message: 'Something went wrong!',
    type: 'error',
    // all other options may go here
});

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

There are some proxy methods to make it more readable.

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

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

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

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

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

Global options

You can set options for all the instances during plugin initialization

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

Further you can override option when creating new instances

Vue.$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/[email protected]/dist/vue.min.js"></script>
<!-- Lastly add this package -->
<script src="https://cdn.jsdelivr.net/npm/vue-toast-notification"></script>
<link href="https://cdn.jsdelivr.net/npm/vue-toast-notification/dist/theme-default.css" rel="stylesheet">
<!-- Init the plugin -->
<script>
Vue.use(VueToast);
</script>

Run examples on your localhost

  • Clone this repo
  • Make sure you have node-js >=10.13 and yarn >=1.x 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

Comments

  • Enhancements
    Enhancements

    May 1, 2020

    • [x] pause timer on hover
    • [x] define positions as constants and expose them to consumer
    • [x] rename close() to dismiss() and same goes for onClose prop, [#39]
    • [x] add indefinite option, which will make toast to be visible forever until user click
    • [ ] update a running toast instance
    • [ ] toast id/group to replace existing running toast
    • [ ] check if toast is active by id
    • [ ] allow to set container, default is body
    • [ ] Animations similar to this
    • [ ] slots

    ref https://maronato.github.io/vue-toastification/

    enhancement 
    Reply
  • toast wont show again after clear() when queue:true
    toast wont show again after clear() when queue:true

    May 1, 2020

    when I logout and clear toast, I login again toast won't show up even I declare toast open when trigger login

    I figure it out what the cause is if queue is true

    bug 
    Reply
  • Provision to show long notifications in multiple lines
    Provision to show long notifications in multiple lines

    Apr 19, 2021

    I'm submitting a ... (check one with "x")

    [ ] Bug report => search github for a similar issue or PR before submitting
    [X ] Feature request
    [ ] Other, please describe
    

    Tell about your platform

    • Vue.js version : 2.6.x
    • Browser name and version : Chrome|Firefox|Edge x.x.x
    • This package version : 0.6.1

    Current behavior For very short notifications the toast looks good. But for longer notifications the toast length increases.

    Expected behavior The toast would look better if we can specify the max length of the toast so that the text will be shown in multiple lines if notification is little longer.

    Minimal reproduction of the problem with instructions Capture

    Reply
  • Using Toast in service file causes an error.
    Using Toast in service file causes an error.

    Sep 13, 2019

    Hi Ankur, Thank you for this awesome plugin.

    I want to to use toast for Axios responses in one of my service.ts file

    this is my code: main.ts

    import Vue from 'vue';
    import VueToast from 'vue-toast-notification';
    import 'vue-toast-notification/dist/index.css';
    Vue.use(VueToast, {
      position: 'bottom',
      duration: 5000,
      queue: true,
    });
    

    httpservices.service.ts

    import Vue from 'vue';
    class HttpService {
        private request (method: string, url: string, data?) {
            return axios
              .request({
                method,
                url,
                data,
              })
              .then((response) => {
                  Vue.$toast.success('success');
                  return response;
              })
              .catch((error) => {
                  Vue.$toast.error(error.response.data.errors);
              });
        }
    }
    
    

    Error: Property '$toast' does not exist on type 'VueConstructor'.

    also tried. this.$toast.error but same error.

    need-more-info 
    Reply
  • How can I use your library in component?
    How can I use your library in component?

    Jun 9, 2020

    I installed the library I added the library in main.js file like this:

    import VueToast from "vue-toast-notification";
    import "vue-toast-notification/dist/theme-default.css";
    
    Vue.use(VueAgile, VeeValidate, VueToast);
    

    Then I tried to use library in component but it doesn't work:

    methods: {
    deleteVideo(id) {
          VideoDataService.delete(id)
           
     .then(response => {
              this.videos = response.data;
              this.getAllVideos();
              this.$toast.open("You did it!");
            })
            .catch(function(error) {
              console.log(error);
            });
        },
    }
    

    How can i use your library properly in component?

    Reply
  • Help to override color
    Help to override color

    Dec 15, 2021

    I am trying to override the css colors, so far no success. Please provide the steps to make the changes,

    Thanks

    question 
    Reply
  • vue-toast-notification:1 Uncaught TypeError: (0 , t.createVNode) is not a function
    vue-toast-notification:1 Uncaught TypeError: (0 , t.createVNode) is not a function

    Sep 2, 2021

    Recently the plugin is throwing this "vue-toast-notification:1 Uncaught TypeError: (0 , t.createVNode) is not a function" error. I am using CDN with VueJS 2 CDN.

    My whole code is broken now. Capture

    Reply
  • Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': '0' is not a valid attribute name.
    Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': '0' is not a valid attribute name.

    Dec 12, 2021

    I'm submitting a ... (check one with "x")

    [x] Bug report => search github for a similar issue or PR before submitting
    [ ] Feature request
    [ ] Other, please describe
    

    Tell about your platform

    • Vue.js version : 3.2.22
    • Browser name and version : Chrome 96
    • This package version : 2.0.1

    Current behavior Whenever I call this.$toast.open('.'); I get:

    runtime-core.esm-bundler.js?5c40:6769 Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': '0' is not a valid attribute name.
        at patchAttr (webpack-internal:///./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js:473:16)
        at patchProp (webpack-internal:///./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js:672:9)
        at mountElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3946:25)
        at processElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3918:13)
        at patch (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3838:21)
        at ReactiveEffect.componentUpdateFn [as fn] (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4377:21)
        at ReactiveEffect.run (webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:195:29)
        at setupRenderEffect (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4496:9)
        at mountComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4279:9)
        at processComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4237:17)
    logError @ runtime-core.esm-bundler.js?5c40:6769
    handleError @ runtime-core.esm-bundler.js?5c40:6755
    callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:6709
    callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?5c40:6715
    invoker @ runtime-dom.esm-bundler.js?830f:350
    

    Minimal reproduction of the problem with instructions

    I just followed the instructions. I have the line above to show the toast and createApp(App).use(router).use(VueToast).mount('#app'); in main.ts

    using class components and hammer but no other libs

    need-more-info 
    Reply
  • [vue-3] Make useToast available from import
    [vue-3] Make useToast available from import

    Aug 23, 2021

    I'm submitting a ...

    [ ] Bug report => search github for a similar issue or PR before submitting
    [x] Feature request
    [ ] Other, please describe
    

    Tell about your platform

    • Vue.js version : 3.0.x
    • This package version : next

    Current behavior The $toast object is only available in components, not from imports.

    Expected behavior I would be nice to have useToast available for in .ts files - for instance in Vuex.

    example.ts

    import { useToast } from "vue-toast-notification";
    
    useToast.success("Hello world.");
    

    It should be as simple matter of exporting { useToast } in index.js and changing the .d.ts file.

    enhancement 
    Reply
  • WIP: Implement additional thems
    WIP: Implement additional thems

    Dec 12, 2019

    So I've added an option to configure available theme. I will add one more theme for sure, that is why there is WIP prefix :smile_cat: Due to #5

    Reply
  • Vue 3 support?
    Vue 3 support?

    Oct 15, 2020

    Tell about your platform

    • Vue.js version : ^3.0.0
    • Browser name and version : Chrome|Firefox|Safari x.x.x
    • This package version : 0.5.4

    Current behavior This plugin works fine with vue version < 3.0.0

    Expected behavior Upgraded to Vue3 and Vue.extend is not supported in Vue3. Also, the way to use the plugin in Vue3 is changed.

    Minimal reproduction of the problem with instructions

    • Upgrade to Vue version 3.0.0.

    @ankurk91 Can you please help me with this?

    Reply