README

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 provides an in-depth exploration of the package. For Vue users, this article provides an in-depth exploration of the package.

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

php artisan make:mail InertiaMailableInstalled.php

App\Mails\InertiaMailableInstalled.php

<?php

namespace App\Mail;

- use Illuminate\Mail\Mailable;
+ use CapsulesCodes\InertiaMailable\Mail\Mailable;
use Illuminate\Mail\Mailables\Envelope;
use Illuminate\Mail\Mailables\Address;
- use Illuminate\Mail\Mailables\Content;
+ use CapsulesCodes\InertiaMailable\Mail\Mailables\Content;


class InertiaMailableInstalled extends Mailable
{
+    private string $name;

-    public function __construct()
+    public function __construct( string $name )
    {
+        $this->name = $name;
    }


    public function envelope() : Envelope
    {
        return new Envelope( from : new Address( 'example@example.com', 'Mailable World' ), subject : 'Hello Inertia Mailable World!' );
    }

    public function content() : Content
    {
-       return new Content( view: 'view.name' );
+       return new Content( view : 'Welcome', props : [ 'name' => $this->name ] );
    }

    public function attachments() : array
    {
        return [];
    }
}

routes/web.php

<?php

use Illuminate\Support\Facades\Route;
use App\Mail\InertiaMailableInstalled;


Route::get( '/render', fn() => ( new InertiaMailableInstalled( "Mailable World" ) )->render() );

php artisan serve


INFO  Server running on [http://127.0.0.1:8000].

> http://127.0.0.1:8000/render

You are now ready to send.

routes/web.php

<?php

use Illuminate\Support\Facades\Route;
use Illuminate\Support\Facades\Mail;
use App\Mail\InertiaMailableInstalled;


Route::get( '/send', function(){ Mail::to( 'example@example.com' )->send( new InertiaMailableInstalled( "Mailable World" ) ); } );

• replace 'example@example.com' with the desired email address in routes/web.phpand App\Mail\InertiaMailableInstalled.php.

Supported Frameworks

• Inertia mailable supports Laravel.

• Inertia Mailable supports Vue.
• Inertia Mailable supports Vue with Typescript.
• Inertia Mailable supports Vue with Tailwind CSS.

• Inertia Mailable supports React.
• Inertia Mailable supports React with Typescript.
• Inertia Mailable supports React with Tailwind CSS.

Options

- Build your email with Watch mode

You can dynamically build your component while working on it by enabling the --watch option in your package.json script. This ensures your components are rebuilt automatically when changes are detected.

"scripts" : {
    "watch" : "vite build --ssr --watch"
},

> npm run watch

watching for file changes...

- Add a custom root blade view

If you want to modify the current blade file, publish the template and modify the path in the inertia-mailable config file.

php artisan vendor:publish --tag=inertia-mailable-blade

App\Mails\InertiaMailableInstalled.php

...

public function content() : Content
{
    return new Content( root : 'custom-blade-view', view : 'Welcome', props : [ 'name' => $this->name ] );
}

...

- Specify the actual path to node

If you encounter the following error : sh: line 0: exec: node: not found, add node binary's absolute path in the inertia-mailable config file or add NODE_PATH in your .env file.

config/inertia-mailable.php

return [

    ...

    'node' => env( 'NODE_PATH', 'node' ),

    ...
];

- Emit CSS file in SSR directory

Since Vite, by default, does not emit assets outside the public directory, Inertia Mailable follows the same approach. However, if you want to build all related files into the ssr directory, indicate it in the Vite config file and change the Inertia mailable config file.

vite.config.js

plugins : [
    laravel( {
        ssr : [ ..., 'resources/css/mail.css', 'resources/{js,ts}/mail.{js,ts,jsx,tsx}' ],
    } ),
    ...
],
build : {
    manifest : 'manifest.json',
    ssrEmitAssets : true,
}

config/inertia-mailable.php

return [

    ...

    'inertia' => 'resources/{js,ts}/mail.{js,ts,jsx,tsx}',
    'manifest' => 'bootstrap/ssr/manifest.json'

    ...
];

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. Please make sure to update tests as appropriate.

Testing

composer test

Credits

Capsules Codes

License

MIT