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 Vue components and embedding them into your mailables.
This article provides an in-depth exploration of the package.
Note
This package is currently designed for Laravel and Vue users and is still in development.
1. Install package and publish expected inertia mailable file
composer require capsulescodes/inertia-mailable
php artisan vendor:publish --tag=inertia-mailable-vue-jsIt publishes two files :
resources/js/mail.js: base Inertia fileresources/js/mails/Welcome.vue: example Vue Component.
2. Add filename into vite config's SSR array
plugins : [
laravel( {
ssr : [ ..., 'resources/js/mail.js' ],
} )3. Add SSR to build script and build files
package.json
"scripts" : {
"build" : "vite build && vite build --ssr"
},npm run buildphp artisan make:mail InertiaMailableInstalled.phpApp\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 '[email protected]' with the desired email address in
routes/web.phpandApp\Mail\InertiaMailableInstalled.php.
- Inertia mailable supports Laravel.
- Inertia Mailable supports Vue.
- Inertia Mailable supports Vue with Typescript.
- Inertia Mailable supports Vue with Tailwindcss.
- Add a custom css file
If you want to modify the current css file, publish the template and modify the path in the inertia-mailable config file.
php artisan vendor:publish --tag=inertia-mailable-cssconfig/inertia-mailable.php
return [
...
'css' => 'resources/css/custom-css.css'
...
];- Add a custom Tailwind config file
If you want to use a custom tailwind config, modify the path in the inertia-mailable config file.
config/inertia-mailable.php
return [
...
'tailwind' => 'custom.tailwind.config.js'
...
];- 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-bladeApp\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' ),
...
];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.
composer test