{"id":28411576,"url":"https://github.com/capsulescodes/inertia-mailable","last_synced_at":"2025-06-23T23:31:08.522Z","repository":{"id":255442582,"uuid":"843857917","full_name":"capsulescodes/inertia-mailable","owner":"capsulescodes","description":"Craft emails in Laravel with React, Vue and Tailwind","archived":false,"fork":false,"pushed_at":"2025-06-01T22:38:22.000Z","size":448,"stargazers_count":24,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-03T04:47:10.101Z","etag":null,"topics":["inertiajs","laravel","mailable","vuejs"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/capsulescodes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-08-17T16:24:49.000Z","updated_at":"2025-06-01T22:37:43.000Z","dependencies_parsed_at":"2024-09-18T11:57:36.275Z","dependency_job_id":"c4e2233b-8cf8-4abb-9031-f543ca1724b0","html_url":"https://github.com/capsulescodes/inertia-mailable","commit_stats":null,"previous_names":["capsulescodes/inertia-mailable"],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/capsulescodes/inertia-mailable","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/capsulescodes%2Finertia-mailable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/capsulescodes%2Finertia-mailable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/capsulescodes%2Finertia-mailable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/capsulescodes%2Finertia-mailable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/capsulescodes","download_url":"https://codeload.github.com/capsulescodes/inertia-mailable/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/capsulescodes%2Finertia-mailable/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261575419,"owners_count":23179517,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["inertiajs","laravel","mailable","vuejs"],"created_at":"2025-06-02T17:09:06.035Z","updated_at":"2025-06-23T23:31:08.516Z","avatar_url":"https://github.com/capsulescodes.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003cp align=\"center\"\u003e\u003cimg src=\"art/capsules-inertia-mailable-image.png\" height=\"265px\" alt=\"Inertia Mailable Image\" /\u003e\u003c/p\u003e\n\nSeamlessly craft dynamic and reusable email templates using Inertia.\n\nInertia 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.\n\n\u003cbr\u003e\n\nFor React users, [ this article ](https://capsules.codes/en/blog/fyi/en-fyi-craft-emails-with-react-and-tailwind-using-inertia-mailable) provides an in-depth exploration of the package.\nFor Vue users, [ this article ](https://capsules.codes/en/blog/fyi/en-fyi-craft-emails-with-vue-and-tailwind-using-inertia-mailable) provides an in-depth exploration of the package.\n\n\n\n\u003cbr\u003e\n\n## Installation\n\n**1. Install package and publish expected inertia mailable file**\n\n```bash\ncomposer require capsulescodes/inertia-mailable\n\n\u003e php artisan vendor:publish\n```\n\n```bash\n┌ Which provider or tag's files would you like to publish? ───────────────┐\n │ Search...                                                               │\n ├─────────────────────────────────────────────────────────────────────────┤\n │   ...                                                                 │ │\n │   Tag: inertia-mailable-react-js                                      │ │\n │   Tag: inertia-mailable-react-ts                                      │ │\n │   Tag: inertia-mailable-vue-js                                        │ │\n │   Tag: inertia-mailable-vue-ts                                        │ │\n │   ...                                                                 │ │\n```\n\n\u003cbr\u003e\n\nIt publishes three files :\n\n - `resources/css/mail.css` : base Tailwind CSS file\n - `resources/{js,ts}/mail.{js,ts,jsx,tsx}` : base Inertia file\n - `resources/{js,ts}/mails/Welcome.{jsx,tsx,vue}` : example Components\n\n\u003cbr\u003e\n\n**2. Add Inertia file and CSS file in Laravel vite config ssr array**\n\n`vite.config.js`\n```javascript\nplugins : [\n    laravel( {\n        input : [ ..., 'resources/css/mail.css' ],\n        ssr : [ ..., 'resources/{js,ts}/mail.{js,ts,jsx,tsx}' ],\n    } )\n```\n\n\u003cbr\u003e\n\n**3. Add SSR to `build` script and build files**\n\n`package.json`\n```json\n\"scripts\" : {\n    \"build\" : \"vite build \u0026\u0026 vite build --ssr\"\n},\n```\n\n```bash\nnpm run build\n```\n\n\u003cbr\u003e\n\n## Usage\n\n```bash\nphp artisan make:mail InertiaMailableInstalled.php\n```\n\n\u003cbr\u003e\n\n`App\\Mails\\InertiaMailableInstalled.php`\n\n```diff\n\u003c?php\n\nnamespace App\\Mail;\n\n- use Illuminate\\Mail\\Mailable;\n+ use CapsulesCodes\\InertiaMailable\\Mail\\Mailable;\nuse Illuminate\\Mail\\Mailables\\Envelope;\nuse Illuminate\\Mail\\Mailables\\Address;\n- use Illuminate\\Mail\\Mailables\\Content;\n+ use CapsulesCodes\\InertiaMailable\\Mail\\Mailables\\Content;\n\n\nclass InertiaMailableInstalled extends Mailable\n{\n    private string $name;\n\n\n    public function __construct( string $name )\n    {\n        $this-\u003ename = $name;\n    }\n\n\n    public function envelope() : Envelope\n    {\n        return new Envelope( from : new Address( 'example@example.com', 'Mailable World' ), subject : 'Hello Inertia Mailable World!' );\n    }\n\n    public function content() : Content\n    {\n-       return new Content( view: 'view.name' );\n+       return new Content( view : 'Welcome', props : [ 'name' =\u003e $this-\u003ename ] );\n    }\n\n    public function attachments() : array\n    {\n        return [];\n    }\n}\n```\n\n\u003cbr\u003e\n\n`routes/web.php`\n\n```php\n\u003c?php\n\nuse Illuminate\\Support\\Facades\\Route;\nuse App\\Mail\\InertiaMailableInstalled;\n\n\nRoute::get( '/render', fn() =\u003e ( new InertiaMailableInstalled( \"Mailable World\" ) )-\u003erender() );\n```\n\n\u003cbr\u003e\n\n```bash\nphp artisan serve\n\n\nINFO  Server running on [http://127.0.0.1:8000].\n```\n\n\u003cbr\u003e\n\n`\u003e http://127.0.0.1:8000/render`\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"art/capsules-inertia-mailable-screenshot.png\" alt=\"Inertia Mailable Screenshot\" /\u003e\u003c/p\u003e\n\n\u003cbr\u003e\n\nYou are now ready to send.\n\n\u003cbr\u003e\n\n`routes/web.php`\n\n```php\n\u003c?php\n\nuse Illuminate\\Support\\Facades\\Route;\nuse Illuminate\\Support\\Facades\\Mail;\nuse App\\Mail\\InertiaMailableInstalled;\n\n\nRoute::get( '/send', function(){ Mail::to( 'example@example.com' )-\u003esend( new InertiaMailableInstalled( \"Mailable World\" ) ); } );\n```\n- replace 'example@example.com' with the desired email address in `routes/web.php`and `App\\Mail\\InertiaMailableInstalled.php`.\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n## Supported Frameworks\n\n- [x] Inertia mailable supports Laravel.\n\n\u003cbr\u003e\n\n- [x] Inertia Mailable supports Vue.\n- [x] Inertia Mailable supports Vue with Typescript.\n- [x] Inertia Mailable supports Vue with Tailwind CSS.\n\n\u003cbr\u003e\n\n- [x] Inertia Mailable supports React.\n- [x] Inertia Mailable supports React with Typescript.\n- [x] Inertia Mailable supports React with Tailwind CSS.\n\n\u003cbr\u003e\n\n## Options\n\n**- Build your email with Watch mode**\n\nYou 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.\n\n```json\n\"scripts\" : {\n    \"watch\" : \"vite build --ssr --watch\"\n},\n```\n\n```bash\n\u003e npm run watch\n\nwatching for file changes...\n```\n\n\u003cbr\u003e\n\n**- Add a custom root blade view**\n\nIf you want to modify the current blade file, publish the template and modify the path in the `inertia-mailable` config file.\n\n```bash\nphp artisan vendor:publish --tag=inertia-mailable-blade\n```\n\n\u003cbr\u003e\n\n`App\\Mails\\InertiaMailableInstalled.php`\n\n```php\n...\n\npublic function content() : Content\n{\n    return new Content( root : 'custom-blade-view', view : 'Welcome', props : [ 'name' =\u003e $this-\u003ename ] );\n}\n\n...\n```\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n**- Specify the actual path to node**\n\nIf 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.\n\n\u003cbr\u003e\n\n`config/inertia-mailable.php`\n\n```php\n\nreturn [\n\n    ...\n\n    'node' =\u003e env( 'NODE_PATH', 'node' ),\n\n    ...\n];\n\n```\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n**- Emit CSS file in SSR directory**\n\nSince 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.\n\n\u003cbr\u003e\n\n`vite.config.js`\n```javascript\nplugins : [\n    laravel( {\n        ssr : [ ..., 'resources/css/mail.css', 'resources/{js,ts}/mail.{js,ts,jsx,tsx}' ],\n    } ),\n    ...\n],\nbuild : {\n    manifest : 'manifest.json',\n    ssrEmitAssets : true,\n}\n```\n\n\u003cbr\u003e\n\n`config/inertia-mailable.php`\n```php\n\nreturn [\n\n    ...\n\n    'inertia' =\u003e 'resources/{js,ts}/mail.{js,ts,jsx,tsx}',\n    'manifest' =\u003e 'bootstrap/ssr/manifest.json'\n\n    ...\n];\n```\n\n\u003cbr\u003e\n\n## Contributing\n\nPull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.\nPlease make sure to update tests as appropriate.\n\n\u003cbr\u003e\n\n## Testing\n\n```\ncomposer test\n```\n\n\u003cbr\u003e\n\n## Credits\n\n[Capsules Codes](https://github.com/capsulescodes)\n\n\u003cbr\u003e\n\n## License\n\n[MIT](https://choosealicense.com/licenses/mit/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcapsulescodes%2Finertia-mailable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcapsulescodes%2Finertia-mailable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcapsulescodes%2Finertia-mailable/lists"}