<!DOCTYPE html>

Craft Emails with Laravel, Vue and Tailwind using Inertia Mailable

 body { font-family: sans-serif; } h1, h2, h3 { margin-top: 2em; } code { background-color: #f0f0f0; padding: 0.2em 0.5em; font-family: monospace; } pre { background-color: #f0f0f0; padding: 1em; overflow-x: auto; }

Craft Emails with Laravel, Vue and Tailwind using Inertia Mailable

Introduction

In today's world, email remains a crucial communication channel for businesses. Crafting visually appealing and responsive emails that align with your brand's aesthetic is paramount. Laravel, a popular PHP framework, provides powerful tools for email management. Combining Laravel's capabilities with Vue.js for frontend development and Tailwind CSS for styling, we can build highly interactive and sophisticated emails.

Inertia Mailable, a package developed by the Laravel community, simplifies this process by allowing you to build your email templates using Vue.js and render them using Laravel's Mailable system. This article will guide you through the setup and implementation of this powerful combination.

Setting Up the Environment

Before we dive into the details, let's ensure we have the necessary tools and packages installed.

Prerequisites

Laravel 8.x or higher
Node.js and npm (or yarn)
Basic understanding of Laravel and Vue.js

Installation

Start by creating a fresh Laravel project or use your existing project.



  composer create-project laravel/laravel my-email-app

  cd my-email-app

Install Inertia Mailable and its dependencies:



  composer require inertia/mail

  npm install @inertiajs/inertia-vue

Configuration

In your
config/app.php
file, register the Inertia Mailable service provider and the Inertia Vue alias:



  'providers' => [

    // ...

    Inertia\Mail\MailServiceProvider::class,

  ],

'aliases' => [

    // ...

    'Inertia' => Inertia\Inertia::class,

  ],

Now, let's create a basic email template using Vue.js and Tailwind CSS.

Building a Vue-Powered Email Template

We'll create a new Vue component named
WelcomeEmail.vue
inside the
resources/js/Components
directory. You can structure your components as you see fit.



  // resources/js/Components/WelcomeEmail.vue

  

    

      Welcome to Our Platform!


      Thank you for joining our community. We're excited to have you onboard.


      

        Learn More

      

    

  

<br>
  export default {<br>
    // ...<br>
  };<br>

In this simple template, we use basic Tailwind CSS classes to style the email content, making it visually appealing.

Integrating with Laravel Mailable

Now, let's create a Laravel Mailable class to handle sending this email.



  // app/Mail/WelcomeEmail.php

  use Illuminate\Bus\Queueable;

  use Illuminate\Contracts\Queue\ShouldQueue;

  use Illuminate\Mail\Mailable;

  use Illuminate\Mail\Mailables\Content;

  use Illuminate\Mail\Mailables\Envelope;

  use Illuminate\Queue\SerializesModels;

class WelcomeEmail extends Mailable implements ShouldQueue

  {

    use Queueable, SerializesModels;
public $user;

/**
 * Create a new message instance.
 *
 * @return void
 */
public function __construct($user)
{
  $this-&gt;user = $user;
}

/**
 * Get the message envelope.
 *
 * @return \Illuminate\Mail\Mailables\Envelope
 */
public function envelope(): Envelope
{
  return new Envelope(
    subject: 'Welcome to Our Platform!',
  );
}

/**
 * Get the message content definition.
 *
 * @return \Illuminate\Mail\Mailables\Content
 */
public function content(): Content
{
  return new Content(
    view: 'mail.welcome',
    with: [
      'user' =&gt; $this-&gt;user,
    ],
  );
}

/**
 * Get the attachments for the message.
 *
 * @return array
 */
public function attachments(): array
{
  return [];
}

}

In this class:

We inject the user data using the constructor.
The envelope() method sets the email subject.
The content() method defines the email view ( mail.welcome ) and passes the user data.

Create a new email view in
resources/views/mail/welcome.blade.php
:



  // resources/views/mail/welcome.blade.php

  x-mail::message

    

      

        /x-inertia-mail::welcome-email

      

    

  /x-mail::message

Here, we're using the
x-data
and
x-show
directives to control the visibility of the welcome email component. The
x-init
directive sets a timeout to hide the welcome email after 10 seconds. You can adjust this duration as needed.

Sending the Email

To send the email, we can call the
Mail::to()
method in a controller or any other suitable location.



  // App\Http\Controllers\UserController.php

  use App\Mail\WelcomeEmail;

  use Illuminate\Http\Request;

  use Illuminate\Support\Facades\Mail;

class UserController extends Controller

  {

    public function store(Request $request)

    {

      // ... create a new user ...
  Mail::to($user-&gt;email)-&gt;send(new WelcomeEmail($user));

  // ... redirect or return a response ...
}

}

Using Tailwind CSS for Styling

Tailwind CSS's utility classes provide flexibility for styling your emails. To include Tailwind CSS in your email templates, you need to ensure it's properly set up. You can achieve this using a combination of approaches:

Tailwind's Default Setup

If you already have Tailwind CSS installed in your Laravel project, you can use the same configuration for your email templates. In the email view, include the Tailwind CSS stylesheet and ensure it's properly loaded.

Inline Styling

For a more efficient approach, Tailwind provides a way to generate inline styles directly from your Tailwind configuration. This ensures that the styles are embedded directly in the HTML and doesn't require external stylesheets. Here's an example:

// resources/js/Components/WelcomeEmail.vue

To generate inline styles, you can use a tool like Tailwind's CLI or an online generator.

Tailwind-specific Mailable Components

For even greater control and organization, you can create Tailwind-specific Mailable components that handle the styling within your email templates. These components can provide reusable styles for your email layouts.

// resources/js/Components/EmailButton.vue

This component encapsulates the Tailwind styles for a button. You can reuse it in various email templates.

Example: Sending a Confirmation Email

Let's create a confirmation email that's sent after a user successfully completes a registration process.

Create a Vue Component

// resources/js/Components/ConfirmationEmail.vue

Confirm Your Account

Thank you for registering! Please confirm your email address by clicking the button below.

Confirm Now

export default { props: { confirmationUrl: String, }, };

Create a Laravel Mailable

// app/Mail/ConfirmationEmail.php
use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Mail\Mailable;
use Illuminate\Mail\Mailables\Content;
use Illuminate\Mail\Mailables\Envelope;
use Illuminate\Queue\SerializesModels;


class ConfirmationEmail extends Mailable implements ShouldQueue

  {

    use Queueable, SerializesModels;
public $user;
public $confirmationUrl;

/**
 * Create a new message instance.
 *
 * @return void
 */
public function __construct($user, $confirmationUrl)
{
  $this-&gt;user = $user;
  $this-&gt;confirmationUrl = $confirmationUrl;
}

/**
 * Get the message envelope.
 *
 * @return \Illuminate\Mail\Mailables\Envelope
 */
public function envelope(): Envelope
{
  return new Envelope(
    subject: 'Confirm Your Account',
  );
}

/**
 * Get the message content definition.
 *
 * @return \Illuminate\Mail\Mailables\Content
 */
public function content(): Content
{
  return new Content(
    view: 'mail.confirmation',
    with: [
      'user' =&gt; $this-&gt;user,
      'confirmationUrl' =&gt; $this-&gt;confirmationUrl,
    ],
  );
}

/**
 * Get the attachments for the message.
 *
 * @return array
 */
public function attachments(): array
{
  return [];
}


}

Send the Email

// App\Http\Controllers\UserController.php
// ...
use App\Mail\ConfirmationEmail;
// ...


class UserController extends Controller

  {

    public function store(Request $request)

    {

      // ... create a new user ...

  $confirmationUrl = route('confirmation.path', ['token' =&gt; $user-&gt;confirmation_token]);

  Mail::to($user-&gt;email)-&gt;send(new ConfirmationEmail($user, $confirmationUrl));

  // ... redirect or return a response ...
}


}

Conclusion

By leveraging the power of Inertia Mailable, Vue.js, and Tailwind CSS, we can craft beautiful and interactive email templates that enhance user experience. Here are some key takeaways:

Inertia Mailable streamlines email template development using familiar Vue.js components.
Tailwind CSS simplifies email styling with its responsive utility classes.
Inline styling ensures consistent rendering across email clients.
Reusable Mailable components promote code reusability and maintainability.

This approach enables you to create visually appealing and functional emails that seamlessly integrate with your Laravel application. Remember to test your emails across various email clients to ensure optimal display and compatibility.