Router push and prompt notification issues in Laravel and VUE 3

Question

I have a problem, when switching between components using router.push, the Toast notification is not shown. I have a user edit view and what I want to do is redirect to the user's profile after editing and show a toast notification immediately.

Roughly speaking, I have the following:

Routes.js

import { createRouter, createWebHistory } from 'vue-router';

//Modules
import DashboardIndex from './components/modules/dashboard';
//Users
import UsersIndex from './components/modules/users';
import UsersCreate from './components/modules/users/create';
import UsersEdit from './components/modules/users/edit';
import UsersView from './components/modules/users/view';


export default new createRouter({
    history: createWebHistory(),
    routes: [
        { path: '/', name: 'dashboard.index', component: DashboardIndex },
        { path: '/users',  name: 'users.index', component: UsersIndex},
        { path: '/user/create',  name: 'user.create', component: UsersCreate},
        { path: '/user/edit/:id',  name: 'user.edit',  props: true, component: UsersEdit},
        { path: '/user/:id',  name: 'user.view',  props: true, component: UsersView},
    

    ]
})

Combinable/user.js

import axios from 'axios';
import { useRouter } from 'vue-router'
import { useToast } from 'primevue/usetoast';

export default function useUsers() {

    const users = ref([])
    const user = ref([])
    const errors = ref([])
    const router = useRouter()
    const toast = useToast()
    /**
     * 
     * All Users
     * 
     */
    const getUsers = async () => {
       const response = await axios.get('/admin/users')
       users.value = response.data
    }
    /**
     * 
     * Create User
     * 
     */
    const storeUser = async (data) => {
        try {
            let response = await axios.post('/admin/user', data)
            await router.push({ name: 'user.view',  params: { id: response.data.id } })
        } catch (e) {
            if (e.response.status === 422) {
                errors.value = e.response.data.errors    
            }
        }
 
    }
    /**
     * 
     * Create User
     * 
     */
     const updateUser = async (id) => {
        try {
            //this.showToast = true;
            let response = await axios.put(`/admin/user/${id}`, user.value)
            router.push({ name: 'user.view',  params: { id: response.data.id } })
            toast.add({severity:'success', summary: 'Éxito', detail: 'El Usuario ha sido modificado', life: 3000})
        } catch (e) {
            if (e.response.status === 422) {
                errors.value = e.response.data.errors    
            }
        }

    }
     /**
     * 
     * View User
     * 
     */
    const showUser = async (id) => {
        let response = await axios.get(`/admin/user/${id}`)
        user.value = response.data

    }
 
    /**
     * 
     * Delete User
     * 
     */
    const destroyUser = async (id) => {
        await axios.delete(`/admin/user/${id}`)
    }
     

    return {errors, users, user, getUsers, storeUser, updateUser, showUser, destroyUser}

}

View.vue

<template>
  <div class="container-fluid">
    <Toast position="bottom-right"/>
USER PROFILE
                </div>
</template>
<script>
    import useUsers from '../../../composables/users'
    import { onMounted } from 'vue';

    export default {
        props: {
            id: { required: true }
        },
     
        setup(props) {

            const { user, showUser } = useUsers();

            const showUserMounted =  async () => {
                await showUser(props.id)
            }
            onMounted(showUserMounted)
           
            return { user }
        }
    }
    </script>

Important fact, I'm using Prime VUE.

Also, I commented that when I go to toast.add({severity:'success', Summary: 'Success',detail: 'The User has been Modified', life: 3000}) In showUser, toast messages can be displayed nicely.

I think what I need is a flag that changes the value in the updateUser method (e.g. showToast = true) and from the showUser method verify if it is true and if so, then does toast.add but I don't know how to do it in the end.

Thank you so much.

Answer 1

Using pinia for store alerts you can access alerts across the app:

import { defineStore } from "pinia";
import { useToast } from "primevue/usetoast";

export const useAlertStore = defineStore({
    id: "alert",
    state: () => ({
        toast: useToast(),
    }),
    actions: {
        success(title, message) {
            this.toast.add({
                severity: "success",
                summary: title,
                detail: message,
                life: 3000,
            });
        },
        info(title, message) {
            this.toast.add({
                severity: "info",
                summary: title,
                detail: message,
                life: 3000,
            });
        },
        warn(title, message) {
            this.toast.add({
                severity: "warn",
                summary: title,
                detail: message,
                life: 3000,
            });
        },
        error(title, message) {
            this.toast.add({
                severity: "error",
                summary: title,
                detail: message,
                life: 3000,
            });
        },
    },
});

Then for example my login function:

const alert = useAlertStore();

async function login() {
    const authStore = useAuthStore();
    await authStore.login(formData.email, formData.password);
    alert.success(
        t("alerts.loginTitle"),
        t("alerts.user") + `${authStore.user.name} ` + t("alerts.loginMessage")
    );
}

Finally add the Toast component to your App.vue file:

<template>
    <Toast />
    <router-view />
</template>