> ## Documentation Index
> Fetch the complete documentation index at: https://veekthoven-laravel-inertia-toast-24-61.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Installation

> Install and configure Laravel Inertia Toast for your Laravel + Inertia.js application

Laravel Inertia Toast consists of three packages: a PHP backend package and two frontend adapters (Vue 3 and React). You need to install the PHP package and the adapter for your frontend framework.

## Installation

<Steps>
  <Step title="Install the PHP package">
    Install the Laravel package via Composer:

    ```bash theme={null}
    composer require veekthoven/laravel-inertia-toast
    ```

    The service provider and facade are automatically registered via Laravel's package discovery.

    <Tip>
      Optionally, publish the configuration file:

      ```bash theme={null}
      php artisan vendor:publish --tag=inertia-toast-config
      ```

      This creates a `config/inertia-toast.php` file where you can customize default settings.
    </Tip>
  </Step>

  <Step title="Install the frontend adapter">
    Choose the adapter for your frontend framework:

    <CodeGroup>
      ```bash npm (Vue 3) theme={null}
      npm install @laravel-inertia-toast/vue
      ```

      ```bash npm (React) theme={null}
      npm install @laravel-inertia-toast/react
      ```

      ```bash yarn (Vue 3) theme={null}
      yarn add @laravel-inertia-toast/vue
      ```

      ```bash yarn (React) theme={null}
      yarn add @laravel-inertia-toast/react
      ```

      ```bash pnpm (Vue 3) theme={null}
      pnpm add @laravel-inertia-toast/vue
      ```

      ```bash pnpm (React) theme={null}
      pnpm add @laravel-inertia-toast/react
      ```
    </CodeGroup>
  </Step>

  <Step title="Configure your frontend">
    Set up the toast components in your application.

    <Tabs>
      <Tab title="Vue 3">
        Register the plugin in your `resources/js/app.js`:

        ```javascript theme={null}
        import { createApp, h } from 'vue'
        import { createInertiaApp } from '@inertiajs/vue3'
        import { InertiaToast } from '@laravel-inertia-toast/vue'

        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(InertiaToast, {
        				duration: 5000,
        				position: 'top-right',
        				maxVisible: 5,
        			})
        			.mount(el)
        	},
        })
        ```

        Add the `<Toasts />` component to your main layout file:

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

        <template>
        	<div>
        		{/*  Your layout content  */}
        		<slot />

        		{/*  Toast container  */}
        		<Toasts />
        	</div>
        </template>
        ```
      </Tab>

      <Tab title="React">
        Wrap your app with `<ToastProvider>` in your `resources/js/app.tsx`:

        ```tsx theme={null}
        import { createRoot } from 'react-dom/client'
        import { createInertiaApp } from '@inertiajs/react'
        import { ToastProvider, Toasts } from '@laravel-inertia-toast/react'

        createInertiaApp({
        resolve: (name) => {
        const pages = import.meta.glob('./Pages/**/*.tsx', { eager: true })
        return pages[`./Pages/${name}.tsx`]
        },
        setup({ el, App, props }) {
        const root = createRoot(el)

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

        <Info>
          The `<Toasts />` component can be placed inside `<ToastProvider>` anywhere in your app. Many developers prefer adding it to the main app setup as shown above.
        </Info>
      </Tab>
    </Tabs>
  </Step>

  <Step title="Configure Tailwind CSS">
    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.

    <Tabs>
      <Tab title="Tailwind v4">
        Add the following `@source` directive to your main CSS file (e.g., `resources/css/app.css`):

        <CodeGroup>
          ```css Vue 3 theme={null}
          @import "tailwindcss";

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

          ```css React theme={null}
          @import "tailwindcss";

          @source "../../node_modules/@laravel-inertia-toast/react/dist/**/*.js";
          ```
        </CodeGroup>

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

      <Tab title="Tailwind v3">
        Add the package path to the `content` array in your `tailwind.config.js`:

        <CodeGroup>
          ```javascript Vue 3 theme={null}
          /** @type {import('tailwindcss').Config} */
          export default {
            content: [
              './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
              './storage/framework/views/*.php',
              './resources/**/*.blade.php',
              './resources/**/*.js',
              './resources/**/*.vue',
              './node_modules/@laravel-inertia-toast/vue/dist/**/*.js',
            ],
            theme: {
              extend: {},
            },
            plugins: [],
          }
          ```

          ```javascript React theme={null}
          /** @type {import('tailwindcss').Config} */
          export default {
            content: [
              './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
              './storage/framework/views/*.php',
              './resources/**/*.blade.php',
              './resources/**/*.js',
              './resources/**/*.tsx',
              './node_modules/@laravel-inertia-toast/react/dist/**/*.js',
            ],
            theme: {
              extend: {},
            },
            plugins: [],
          }
          ```
        </CodeGroup>
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Configuration options

Both the PHP backend and frontend adapters support configuration options:

### PHP configuration

Publish the config file to customize default settings:

```bash theme={null}
php artisan vendor:publish --tag=inertia-toast-config
```

This creates `config/inertia-toast.php`:

```php theme={null}
return [
    // Default duration (in milliseconds) before a toast auto-dismisses
    'duration' => 5000,

    // Where toasts appear on screen
    // Options: top-right, top-left, top-center, bottom-right, bottom-left, bottom-center
    'position' => 'top-right',

    // Maximum number of toasts visible at once
    'max_visible' => 5,

    // The key used when flashing toast data via Inertia::flash()
    'prop_key' => 'toasts',
];
```

### Frontend configuration

You can override the backend defaults when registering the plugin or provider:

<Tabs>
  <Tab title="Vue 3">
    ```javascript theme={null}
    app.use(InertiaToast, {
      duration: 3000,        // Auto-dismiss after 3 seconds
      position: 'top-center', // Show toasts at top-center
      maxVisible: 3,          // Show max 3 toasts at once
      propKey: 'toasts',      // Inertia flash key (must match backend)
    })
    ```
  </Tab>

  <Tab title="React">
    ```tsx theme={null}
    <ToastProvider
      config={{
        duration: 3000,        // Auto-dismiss after 3 seconds
        position: 'top-center', // Show toasts at top-center
        maxVisible: 3,          // Show max 3 toasts at once
        propKey: 'toasts',      // Inertia flash key (must match backend)
      }}
    >
      {/* ... */}
    </ToastProvider>
    ```
  </Tab>
</Tabs>

<Warning>
  If you change `prop_key` in the PHP config, make sure to update `propKey` in your frontend configuration to match.
</Warning>

## Next steps

<CardGroup cols={2}>
  <Card icon="rocket" href="/quickstart" title="Quickstart">
    Create your first toast notification
  </Card>

  <Card icon="server" href="/usage/server-side" title="Server-side usage">
    Learn about the PHP API
  </Card>
</CardGroup>