PHPackages                             capsulescodes/inertia-mailable - 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. capsulescodes/inertia-mailable

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

capsulescodes/inertia-mailable
==============================

Seamlessly craft dynamic and reusable email templates using Inertia

v3.1.3(2mo ago)286.3k↓45.7%3MITPHPPHP ^8.3.0

Since Sep 10Pushed 2mo ago2 watchersCompare

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

READMEChangelog (10)Dependencies (12)Versions (22)Used By (0)

[![Inertia Mailable Image](art/capsules-inertia-mailable-image.png)](art/capsules-inertia-mailable-image.png)

Seamlessly craft dynamic and reusable email templates using Inertia.

Inertia Mailable empowers you to build beautiful, component-driven emails in Laravel, utilizing the power of InertiaJS. Create interactive and responsive email designs effortlessly by composing components and embedding them into your mailables.

For React users, [ this article ](https://capsules.codes/en/blog/fyi/en-fyi-craft-emails-with-react-and-tailwind-using-inertia-mailable) provides an in-depth exploration of the package. For Vue users, [ this article ](https://capsules.codes/en/blog/fyi/en-fyi-craft-emails-with-vue-and-tailwind-using-inertia-mailable) provides an in-depth exploration of the package.

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

[](#installation)

**1. Install package and publish expected inertia mailable file**

```
composer require capsulescodes/inertia-mailable

> php artisan vendor:publish
```

```
┌ Which provider or tag's files would you like to publish? ───────────────┐
 │ Search...                                                               │
 ├─────────────────────────────────────────────────────────────────────────┤
 │   ...                                                                 │ │
 │   Tag: inertia-mailable-react-js                                      │ │
 │   Tag: inertia-mailable-react-ts                                      │ │
 │   Tag: inertia-mailable-vue-js                                        │ │
 │   Tag: inertia-mailable-vue-ts                                        │ │
 │   ...                                                                 │ │
```

It publishes three files :

- `resources/css/mail.css` : base Tailwind CSS file
- `resources/{js,ts}/mail.{js,ts,jsx,tsx}` : base Inertia file
- `resources/{js,ts}/mails/Welcome.{jsx,tsx,vue}` : example Components

**2. Add Inertia file and CSS file in Laravel vite config ssr array**

`vite.config.js`

```
plugins : [
    laravel( {
        input : [ ..., 'resources/css/mail.css' ],
        ssr : [ ..., 'resources/{js,ts}/mail.{js,ts,jsx,tsx}' ],
    } )
```

**3. Add SSR to `build` script and build files**

`package.json`

```
"scripts" : {
    "build" : "vite build && vite build --ssr"
},
```

```
npm run build
```

Usage
-----

[](#usage)

```
php artisan make:mail InertiaMailableInstalled.php
```

`App\Mails\InertiaMailableInstalled.php`

```