PHPackages                             polashmahmud/inertia-toast - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Mail & Notifications](/categories/mail)
4. /
5. polashmahmud/inertia-toast

ActiveLibrary[Mail & Notifications](/categories/mail)

polashmahmud/inertia-toast
==========================

Simple InertiaJS + Vue + Laravel toast notification system using vue-sonner.

v2.0.1(5mo ago)1322↓100%[2 issues](https://github.com/polashmahmud/inertia-toast/issues)MITPHP

Since Oct 28Pushed 5mo agoCompare

[ Source](https://github.com/polashmahmud/inertia-toast)[ Packagist](https://packagist.org/packages/polashmahmud/inertia-toast)[ RSS](/packages/polashmahmud-inertia-toast/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (1)DependenciesVersions (5)Used By (0)

Inertia Toast
=============

[](#inertia-toast)

Simple, zero-boilerplate toast notifications for Laravel + Inertia.js (Vue) using vue-sonner.

It ships with:

- Laravel middleware that exposes flash messages to Inertia
- A tiny Vue plugin that auto-mounts the Toaster and listens to Inertia navigations
- A publishable config to customize position, theme, and behavior

---

Installation
------------

[](#installation)

1. Install the package

```
composer require polashmahmud/inertia-toast:^2.0.1
```

2. Install the client dependency

```
npm install vue-sonner
```

3. Add the plugin in your Vue app (auto-mounts Toaster)

`resources/js/app.ts`

```
import "vue-sonner/style.css";
import notification from "@inertia-toast/plugins";

createInertiaApp({
  // ...
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .use(notification)
      .mount(el);
  },
});
```

You do NOT need to render `` yourself—the plugin does it for you.

4. Vite alias

`vite.config.ts`

```
import path from "path";

export default defineConfig({
  resolve: {
    alias: {
      "@inertia-toast": path.resolve(
        __dirname,
        "vendor/polashmahmud/inertia-toast/resources/js"
      ),
    },
  },
});
```

Optionally, add a TypeScript path mapping for better editor DX in `tsconfig.json`:

```
{
  "compilerOptions": {
    "paths": {
      "@inertia-toast/*": ["./vendor/polashmahmud/inertia-toast/resources/js/*"]
    }
  }
}
```

5. Publish the config

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

This creates `config/inertia-toast.php` where you can tweak:

```
return [
    'position' => 'bottom-right', // top-left | top-center | top-right | bottom-left | bottom-center | bottom-right
    'closeButton' => true,
    'expand' => false,
    'theme' => 'system',          // light | dark | system
    'richColors' => true,
    'toastOptions' => [
        'style' => [],
        'class' => '',
        'descriptionClass' => '',
    ],
];
```

---

Usage
-----

[](#usage)

From your controller or route, flash to the session. The plugin automatically shows a toast after the Inertia visit finishes.

Minimal (string body):

```
return back()->with('success', 'That worked nicely');
```

With description (indexed array):

```
return back()->with('warning', ['That worked nicely', 'Please check again']);
```

With description (associative array):

```
return back()->with('error', [
        'message' => 'Something went wrong!',
        'description' => 'Please try again after 5 seconds.',
]);
```

Supported types: `success`, `error`, `warning`, `info`.

---

Custom Styling
--------------

[](#custom-styling)

You can customize the appearance of the toast notifications by modifying the `toastOptions` in `config/inertia-toast.php`.

```
'toastOptions' => [
    'style' => [
        'background' => '#fda4af',
    ],
    'class' => 'bg-red-500 text-white',
    'descriptionClass' => 'text-red-100',
],
```

### Using Tailwind CSS

[](#using-tailwind-css)

If you want to use Tailwind CSS classes in the `class` or `descriptionClass` options, you must ensure that Tailwind scans your configuration file. Add the config file path to the `content` array in your `tailwind.config.js`:

```
module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
    "./config/inertia-toast.php", // Add this line
  ],
  // ...
};
```

---

Troubleshooting
---------------

[](#troubleshooting)

- Changed config but UI didn’t update?
    - Run: `php artisan optimize:clear`
    - Hard refresh the browser (Disable cache in DevTools)
    - Ensure the provider is registered and alias resolves

---

License
-------

[](#license)

MIT

###  Health Score

30

—

LowBetter than 64% of packages

Maintenance51

Moderate activity, may be stable

Popularity16

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity38

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~11 days

Total

4

Last Release

162d ago

Major Versions

v1.0.1 → v2.0.02025-10-28

### Community

Maintainers

![](https://www.gravatar.com/avatar/94d335e5718806f50e2afcdae4a21e749da7bff8aabd337932947860c8cf2c5a?d=identicon)[polashmahmud](/maintainers/polashmahmud)

---

Top Contributors

[![polashmahmud](https://avatars.githubusercontent.com/u/8996190?v=4)](https://github.com/polashmahmud "polashmahmud (27 commits)")

---

Tags

laravelnotificationinertiajsvuetoast

### Embed Badge

![Health badge](/badges/polashmahmud-inertia-toast/health.svg)

```
[![Health](https://phpackages.com/badges/polashmahmud-inertia-toast/health.svg)](https://phpackages.com/packages/polashmahmud-inertia-toast)
```

###  Alternatives

[loveorigami/yii2-notification-wrapper

This module for renders a message from session flash (with ajax, pjax support and etc.)

77199.7k5](/packages/loveorigami-yii2-notification-wrapper)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)