Integración de React Email en un Proyecto Nuxt

Antes de empezar, es importante que sepas que existe Vue Email, una alternativa inspirada en React Email que está diseñada específicamente para Vue. Al ser una solución basada en Vue, te ofrece una integración más natural y consistente con Nuxt. Sin embargo, si preferís usar React Email por su madurez o funcionalidades específicas, esta guía te va a ayudar a integrarlo correctamente en tu proyecto Nuxt.

La integración de React Email en un proyecto Nuxt te permite enviar correos electrónicos de manera eficiente y con un diseño atractivo. En este artículo, te voy a guiar paso a paso para configurar y usar React Email en tu proyecto.

Instalación de Dependencias

Para empezar, necesitás instalar las dependencias necesarias. Ejecutá el siguiente comando:

pnpm add resend react-dom react-email react @react-email/components
pnpm add -D @types/react @types/react-dom

Configuración Inicial

Después de instalar las dependencias, agregá el siguiente script a tu package.json para iniciar el servidor de desarrollo de emails:

"scripts": {
  "dev:emails": "email dev -p 5000"
}

Creá una carpeta para tus componentes de email:

mkdir emails
touch emails/hello-world.tsx

Configuración de TypeScript

Para evitar errores de compilación, ajustá las opciones del compilador en tu archivo tsconfig.json:

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "react"
  }
}

Configuración de JSX en Nuxt

Para que React Email funcione correctamente en tu proyecto Nuxt, es necesario configurar el soporte de JSX en nuxt.config.ts. Este paso es obligatorio, ya que sin él vas a obtener un error h is not defined:

export default defineNuxtConfig({
  nitro: {
    esbuild: {
      options: {
        jsx: 'automatic',
        jsxImportSource: 'react',
      },
    },
  },
})

Creación de un Componente de Email

En este ejemplo vamos a usar el componente StripeWelcomeEmail que está en la documentación oficial de React Email. Este es un excelente punto de partida ya que muestra las mejores prácticas de diseño de emails y cómo estructurar un componente de email profesional.

Creá un componente de email básico en emails/hello-world.tsx para empezar a diseñar tus correos electrónicos. Podés copiar el ejemplo de Stripe Welcome Email directamente desde la documentación y adaptarlo a tus necesidades.

Configuración de Resend

Para poder usar Resend necesitás configurar tu API key. Primero, modificá tu nuxt.config.ts para agregar la variable de configuración:

export default defineNuxtConfig({
  runtimeConfig: {
    resendApiKey: '', // Esta variable estará disponible solo en el servidor
  },
  // ... resto de tu configuración
})

El string vacío en resendApiKey es intencional - Nuxt automáticamente va a reemplazar este valor con cualquier variable de entorno que siga el formato NUXT_ + el nombre de la variable en snake_case. En este caso, resendApiKey se va a reemplazar con el valor de NUXT_RESEND_API_KEY.

Después creá un archivo .env en la raíz de tu proyecto y agregá tu API key de Resend:

NUXT_RESEND_API_KEY=re_123...  # Tu API key de Resend

Configuración del Endpoint para Envío de Emails

Configurá un endpoint en el servidor para enviar emails usando resend. Acá te muestro cómo hacerlo:

import { Resend } from 'resend'
import { render } from '@react-email/components'
import { StripeWelcomeEmail } from '~~/emails/hello-world'

export default defineEventHandler(async (event) => {
    const { resendApiKey } = useRuntimeConfig(event)

    const resend = new Resend(resendApiKey)

    const { error } = await resend.emails.send({
        from: 'example@domain.com',
        to: 'recipient@example.com',
        subject: 'Test email',
        html: await render(<StripeWelcomeEmail />),
    })

    if (error) {
        throw createError({
            statusCode: 500,
            statusMessage: error.message
        })
    }
    
    return 'Email sent successfully!'
})

Conclusión

Siguiendo estos pasos, vas a tener todo lo necesario para integrar React Email en tu proyecto Nuxt, permitiéndote enviar correos electrónicos con un diseño profesional y personalizado de manera eficiente.

Es una solución robusta que, si bien requiere un poco más de configuración por ser React en un proyecto Vue, te da acceso a un ecosistema maduro de componentes y herramientas para diseño de emails.