Laravel Inertia ToastNotifications and confirmation dialogs for Laravel + Inertia + Vue 3 + React

Dynamic toast messages and confirm dialogs for your Laravel Inertia app.

Get Started

React Usage

Low Dependency Surface

Built to fit the Laravel and Inertia stack you already use without adding heavy extra setup.

Almost Zero Config

Add the package, register it once, and it works with your app structure in a familiar way.

Laravel Helper

Flash toast payloads from controllers with a single toast() call.

Inertia Flash

Share toast data through Inertia without page-level wiring.

Vue Setup

React Setup

Use the provider or initializer once in your React app.

Typed Frontend API

Use typed plugin options, positions, modal options, and composables in Vue 3 or React projects.

Confirm Flows

Handle delete and danger actions with promise-based confirmations.

Quick example

Laravel Controllerresources/js/app.tsVue ComponentReact Page

php

public function store()
{
    // Persist your record...

    toast('Post created successfully', 'success', 'Saved');

    return redirect()->route('posts.index');
}

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import ToastPlugin from '@erag/inertia-toast-vue';
import '@erag/inertia-toast-vue/style.css';

createInertiaApp({
    resolve: (name) => {
        const pages = import.meta.glob('./Pages/**/*.vue', { eager: true });
        return pages[`./Pages/${name}.vue`];
    },
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ToastPlugin, {
                position: 'bottom-right',
            })
            .mount(el);
    },
});

vue

<script setup lang="ts">
import { useConfirmation, useToast } from '@erag/inertia-toast-vue';
import { router } from '@inertiajs/vue3';

const { confirm } = useConfirmation();
const toast = useToast();

const showToast = () => {
    toast.success('Profile updated successfully', 'Saved');
};

const destroyPost = async (id: number) => {
    const accepted = await confirm({
        title: 'Delete post',
        message: 'This action cannot be undone.',
        type: 'danger',
        confirmText: 'Delete',
    });

    if (!accepted) {
        return;
    }

    router.delete(route('posts.destroy', id));
};
</script>

<template>
    <button type="button" @click="showToast">
        Show toast
    </button>
</template>

tsx

import { router } from '@inertiajs/react';
import { useConfirmation, useToast } from '@erag/inertia-toast-react';

export default function PostsIndex() {
    const toast = useToast();
    const confirmation = useConfirmation();

    const showToast = () => {
        toast.success('Profile updated successfully', 'Saved');
    };

    const destroyPost = async (id: number) => {
        const accepted = await confirmation.confirm({
            title: 'Delete post',
            message: 'This action cannot be undone.',
            type: 'danger',
            confirmText: 'Delete',
        });

        if (!accepted) {
            toast.info('Delete cancelled', 'Cancelled');
            return;
        }

        router.delete(route('posts.destroy', id));
    };

    return <button onClick={showToast}>Show toast</button>;
}

All toast props are dynamic

The Laravel helper supports full per-toast customization:

php

toast(
    string $message,
    string $type = 'success',
    ?string $title = null,
    int $duration = 3000,
    ?string $position = null
);

That means:

message is the main text shown in the toast
type changes the variant like success, error, warning, or info
title adds an optional heading
duration controls auto close time in milliseconds
position can override the default plugin position for one specific toast

Full dynamic example

php

public function store()
{
    // Persist your record...

    toast(
        message: 'Post created successfully',
        type: 'success',
        title: 'Saved',
        duration: 3000,
        position: 'top-right',
    );

    return redirect()->route('posts.index');
}

With the same helper, you can also send different kinds of toasts without changing frontend setup:

php

toast('Draft saved automatically', 'info', 'Auto Save', 2500, 'bottom-right');
toast('Unable to publish post', 'error', 'Publish failed', 5000, 'top-center');
toast('Connection lost', 'warning', 'Network issue', 0, 'bottom-center');

Why this package

Laravel Inertia Toast connects Laravel flash messages to an Inertia-powered Vue 3 or React UI without extra wiring in every page.

It is built for apps that want:

a simple backend helper for redirect-based notifications
a Vue or React API for client-side toasts
a reusable confirmation modal for destructive actions
automatic sharing through the Laravel web middleware group
minimal app-level configuration
dynamic props for every individual toast