Email

Tools

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

Setup

Resend

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: {
       provider: enums.emailProvider.resend, // Set email provider Resend
       senderName: "Your Name from Which App",
       senderEmail: "no-reply@resend.yourdomain.com",
   },
   

Cloudflare Email

1. Set environment variables:
   .env

   CLOUDFLARE_ACCOUNT_ID="your-account-id"
   CLOUDFLARE_EMAIL_API_TOKEN="your-api-token"
   

   • CLOUDFLARE_ACCOUNT_ID: Found in your Cloudflare dashboard URL or sidebar.
   • CLOUDFLARE_EMAIL_API_TOKEN: Created in My Profile > API Tokens (must have "Send Email" permission).
2. Onboard your domain in the Cloudflare dashboard: Email Sending → Onboard Domain → Add records.
3. Update your config:
   shared/config.ts

   email: {
       provider: enums.emailProvider.cloudflare, // Set email provider Cloudflare
       senderName: "Your Name from Which App",
       senderEmail: "no-reply@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 your provider's dashboard (Resend or Cloudflare).