README

使用 Inertia 无缝制作动态和可重用电子邮件模板。

Inertia Mailable 使您能够利用 InertiaJS 的力量在 Laravel 中构建美观的组件驱动的电子邮件。通过编写 Vue 组件并将其嵌入到您的可邮寄电子邮件中，轻松创建交互式和响应式电子邮件设计。

这篇文章深入探讨了该包。

注意

此包目前是为 Laravel 和 Vue 用户设计的，并且仍在开发中。

安装

1. 安装包并发布预期的 inertia mailable 文件

composer require capsulescodes/inertia-mailable

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

它发布了两个文件

• resources/js/mail.js : 基础 Inertia 文件
• resources/js/mails/Welcome.vue : 示例 Vue 组件。

2. 将文件名添加到 vite 配置的 SSR 数组中

plugins : [
    laravel( {
        ssr : [ ..., 'resources/js/mail.js' ],
    } )

3. 将 SSR 添加到 build 脚本中并构建文件

package.json

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

npm run build

用法

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

现在您已准备好发送。

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" ) ); } );

• 将 example@example.com 替换为 routes/web.php 和 App\Mail\InertiaMailableInstalled.php 中的所需电子邮件地址。

支持的框架

• Inertia mailable 支持 Laravel。

• Inertia Mailable 支持 Vue。
• Inertia Mailable 支持 TypeScript 的 Vue。
• Inertia Mailable 支持 Tailwindcss 的 Vue。

选项

- 添加自定义 CSS 文件

如果您想修改当前的 CSS 文件，发布模板并修改 inertia-mailable 配置文件中的路径。

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

config.inertia-mailable.php

return [

    'css' => 'resources/css/custom-css.css'

];

- 添加自定义 Tailwind 配置文件

如果您想使用自定义 Tailwind 配置，修改 inertia-mailable 配置文件中的路径。

config.inertia-mailable.php

return [

    'tailwind' => 'custom.tailwind.config.js'

];

- 添加自定义根 blade 视图

如果您想修改当前的 blade 文件，发布模板并修改 inertia-mailable 配置文件中的路径。

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 ] );
}

...

- 指定实际的 Node.js 路径

如果您遇到以下错误：Error: proc_open(): posix_spawn() failed: No such file or directory，则需要指定实际的 Node.js 路径。为此有一个专门的环境变量。

.env

NODE_PATH=path/to/node

贡献

欢迎拉取请求。对于重大更改，请首先打开一个问题来讨论您想更改的内容。

请确保适当更新测试。为了运行 MySQL 测试，必须在预期的 TestCases 中配置凭证。

测试

composer test

鸣谢

• Capsules Codes

许可证

MIT