Installation

You need two packages:

• the Laravel package
• the frontend package for your framework

Backend Package

Handles the Laravel helper, facade, and shared Inertia toast data.

Frontend Plugin

Renders the toast UI and confirmation dialog in Vue or React.

Simple Setup

Laravel works automatically. On the frontend, you only need one setup step.

Package

Use the React package in React apps and the Vue package in Vue apps.

Requirements

• PHP >= 8.1
• Laravel 10, 11, 12, or 13
• inertiajs/inertia-laravel ^1.3, ^2.0, or ^3.0
• Vue 3 with @inertiajs/core ^2.0 or ^3.0 and @inertiajs/vue3 ^2.0 or ^3.0
• React 18 or 19 with @inertiajs/react ^2.0 or ^3.0

1. Install the Laravel package

composer require erag/laravel-inertia-toast

Laravel package discovery registers the service provider automatically. You do not need to register any middleware manually.

2. Install the frontend package

Install the package for the frontend you use.

Vue

npm install ./vendor/erag/laravel-inertia-toast/vue

React

npm install ./vendor/erag/laravel-inertia-toast/react

If you publish these packages to your own registry, install from there instead.

3. Register the frontend package

Add the frontend package in your Inertia bootstrap file, usually resources/js/app.js or resources/js/app.ts.

Vue

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);
    },
});

React Provider

import { createInertiaApp } from '@inertiajs/react';
import { InertiaToastProvider } from '@erag/inertia-toast-react';
import '@erag/inertia-toast-react/style.css';

createInertiaApp({
    withApp(app) {
        return (
            <InertiaToastProvider position="bottom-right">
                {app}
            </InertiaToastProvider>
        );
    },
});

React Initializer

import initializeToast from '@erag/inertia-toast-react';
import '@erag/inertia-toast-react/style.css';

initializeToast({
    position: 'bottom-right',
});

If you are using React, prefer the provider setup. Use the initializer only if you do not want to wrap the app tree.

Verify the setup

If toasts are not showing, check these:

• the Vue plugin or React provider/initializer is registered
• the matching package stylesheet is imported
• the request ends with an Inertia response or redirect
• your app is bootstrapped through the standard Inertia entry file