Resend

Nuxtbe uses Resend for sending transactional emails in two key areas:

Server Routes: For payment-related transactional emails in:
- LemonSqueezy webhook (/api/webhook/lemonsqueezy)
- Stripe webhook (/api/webhook/stripe)
Supabase Edge Functions: For authentication-related emails:
- Welcome emails
- Password reset
- Email verification
- Magic link authentication

This guide will help you set up and configure Resend for both use cases.

You'll need to configure the Resend API key in both your Nuxt environment and Supabase Edge Functions secrets.

You may ommit configuring you own provider for testing, in that case you'll have to comment all the places where you use emailServerClient in your code and to not configure custom SMTP in Supabase.

Setup

Create Resend Account

Sign up for a Resend account.
Complete your account verification.

Generate API Key

Navigate to the API Keys section in your Resend Dashboard.
Click "Create API Key".
Give your key a descriptive name (e.g., "Nuxtbe Production").
Copy the generated API key.
Store it in your .env file:

.env

RESEND_API_KEY="re_..."

Never commit your Resend API key to version control or share it publicly.

Add Sending Domain

Go to the Domains section in your Resend Dashboard.
Click "Add Domain".
Follow the DNS verification steps.
Wait for domain verification (usually takes a few minutes).

Read more at Resend Documentation. Send Test Emails

Configure Contact Email

Update your app.config.ts with your contact email:

app.config.ts

export default defineAppConfig({
  general: {
    contactEmail: '[email protected]', // Change this to your verified domain email
  },
  // ... other config
});

Configure API Keys

Navigate to the API Keys section in your Resend Dashboard.
Create two API keys:
- One for your Nuxt application
- One for Supabase Edge Functions
Store the Nuxt API key in your .env:

.env

RESEND_API_KEY="re_..."

Add the Supabase Edge Functions API key to your Edge Function Secrets:

RESEND_API_KEY="re_..."

Never commit your Resend API keys to version control or share them publicly.

Usage

Send Email

Nuxtbe ships emailServerClient utility to configure the email client in your server routes and send emails from there.

const { sendEmail } = emailServerClient(event);

await sendEmail({
  from: 'Your App <[email protected]>',
  to: '[email protected]',
  subject: 'Welcome!',
  html: '<p>Welcome to our application!</p>',
});

Add Contact to Audience

const { addContact } = emailServerClient(event);

await addContact('[email protected]', 'John Doe');

Email Templates

Nuxtbe includes pre-built email templates powered by React Email for:

Welcome emails
Password reset
Email verification
One-time login link

These templates are used within Supabase Edge Functions to send transactional emails. They are located in the supabase/functions/send-email-mail-hook/_templates directory and can be customized using React Email components to match your branding. React Mail has been chosen because of smaller bundle size and better performance. In future, it can be replaced by Vue Mail.

Testing Emails

Use the Resend Dashboard to monitor sent emails.
Check the delivery status and open rates.
View rendered email content and debug issues.

Best Practices

Always verify your sending domain
Implement proper error handling:

mailSender.ts

try {
  await sendEmail({
    from: 'Your App <[email protected]>',
    to: userEmail,
    subject: 'Welcome!',
    html: welcomeTemplate(user),
  });
} catch (error) {
  console.error('Failed to send email:', error);
  // Handle error appropriately
}

Monitor email deliverability in the Resend dashboard
Keep email templates mobile-responsive
Follow anti-spam guidelines