Toast doesn't get automatically dismissed

[fercarcedo]

Versions

• 2.0: starting with 2.0.0-beta.6 all the way to the current release as of writing, 2.0.0-beta.9

Describe the bug

A toast doesn't get automatically dismissed after the defined timeout, although clicking on the close button works as expected

Expected behavior

The toast should get automatically dismissed after the defined timeout. On version 2.0.0-beta.5 it works as expected

Steps to reproduce

1. Configure the library to use a timeout
2. Display a toast
3. Wait for the timeout to expire

const toastOptions = {
  position: "bottom-right",
  icon: false,
  timeout: 2000,
  draggabe: false
};

createApp(App).use(Toast, toastOptions);

import { useToast } from 'vue-toastification';
const toast = useToast();
toast("test");

Your Environment

• OS: Ubuntu 20.04
• Browser: Firefox 84.0. Also tested on Chrome 86.0.4240.198

[Maronato]

Hello! Thanks for reporting :)

This seems like a duplicate of #142, #137

This is not an issue with vue-toastification, but with vue, to which the solution is described here: vuejs/core#2429 (comment)

The tl;dr is that you must upgrade your vue and @vue/compiler-sfc and make sure that they are on the same version.

Below is a CodeSandbox demo showing that toasts are correctly being dismissed with vue-toastification@2.0.0-beta.9 and vue@^3.0.0-0:

If you manage to upgrade vue, @vue/compiler-sfc and still are facing issues, please put together a small reproduction repo/codesandbox so that I can investigate further. For now, I'll close this as it's not reproducible.

[fercarcedo]

For some reason I had vue 3.0.0 for both dependencies, but it didn't work. I updated the two dependencies to 3.0.4 and it all works just fine.

Thank you