Inertia Mailable
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 fileresources/{js,ts}/mail.{js,ts,jsx,tsx}: base Inertia fileresources/{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( string $name )
{
$this->name = $name;
}
public function envelope() : Envelope
{
return new Envelope( from : new Address( '[email protected]', '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( '[email protected]' )->send( new InertiaMailableInstalled( "Mailable World" ) ); } );
- replace 'example@example.com' with the desired email address in
routes/web.phpandApp\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
License
