Overview

Nuxt Starter Kit includes a simple Nuxt layer that allows you to send emails using Plunk or Resend. This layer is located in the layers/email directory and is responsible for managing the email connection, sending emails, and handling errors.

Vue Email

I use Vue Email which provides a collection of high-quality, unstyled components for creating emails using Vue and TypeScript. The pre-defined templates are located in the layers/email/components/email/templates directory. You can use these templates to create your own emails or modify them to fit your needs.

Plunk

To enable Plunk, you need to set the following environment variables in your .env file:

NUXT_PRIVATE_EMAIL_PROVIDER=plunk
NUXT_PRIVATE_EMAIL_PLUNK_API_URL=YOUR_API_URL
NUXT_PRIVATE_EMAIL_PLUNK_API_KEY=YOUR_API_KEY

Resend

To enable Resend as email provider, you need to set the following environment variables in your .env file:

NUXT_PRIVATE_EMAIL_PROVIDER=resend
NUXT_PRIVATE_EMAIL_RESEND_API_TOKEN=YOUR_API_KEY

Other Providers

You can easily add support for other email providers by adding a new provider in layers/email/server/utils/getEmailProvider.ts. This file contains the logic for selecting the appropriate email provider based on the configuration. You can add your own provider by creating a new function that implements the EmailProvider interface and updating the getEmailProvider function to include your new provider.

Checkout useEmail which includes other email providers like SendGrid and Mailgun.