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 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.

Installation

1. Install package and publish expected inertia mailable file

composer require capsulescodes/inertia-mailable

php artisan vendor:publish --tag=inertia-mailable-vue-js

It publishes two files :

resources/js/mail.js : base Inertia file
resources/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 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( '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 Tailwindcss.

Options

- 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-css

config.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-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 : Error: proc_open(): posix_spawn() failed: No such file or directory, you will need to specify the actual path to Node.js. There is a dedicated environment variable for this.

.env

NODE_PATH=path/to/node

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. In order to run MySQL tests, credentials have to be configured in the intended TestCases.

Testing

composer test

Credits

Capsules Codes

License

MIT

capsulescodes / inertia-mailable

Maintainers

Details