shakee93/vue-toasted

🖖 Responsive Touch Compatible Toast plugin for VueJS 2+

Hi there 👋

It's Shakeeb. I love building backend and frontend stuff. I have been doing this for 8+ years and still strong 💪

vue-toasted's Issues

Feature Request: Adjust Offset

Great Work !!!

Hopefully you can add a way to adjust the offset, or at least an option for no offset at all to make it work both as a toast and snackbar.

Error when using custom toast: Cannot read property 'push' of undefined

First, thanks for an excellent project, this is the best Vue toast library out there.

I seem to be getting the following error when using a custom toast.

This didn't happen in 1.1.15, I just upgraded today to 1.1.18, tested and the error occurs in 1.1.16 as well. I reworked this code from an older style but I still get the error.

TypeError: Cannot read property 'push' of undefined at _show (eval at <anonymous> (http://localhost:8080/app.js:7718:1)

I tried to make a jsfiddle for this, it much easier to reproduce in a brand new vue init webpack

As you can see I have defaults set for normal toasts and I register a global toast. Add this to a boilerplate vue-cli main.js to reproduce along with the App.vue below.

Vue.use(Toasted, {
  position: 'top-right',
  duration: 5000,
  theme: 'primary'
})
Vue.toasted.register('fooNotification',
  (thisVue) => {
   // Normally I use thisVue in here to resolve some routes from thisVue.$router
    var toastContent = '<p>some toast content</p>'
    return toastContent
  },
  {type: 'info',
    position: 'bottom-right',
    duration: null,
    className: 'foo',
    onComplete: function () {
      // foo
    },
    action: {
      text: 'X',
      onClick: (e, toastObject) => {
        // foo
        toastObject.goAway(0)
      }
    }
  }
)

I activate this global toast in App.vue as part of the created hook. The error occurs regardless of where/when I activate the toast.

<template>
  <div id="app">
  </div>
</template>

<script>
export default {
  name: 'app',
  methods: {
    fooNotification: function () {
      this.$toasted.global.fooNotification(this)
    }
  },
  created: function () {
    this.fooNotification()
  }
}
</script>

Thanks for taking a look.

typeof returns 'object' instead of 'array' in createAction

This action.class option is undocumented as far as I can tell, but it is a valuable feature for adding selectors for test automation.

In the createAction function, there is a switch on typeof action.class that then expects either a string or array, but typeof only returns object for arrays. Using a string as a fallback works, but fixing this would require additional logic to check if the object is an array.

vue-toasted/src/js/show.js

Line 234 in c9bba80

switch (typeof action.class) {

Show/hide notification

is it possible to create a notification and when we need we can call show it or hide it.

at the moment the only solution I've found is to call this.$toasted.clear() but it will clear all notifications, not the one I am dealing with.

thanks for your time, really nice plugin

License?

Hey, very nice and useful library. However, the license is unclear. Would you consider adding it?

Featured Request: Block UI

Provide the option to block the rest of the UI when a notification has an action to prevent the user from clicking somewhere else why an action needs to be taken.

Right now this can be accomplished by adding a css class to the toasted container, and then styling that class to block everything else, but a simple boolean in options would be nice.

Font Awesome 5

Any plan to support Font Awesome 5 icon?

I manage to hack up a solution, but it would be great to have official support for it.

Use the following code to load Font Awesome 5 Icon with vue-toasted.

import fontawesome from '@fortawesome/fontawesome'
import faSolid from '@fortawesome/fontawesome-free-solid'

Vue.toasted.show(`${fontawesome.icon(faSolid.faCoffee).html} Hello`, {
  type: 'success',
  duration: 3000
})

For spacing and margin, include the following css.

.toasted-container .toasted > svg {
  margin-right: .5rem;
  margin-left: -.4rem;
}

https://code.luasoftware.com/tutorials/vuejs/vue-toasted-with-font-awesome-icon/

Wrong description for onComplete option

The description in the README of onComplete is wrong.

Calling goAway() on global toast causes "Cannot read property 'includes' of undefined" and toast does not clear

It looks like the instance.cached_options object is empty on global toasts.

For the moment I just modified the if in _goAway to check if position is defined and avoid the error:
if (instance.cached_options.position && instance.cached_options.position.includes('bottom')) {

This is the definition of the global toast done in main.js right after setting up Toasted.

Vue.use(Toasted, {
  position: 'top-right',
  duration: 5000,
  theme: 'primary'
})
Vue.toasted.register('cookieNotification',
  (thisVue) => {
    // Use thisVue instance to resolve some routes in here
    var toastContent = 'some notification content'
    return toastContent
  },
  {type: 'info',
    position: 'bottom-right',
    duration: null,
    className: 'cookie-alert',
    onComplete: function () {
      var d = new Date()
      d.setTime(d.getTime() + (14 * 24 * 60 * 60 * 1000))
      var expires = 'expires=' + d.toUTCString()
      document.cookie = 'cookieNotice=true;' + expires + ';path=/'
    },
    action: {
      text: 'X',
      onClick: (e, toastObject) => {
        var d = new Date()
        d.setTime(d.getTime() + (14 * 24 * 60 * 60 * 1000))
        var expires = 'expires=' + d.toUTCString()
        document.cookie = 'cookieNotice=true;' + expires + ';path=/'
        toastObject.goAway(0)  //This is where the issue occurs
      }
    }
  }
)

Feature request: global toast handler

Hi,

I really like your project!

At the moment I'm implementing error messages in a web application. The problem is that sometimes the errors have specific properties I want to "toast" and sometimes I just want to print out a generic error message.

I could treat every single error. But this would result in repetitive code. What I really need is something like an function which would be called after invoking a new toast:

function handleError(error) {
  if (error.specificProperty) {
    return error.specificProperty
  }
  return "An error occured."
}

It would be neat If I could pass a function like this to the options object of vue-toasted and every toast (or just errors) could be handled with this function.

How to use multiple fontawesome classes for icon?

I'd like to do this: icon : 'fa-spinner fa-spin', but it doesn't work. Is it possible to have multiple classes for the icon option?

No style...

The code below renders the toast without the border. Should I include some css or something?

    this.$toasted.show('Posted!', {
      theme: 'outlined',
      position: 'top-right',
      duration: 2000
    })

Feature request: Open href in new window

When specifying an href it would be nice to also add a target:

action: [
  {
    text: 'Google',
    href: 'http://www.google.nl',
    target: '_blank'
  }
]

How to clear all toasted in single click

Need a option for close all opened toast with single function or single click?

Babelify vue toasted ?

Hello,
I'm using this component in my vueJs project, but apparently there are Object.assign method which are not polyfilled in your min.js.
Is it possible to babelify it ?

Move Velocity and Hammerjs from the dev deps to the deps

Because on the first look the empty deps mean that the library doesnt have a deps

Compability with vue-fontawesome

I am using the vue-fontawesome components for all the icons in my project, so is there a way to use this with it?

The component looks like this:
<font-awesome-icon :icon="['far', 'trash-alt']"></font-awesome-icon>

vue-fontawesome

Change word-break to keep-all

I like using this plugin, but i don't think it should break the words with the word-break: break-all,
its not aesthetically pleasing

Cannot show different messages in global toast

When I register a global toast like this:

Vue.toasted.register('my_app_error', message => {
  return message || 'Oops.. Something Went Wrong..';
}, {
  type: 'error'
});

It works fine if I use this:

this.$toasted.global.my_app_error("Hello");

However if I subsequently call the toast with a different message, the first message is displayed instead:

this.$toasted.global.my_app_error("Bye Bye"); // Toast shows "Hello"

It seems like the message is being cached.

Repro JSFiddle link: https://jsfiddle.net/q7f0Lmf5/1/

Used in nuxt.js when the error.

Trigger onComplete event when goAway function is called

In order do allow user to close toaster we want to add action for that. If we call goAway function when action is clicked onComplete is never fired, and we relay heavily on onComplete callback.
It would be great if this feature could be added.

Only one toast at a time

Is there a way to globally prevent that no more than a single toast is shown simultaneously? I'm trying to prevent this from happening:

I know I could just use the recently-added clear method but it seems a bit too overwhelming to have to make that call each time I trigger a toast. I was wondering if I could clear all toasts as soon as a new one is shown.

Not worked in QQBrowser for Android

it thows error in QQBrowser for Android. And worked normally in other browsers

Not worked in QQBrowser and UCBrowser for Android

the component is cool, but it doesn't work in QQBrowser and UCBrowser for Android. It worked normally in mobile chrome browser.

custom template

Hi, I have 2 questions:

1. is there a option to setup custom template for toasts? for example when I call success message: this.$toasted.success('Added succesfully') I would like to add some icon from fontawesome...
2. is there a option to add 'on-click' handler for toast to close it ?

support router-link in toasts

Please add support of router-link in toasts.
For example when creating a user named "Milad", toast text should be "User Milad created successfully" and "Milad" should be linked to "users/10".

position error

When I set the screen to the Iphone 6 ,toast will always be shown at the bottom,set position has no effect.

Showing toastr message after redirect

Hi @shakee93,

Thank you for amazing plugin for vuejs. I have specific need and I am unable to do this using your plugin.
I want to show toastr message once I redirect a route using router-link in VueJs, Let's put this into an example, After user is created I want to redirect user to all users list and show toastr of success message, could you please guide me how can I achieve this.

Thank you.

Request: Typescript types/definition files

This is a great library, that I'd love to use in my project, however, my project is entirely Typescript - and I'm still a bit of a TS noob, so I'm not entirely sure how to create TS definitions that also interact with the Vue plugin system.

I've tried some permutations, but each one falls over at some point - from compilation all the way to runtime.

I think right now, the biggest problem for me is that TS can't seem to pick up the this.$toasted variable, even though I'm following https://vuejs.org/v2/guide/typescript.html#Augmenting-Types-for-Use-with-Plugins and basically copied what Vue-Router did.

If there are any TS devs with more experience pulling 3rd party plugins in, I'd be happy to get something running and do a PR

Dismiss / Close button

Thank you for releasing this plugin - very nice. I noticed for 'infinite' duration toasts, you can dismiss by clicking and dragging the toast to the side. Is there an option to display a 'close' button?

The size of min file?

Just noticed the size of min file is 26.6kb from the dist folder? Is it really true or am I interpreting incorrectly?

No link to pay shakee93 a coffee

This is unacceptable, how there is no link to pay you a cup of tea, coffee or a bear?

Proposed solution: Please add a BTC address or paypal for donations.

Thank you for this repo!

onComplete is not called if toast is closed using goAway

The onComplete callback is successfully called after the toast is closed by its own, but isn't called when the toast is closed using goAway function. Is it expected behavior?

jquery - dependency was not found ???

This dependency was not found:

• jquery in ./~/velocity-animate/velocity.js

Velocity is an animation engine with the same API as jQuery's $.animate(). It works with and without jQuery.

Download Velocity, include it on your page, and replace all instances of jQuery's $.animate() with $.velocity().

can not set global options if I use script tag for vue.

// register plugin if it is used via cdn or directly as a script tag
if (typeof window !== 'undefined' && window.Vue) {
    window.Vue.use(Toasted);
}

Vue.use automatically prevents you from using the same plugin more than once, so calling it multiple times on the same plugin will install the plugin only once.

so I can not set global options by Vue.use(Toasted, options).

How to use without npm or nodejs.

I have a light web app which contains just one html and few css and js files. I don't want to install npm, because it is not necessary.

So, How could I use this beautiful lib with out npm? I want it to act as Jquery or vue, which just include a few of js and css files, no npm, no nodejs.

Don't show toastr when Session expires

Hi @shakee93,

I want to clear all previous toaster messages if session expires, for example, let's say the session expires and if user clicks on any link then User is redirected to Login page with toastr being shown with errors message, but I don't want to show that error toastr instead I am showing some other message, could you help me achieve this?

Thank you,

Singleton Option: There's no delay between toasts.

When I show multiple toasts in quick succession of each other with the singleton option set to true, the toasts quickly flash past leaving only the last one in the sequence. This makes it near impossible to read the messages all the toasts save the very last one.

I suggest that the toasts be displayed one by one. They would use the normal delay, fade away, and then after a configurable delay the next toast would be displayed.

Nuxt.js <3 Toasted

Hi! Just wanted to inform you we have updated @nuxtjs/toast module to 2.0.0 using toasted. This module helps users quickly adding vue-toasted to their Nuxt project. Would be awesome if you can add a link to module in official README.

Thanks.

Mobile toast position

Thanks for this amazing add-on! It would be great to have an option to select the position of toasts on mobile i.e. top or bottom.

Full width option

Really like this plugin! Great Job!

I would like to have a full width option where the notification is aligned at the top. Is this possible?

minified/production jQuery undefined error.

Hi,

We are using jQuery 3.1.1 and getting "Uncaught TypeError: Cannot read property 'jQuery311050336921825352572' of undefined" when running gulp mode in production.

Can you kindly look into this.

Thanks

mobile position off screen

On the demo site it seems when it comes from the bottom it is not fixed to viewport but the page height, thus appearing beneath the screen area and invisible. at least it did after scrolling around a few times.

Mobile toasts not appearing at bottom

I know from reading the issues here and testing the demo site that the toasts are supposed to appear full width at the bottom of the page while on mobile. However on my site the config position is retained regardless of device or screen width.

My site is using Bootstrap 4. How can I get this behavior?

[Request] Bower package

Hello! Can you please consider adding this repo to bower?

Best

Cannot set custom message for global toasts

If I register a global toast as follows:

Vue.toasted.register('error', 'Error', {
  type: 'error',
  icon: 'exclamation-circle',
  iconPack: 'fontawesome',
  position: 'bottom-right',
  duration: 3000,
});

And then I call the toast with a custom message (from the example in the README):

this.$toasted.global.error({ message: 'My custom error message' });

I get a toast which says Error, instead of My custom error message.

However, if I register the global toast with a function instead of a string, it works.

Is this intentional or a bug?

Not showing on small screen

All toasted messages disappear when screen width is > 600px and reappears when > 992px.

How to show two toasts with different layout options at the same time

How to show two(or more) different toats with different UI settings (ex: container position) at the same time. Currently, if you show two toasts with different options both will inherit one set of options,

ex: if you go to the demo page and set the duration to 1min and then click on 'Launch Toast' it will appear at the position you selected, now select different position and also select full width option on. and click on 'Launch Toast' you will see all the toasts (previously shown and the new one) will be full width and will also be moved to the new position. Ideally already shown toasts should keep there settings and positions regardless of the new toast settings.

This is very useful in asynchronous calls to back and show different messages to the UI.
It, however, retain the theme without affecting so I think you can make it work for other options (such as position and full-width) as well.

Use case:
we want to show action based toast at the center of the screen without full-width and other error and notifications at the bottom of the screen with full-width, but in current if a notification comes up while user action toast is visible, both will go to the bottom of the screen and will be full-width which is not user experience as suddenly it changes where user needs to click on.

Clear toasts when route changes

I don't know if this is already possible or it's a possible future feature but it would be very useful to be able to clear all toasts when the page changes.

Let's say you are showing a success message in a form and you have a call to action to "proceed" ... The message will stay there indefinitely unless you manually trigger something that clears it.

It would be awesome if we could somehow bind it to route changes.

hello. can you add a postion : top-center

I want to use the toast in the position: top-center , I wish you can add this. Thanks