Laravel 12 - Send Welcome Notification Emails with Vue & Fortify.
Laravel 12 - Send Welcome Notification Emails with Vue & Fortify.
In this tutorial, we will learn how to send a welcome notification email in Laravel 12 using Vue authentication, Fortify, Mailtrap, and a custom Blade email view when a user registers.
Quick Overview
This guide walks you through setting up a welcome email in a Laravel 12 application with Vue authentication. You’ll start by creating a fresh Laravel project and setting up Vue as the frontend stack with Laravel’s built-in authentication. Next, you’ll create a WelcomeMailNotification to automatically send a friendly welcome email whenever a new user registers. You’ll configure Mailtrap so you can safely test emails without sending them to real users. Then, you’ll hook the notification into the registration process and test it by creating a new account. You’ll also see how you can use a custom Blade view to personalize the email layout, giving you full control over the design and content if you want to.
Step # 1 : Create a New Laravel 12 Project with Vue Authentication.
We’ll start by spinning up a fresh Laravel 12 application. If the Laravel Installer is already available on your system, you can create a new project by running.
laravel new notification
If you prefer using Composer (or don’t have the Installer installed), you can create the project with.
composer create-project laravel/laravel --prefer-dist notification
When using Composer, Laravel starts with a minimal setup, so you’ll need to manually select your frontend stack, authentication, and other starter options. If you use the Laravel Installer instead, you’ll go through an interactive setup that guides you step by step. During this process, be sure to choose the options below.
- Choose Vue as the frontend stack to get a modern Vue 3 setup powered by Inertia.
- Select Laravel’s built-in authentication, which uses Fortify to handle user registration, login, and email verification.
- Pick Pest as the testing framework for a cleaner and more expressive testing experience.
- Allow Laravel to automatically run npm install and npm run build so all frontend dependencies are installed and compiled for you.
After the installation finishes, you’ll have a brand-new Laravel 12 application ready to go, complete with Vue authentication, Fortify-powered auth logic, and all frontend assets properly set up.
Step # 2 : Navigate to the Project Directory.
With your Laravel project ready, open your terminal, Git Bash, Command Prompt, or whichever you prefer and move into your project’s root folder. For instance, if your project is at c:\xampp\htdocs\notification, run
cd c:xampp/htdocs/notification
Being in the project directory lets you run Artisan commands, manage dependencies, and work with your Laravel application smoothly.
Step # 3 : Create the Welcome Email Notification.
Next, let’s create a notification that will send a welcome email to new users. Run the following Artisan command.
php artisan make:notification WelcomeMailNotification
This generates a WelcomeMailNotification.php file inside the app/Notifications folder. Open the file and update the toMail method to include the message you want to send to your users after registration. This could be anything relevant to your website or service.
public function toMail(object $notifiable): MailMessage
{
return (new MailMessage)
->subject('Welcome to Code Shotcut')
->greeting('Hey ' . $notifiable->name . ' 👋')
->line('Welcome to Code Shotcut, your new hub for practical coding tutorials and real-world tips.')
->line('Check out our blog posts and YouTube content covering Laravel, web development, and clean coding practices.')
->action('Explore Code Shotcut', url('/'))
->line('We’re excited to have you here. Happy coding! 💻🔥');
}
This sets up a warm, personal welcome email that will be sent automatically when the notification is triggered.
Step # 4 : Set Up a Mailtrap Account.
To safely test email sending during development, we’ll use Mailtrap.
- Go to https://mailtrap.io and create a free account.
- Once logged in, create a new project specifically for Welcome Notification.
- Inside your project, you’ll find all the SMTP credentials and settings needed for the next step.
Mailtrap lets you safely preview emails without sending them to real users.
Step # 5: Configure Mail Settings in .env.
Next, we need to tell Laravel how to send emails during development. Open your .env file and replace the placeholders with the SMTP credentials from your Mailtrap account.
MAIL_MAILER=smtp
MAIL_HOST=sandbox.smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME="Your Mailtrap username"
MAIL_PASSWORD="Your Mailtrap password"
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS="codeshotcut@gmail.com"
MAIL_FROM_NAME="${APP_NAME}"
APP_NAME="Code Shotcut" # This will appear in the email footer.
By updating these settings, Laravel will use Mailtrap to send test emails. Setting the APP_NAME ensures that the name displayed in the email footer is what you want, instead of the default Laravel. This allows you to verify your welcome notifications safely without sending real emails to users.
Step # 6 : Trigger Welcome Notification Email.
In Laravel 12 with Vue authentication, user registration is handled by Fortify through the CreateNewUser action. This is where we can hook in our welcome email. Open the file: app/Actions/Fortify/CreateNewUser.php and import the notification at the top.
use App\Notifications\WelcomeMailNotification;
Then, inside the create method, right after the user is created, add the notification.
public function create(array $input): User
{
Validator::make($input, [
...$this->profileRules(),
'password' => $this->passwordRules(),
])->validate();
$user = User::create([
'name' => $input['name'],
'email' => $input['email'],
'password' => $input['password'],
]);
// Send the welcome email
$user->notify(new WelcomeMailNotification());
return $user;
}
Now, every time a new user registers, they’ll automatically receive the welcome notification email.
Step # 7 : Test the Welcome Notification Email.
Now that everything is set up, let’s make sure the welcome email actually works. Start the Laravel development server.
php artisan serve
Once the server is running, open your browser and visit: http://127.0.0.1:8000/register. Register a new user. Check your Mailtrap inbox you should see the welcome notification email appear.
This confirms that your setup is working correctly, and users will receive the email immediately after signing up. You can now adjust the email content or design as needed.
Step # 8: Use a Custom View for the Welcome Email.
To send a welcome email with a custom layout, pass the user data to a Blade view from the notification by accepting the user object in the constructor of app/Notifications/WelcomeMailNotification.php.
<?php
namespace App\Notifications;
use Illuminate\Bus\Queueable;
use Illuminate\Notifications\Messages\MailMessage;
use Illuminate\Notifications\Notification;
class WelcomeMailNotification extends Notification
{
use Queueable;
/**
* Pass user data to a custom Blade email view.
*/
protected $user;
/**
* Create a new notification instance.
*/
public function __construct($user)
{
$this->user = $user;
}
/**
* Get the notification's delivery channels.
*/
public function via($notifiable)
{
return ['mail'];
}
/**
* Build the mail message using a custom Blade view.
*/
public function toMail($notifiable)
{
return (new MailMessage)
->subject('Welcome to Code Shotcut')
->view('welcome-email', [
'user' => $this->user
]);
}
/**
* Get the array representation of the notification.
*/
public function toArray($notifiable)
{
return [];
}
}
Since we’re using Fortify, open app/Actions/Fortify/CreateNewUser.php and update the create method to send the notification with the user object.
public function create(array $input): User
{
Validator::make($input, [
...$this->profileRules(),
'password' => $this->passwordRules(),
])->validate();
$user = User::create([
'name' => $input['name'],
'email' => $input['email'],
'password' => $input['password'],
]);
// Send welcome email with custom view
$user->notify(new WelcomeMailNotification($user));
return $user;
}
Create a new file at resources/views/welcome-email.blade.php and design your custom email layout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Welcome to Code Shotcut</title>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" style="padding:20px 0;">
<tr>
<td align="center">
<!-- Main Container -->
<table width="600" cellpadding="0" cellspacing="0" style="background-color:#1e1e1e; border-radius:8px; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,0.5);">
<!-- Header -->
<tr>
<td align="center" style="background-color:#2c2c2c; padding:30px; color:#ffffff;">
<h1 style="margin:0; font-size:24px; font-weight:bold;">Welcome to Code Shotcut!</h1>
</td>
</tr>
<!-- Body -->
<tr>
<td style="padding:30px; color:#e0e0e0; font-size:16px; line-height:1.6;">
<p style="margin:0 0 16px 0;">Hey {{ $user->name }} 👋</p>
<p style="margin:0 0 16px 0;">
Welcome to Code Shotcut, your go-to hub for practical coding tutorials, tips, and real-world examples.
</p>
<p style="margin:0 0 16px 0;">
Explore blog posts and YouTube videos covering Laravel, web development, and clean coding practices.
</p>
<!-- Call-to-Action Button -->
<p style="text-align:center; margin:24px 0;">
<a href="{{ url('/') }}" style="display:inline-block; background-color:#3a3a3a; color:#ffffff; text-decoration:none; padding:12px 24px; border-radius:5px; font-weight:bold;">
Explore Code Shotcut
</a>
</p>
<p style="margin:0 0 16px 0;">
We’re thrilled to have you onboard. Happy coding! 💻🔥
</p>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="background-color:#1e1e1e; padding:20px; text-align:center; color:#aaaaaa; font-size:14px;">
<p style="margin:0;">Regards,<br>{{ config('app.name') }}</p>
</td>
</tr>
</table>
<!-- End Main Container -->
</td>
</tr>
</table>
</body>
</html>
This Blade template will render the welcome email whenever the WelcomeMailNotification is triggered, giving your users a sleek, dark-themed experience.
Conclusion
By following this guide, you’ve successfully set up a welcome email notification in your Laravel 12 application using Vue authentication. Your application now automatically sends a friendly welcome email to new users upon registration, improving onboarding and user engagement. You’ve also learned how to configure Mailtrap for testing email delivery, update the .env file with the correct SMTP credentials, and verify the email system in your local development environment. Additionally, you’ve seen how to use a custom Blade view to personalize the email layout and content, giving you full control over its design. This setup ensures that welcome emails are sent reliably and can be tailored to create a more engaging experience for your users.
For more details, refer to the Laravel documentation on notifications and email sending.
Share this with friends!
To engage in commentary, kindly proceed by logging in or registering
Subscribe to Our Newsletter
Stay ahead of the curve! Join our newsletter to see what everyone’s talking about.
Continue with Google
0 Comments