An opinionated package that provides beautiful toast notifications for Laravel + Inertia.js applications. Fluent PHP API, multi-toast support, redirect-safe, with Vue 3 and React adapters.

Toast notifications can can be triggered from both your backend (PHP) and frontend (JavaScript). Use Toast::success('Saved!') in your controllers or useToast().success('Copied!') in your components — same beautiful toasts either way.

PHP:

React:

Vue:

See it in action:

• Fluent PHP API: toast('Saved!')->success() or Toast::success('Saved!')
• Vue 3 and React adapters with TypeScript support
• Position-aware with 6 positions (top-right, top-left, top-center, bottom-right, bottom-left, bottom-center)
• Tailwind CSS styling (v3 & v4 compatible)
• Client-side toast API via useToast() composable/hook
• Beautiful in/out animations.

composer require veekthoven/laravel-inertia-toast

Optionally publish the config:

php artisan vendor:publish --tag=inertia-toast-config

Vue 3:

npm install @laravel-inertia-toast/vue

React:

npm install @laravel-inertia-toast/react

Register the plugin in your app.js:

// In your resources/js/app.js

import { createApp } from 'vue'
import { InertiaToast } from '@laravel-inertia-toast/vue'

const app = createApp(App)
app.use(InertiaToast, {
    duration: 5000,
    position: 'top-right',
    maxVisible: 5,
})
app.mount('#app')

Add the <Toasts /> component to your layout:

<script setup>
import { Toasts } from '@laravel-inertia-toast/vue'
</script>

<template>
  <div>
    <slot />
    <Toasts />
  </div>
</template>

Wrap your app with <ToastProvider> and add <Toasts />:

// in your resources/js/app.tsx

import { createRoot } from 'react-dom/client';
import { ToastProvider, Toasts } from '@laravel-inertia-toast/react'

setup({ el, App, props }) {
    const root = createRoot(el);

    root.render(
        <ToastProvider
            config={{
                position: 'top-right'
                duration: 5000,
                maxVisible: 5,
            }}
        >
            <App {...props} />
            <Toasts />
        </ToastProvider>
    );
},

Since the toast components use Tailwind classes internally, you need to add the package to Tailwind's source detection so the required classes are generated.

If you use Tailwind v4, add the following @source directive to your main CSS file (e.g. resources/css/app.css):

Vue 3:

@source "../../node_modules/@laravel-inertia-toast/vue/dist/**/*.js"; 

React:

@source "../../node_modules/@laravel-inertia-toast/react/dist/**/*.js";

The relative path above assumes your CSS file is at resources/css/app.css. Adjust accordingly if your setup differs.

Or if you are still on Tailwind v3, add the following to your tailwind.config.js file.

Vue 3:

// tailwind.config.js

module.exports = {                                                                                   
    content: [
        //...

        './node_modules/@laravel-inertia-toast/vue/dist/**/*.js',

        //...
    ],
}

React:

// tailwind.config.js

module.exports = {                                                                                   
    content: [
        //...

        './node_modules/@laravel-inertia-toast/react/dist/**/*.js',
        
        //...
    ],
}

The relative paths above assume your tailwind.config.js is at the root of your project. Adjust accordingly if your setup differs.

use InertiaToast\Facades\Toast;

// In a controller
Toast::success('Profile updated!');
Toast::error('Something went wrong.');
Toast::info('Check your email for a confirmation link.');
Toast::warning('Your subscription is about to expire.');

return redirect()->route('dashboard');

// Fluent builder
toast('Profile updated!')->success();
toast('Something went wrong.')->error();
toast('Slow message.')->duration(10000)->warning();

// Direct access to Toaster
toast()->success('Quick shorthand');

// Via facade
Toast::success('Saved!', 3000); // 3 seconds

// Via helper
toast('Done!')->duration(3000)->success();

Both adapters expose a useToast() composable/hook for triggering toasts from the frontend:

<script setup>
import { useToast } from '@laravel-inertia-toast/vue'

const { success, error, info, warning } = useToast()

function handleClick() {
  success('Copied to clipboard!')
}
</script>

import { useToast } from '@laravel-inertia-toast/react'

function MyComponent() {
  const { success, error, info, warning } = useToast()

  return (
    <button onClick={() => success('Copied to clipboard!')}>
      Copy
    </button>
  )
}

Publish the config file:

php artisan vendor:publish --tag=inertia-toast-config

// config/inertia-toast.php
return [
    'duration' => 5000,         // Default auto-dismiss duration (ms)
    'position' => 'top-right',  // Toast position on screen
    'max_visible' => 5,         // Max simultaneous toasts
    'prop_key' => 'toasts',     // Inertia flash key
];

Frontend config can be passed when registering the plugin (Vue) or via the config prop on <ToastProvider> (React).