Email

Tools

• Resend: Handles sending transactional emails reliably.
• Vue Email: Creates reusable, styled email templates with Vue components.

Setup

1. Sign up at Resend.
2. Go to API Keys to create an API Key. Fill in the name you like and keep other options as default. Then click add and copy the API Key .
3. Set environment variable:
   .env

   RESEND_API_KEY="your-resend-api-key"
   

4. Go to Domains and add your sending domain (recommended: a subdomain, e.g., resend.yourdomain.com) and complete DNS verification.
5. Update your config:
   shared/config.ts

   email: {
       senderName: "Your Name from Which App",
       senderEmail: "no-reply@resend.yourdomain.com",
   },
   

Usage

• Send Pre-Configured Emails
  Use templates like forgotPassword, magicLink, or verifyEmail. Example for a password reset email:

  import { sendEmail } from '~~/server/services/email/send';
  await sendEmail({
      to: 'someone@email.com',
      template: 'forgotPassword',
      params: {
      name: 'Someone',
      resetUrl: 'https://your-site.com/reset-password?token=abc',
      },
      locale: 'en',
  });
  

• Available Templates:
  • forgotPassword: For password reset emails.
  • magicLink: For passwordless login links.
  • verifyEmail: For email verification links.
  • accountDeletion: For account deletion confirmation email.
  • waitlistConfirmation: For joining the waitlist email.
  • waitlistNotification: For notify waitlist is over and app is live.
• Customize Templates
  Modify templates in server/services/email/templates/ or create new ones by adding to index.ts and creating a Vue component in server/services/email/components/.
• Styling
  Update server/services/email/components/emailStyles.ts for custom email colors and fonts.
• Verify Emails
  Check sent emails in the Resend Dashboard.