I cannot use vue-toastification when the component is mounted on Laravel 8 and Vue 3

[Grzyb9k]

I want use vue-toastification in my laravel 8 blade templates. I have idea to make vue 3 component and pass to him by props notifications from laravel. I want to see notifications when site is loaded.

Unfortunately, it doesn't work for me in any way. Notifications work when will assign them, for example, to the @click event on button. However, they do not want to act on their own by calling this.$toast

version

• vue-toastification 2.0.0-rc.5
• vue 3.2.2
• Laravel 8.74

files

app.js

/* hidden other code */
import Notification from './components/Notification.vue'
import { createApp, h } from "vue";
/* hidden other code */
import Toast from "vue-toastification";
import "vue-toastification/dist/index.css";

/* hidden other code */

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

const app = createApp({})
.use(Toast)
.use(VuesticPlugin)
/* hidden other code */
.component('vue-notify', Notification);
app.config.globalProperties.$toast = toast;
app.mount("#app")

require('alpinejs');
require('./../bootstrap');

Notification.vue

<template>
</template>
<script>
export default {
    name: 'Notification',
    mounted() {
        this.$toast.info('I want this toast on load!')
    },
}
</script>

Can anyone help me with that?

[jerzy-dudzic]

I have the same issue but with Symfony 5.4 and Webpack Encore.

What I found interesting, is that when I put those notifications to mount() or setup(), they will work once after hot-reload (encore dev-server). But when I refresh the page, they don't show, even though they should because mount() and setup() are being executed again. Then when I change even a single character in the vue component, and this triggers hot reload - it shows up again just once.

Using this.toast('test') works fine every time, when triggered by a button or when triggered after fetch finishes.

There are no errors, warnings, notifications whatsoever.

It's as if toastification would cache somewhere that this particular toast from this particular place in js code has been shown before and it ignores it.

[msch-alpgis]

Hi,

I've more or less the same setup with Laravel 9 and Vue 3. Found a (ugly) workaround. To show the toasts, put the toast method call into a timeout.

MyComponent.vue

<template>
</template>

<script>
import { useToast } from "vue-toastification";

export default {
    props: ["level", "content"],
    setup() {
        const toast = useToast();
        return { toast };
    },
    mounted() {
        setTimeout(() => {
            this.toast[this.level](this.content);
        });
    }
};
</script>

[missingno-io]

@msch-alpgis I have almost the same setup and I thought I was crazy because there is literally no indication of it not working, this workaround solved my problem as well... Strange issue.