Simple Toasts Made Easy in Laravel/Vue/Inertia.js

When working with forms in Vue.js and Laravel, having a pop-up notification for errors enhances the user experience. I prefer using the open-source and free Notyf package for this purpose.

Key Requirements:

1. Sound Notifications: Add a sound to both error and success messages.
2. Persistent Error Messages: Errors should remain visible until manually closed by the user, when new errors are submitted, or when the user navigates to a new page.

To implement this, I use a helper class toast.js as a wrapper around the Notyf package.

import {Notyf} from "notyf";
import 'notyf/notyf.min.css';


export class Toast {
    constructor(){
        this.notyf = new Notyf({
            duration: 3000,
            position: { x: 'right', y: 'top'},
            types: [
                {
                    type: 'warning',
                    background: 'orange',
                    icon: {
                        className: 'material-icons',
                        tagName: 'i',
                        text: 'warning'
                    }
                },
                {
                    type: 'error',
                    background: 'indianred',
                    duration: 0,
                    dismissible: true,
                    icon: false,
                }
            ]
        });
    }

    clear() {
        this.notyf.dismissAll();
    }

    success(message) {
        this.notyf.dismissAll();
        this.notyf.success(message);
        // if you don't want to have audio, remove below lines
        // otherwise adjust path
        const audio = new Audio('/path/to/your/success.mp3');
        audio.play();
    }

    errors(errors) {
        this.notyf.dismissAll();
        Object.values(errors).forEach((value) => {
            this.notyf.error({
                message: value,
            });
        });
        // if you don't want to have audio, remove below lines
        // otherwise adjust path
        const audio = new Audio('/path/to/your/error.mp3');
        audio.play();
    }
}

In app.js I instantiate the Toast object like this:

import { Toast } from './helper/toast';

const toast = new Toast();

createInertiaApp({
    progress: {...},
    resolve: {...},
     setup({ el, App, props, plugin }) {
        const vueApp = createApp({ render: () => h(App, props) });

        vueApp
            .use(plugin)
            .use(ZiggyVue)
            .provide('toast', toast)
            .component("Link", Link)
            .mount(el);

        // clear messages when moving to new page
        router.on('start', (event) => {
            toast.clear();
        });
    },
})

Using the provide function makes it easy to maintain the same instance of Notyf across all components. This ensures that toast notifications are properly removed. The router.on part is necessary, to clear any messages whenever we redirect to another page.

For my components, I use the Intertia.js form helper to submit my forms. The code to utilize toast.js looks like this:

const toast = inject('toast');

const submit = () => {
  form.post(route('dashboard.seals.order.completed'), {
    preserveScroll: true,
    onError: page => {toast.errors(["My error message here..."])}
  });
}