Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Toast doest not appear on refresh the page. #361

Open
AlEsGoGit opened this issue Dec 22, 2022 · 3 comments
Open

Toast doest not appear on refresh the page. #361

AlEsGoGit opened this issue Dec 22, 2022 · 3 comments
Labels
Type: Bug Something isn't working

Comments

@AlEsGoGit
Copy link

Versions

  • 2.0

Describe the bug

Toast only shows the fist time the code compiles.
If you refresh the page without changing the code the toast does not show again.
If you change anything in the code and vite compiles again the toast shows once again but only one time.

Expected behavior

The toast should appear every time you refresh the page.

Steps to reproduce

Create vue 3 app and register vue-toastification.
Launch toast.info("something") in the created hook of the root component.
The toast only appears the first time you load the page.

Your Environment

Vue3+vite installation.
Trying with hmr es-builder

@AlEsGoGit AlEsGoGit added the Type: Bug Something isn't working label Dec 22, 2022
@SamyOuadhiGE
Copy link

Hey @AlEsGoGit,
Did you managed to fix it ? I have the same issue.

@john-landgrave
Copy link

I was having the same issue. It's not really a "fix", but a workaround is to put the toast call inside of a requestIdleCallBack() in your mounted (or onMounted if setup) hook. Should look something like this:

<script setup lang="ts">
    const toast = useToast();

    onMounted(() => {
        requestIdleCallBack(() => {
            toast.warning("Test");
        });
    });

</script>

@SamyOuadhiGE
Copy link

SamyOuadhiGE commented Mar 1, 2023

I was having the same issue. It's not really a "fix", but a workaround is to put the toast call inside of a requestIdleCallBack() in your mounted (or onMounted if setup) hook. Should look something like this:

<script setup lang="ts">
    const toast = useToast();

    onMounted(() => {
        requestIdleCallBack(() => {
            toast.warning("Test");
        });
    });

</script>

Hey @john-landgrave , worked for me with requestIdleCallback (on chrome at least). Thank you !
(I used requestIdleCallback with a 'b' lowercase, you may want to update your comment).

Edit : After some tests, requestAnimationFrame also seams to work. Maybe a better alternative to requestIdleCallback who lacks Safari support ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants