Tutorial
Invia email con Nuxt
Invia email da una server API route di Nuxt con l’SDK Node.js di Emailit, tieni la chiave nel runtimeConfig privato e verifica i webhook con h3.
Questa guida mostra come inviare email da un’app Nuxt 3. Chiami Emailit da una server API route, tieni la chiave API nel runtimeConfig privato e verifichi i webhook con le funzioni di supporto di h3.
Prerequisiti
- Nuxt 3 con un preset server Node.js 18+.
- Un dominio di invio verificato, ad esempio
acme.com. - Una chiave API. Basta una chiave di solo invio limitata al tuo dominio.
- Finché il workspace non ha l’accesso alla produzione, puoi inviare solo agli indirizzi email degli account dei membri del workspace.
Installa l’SDK
npm install @emailit/nodeConfigura la chiave API
Dichiara le chiavi private del runtime config. Le chiavi fuori da public sono disponibili solo sul server:
export default defineNuxtConfig({
runtimeConfig: {
emailitApiKey: '',
emailitWebhookSecret: '',
},
});Nuxt le valorizza dalle variabili d’ambiente con il prefisso NUXT_:
NUXT_EMAILIT_API_KEY=secret_••••••••••••••••••••••••••••••••
NUXT_EMAILIT_WEBHOOK_SECRET=whsec_••••••••Aggiungi una piccola funzione di supporto. I file in server/utils vengono importati automaticamente nelle server route:
import type { H3Event } from 'h3';
import { Emailit } from '@emailit/node';
export function emailitClient(event: H3Event) {
return new Emailit(useRuntimeConfig(event).emailitApiKey);
}Se TypeScript segnala una dichiarazione mancante per @emailit/node, aggiungi declare module '@emailit/node'; a un file .d.ts nel tuo progetto.
Invia un’email
Crea una server API route. Questa route per un modulo di contatto invia a un indirizzo interno fisso, così i visitatori non possono usarla per scrivere a persone qualsiasi:
export default defineEventHandler(async (event) => {
const { email, message } = await readBody(event);
if (typeof email !== 'string' || typeof message !== 'string' || !email.includes('@')) {
throw createError({ statusCode: 400, statusMessage: 'Invalid input' });
}
const sent = await emailitClient(event).emails.send({
from: 'Acme website <website@acme.com>',
to: 'support@acme.com',
reply_to: email,
subject: 'New contact form message',
text: message,
});
return { id: sent.id };
});Chiamala da una pagina o da un componente con $fetch:
<script setup lang="ts">
const email = ref('');
const message = ref('');
const sent = ref(false);
async function submit() {
await $fetch('/api/contact', {
method: 'POST',
body: { email: email.value, message: message.value },
});
sent.value = true;
}
</script>
<template>
<form @submit.prevent="submit">
<input v-model="email" type="email" required />
<textarea v-model="message" required />
<button type="submit">Send</button>
<p v-if="sent">Thanks, we'll be in touch.</p>
</form>
</template>Per inviare un template salvato invece del contenuto inline, passa template (un alias o un ID tem_) e variables. Vedi Template e Invia un’email.
Invia con SMTP
Se preferisci SMTP, usa Nodemailer in una server route. SMTP richiede un preset server Node.js; i preset edge e worker non possono aprire connessioni SMTP, quindi lì usa l’API.
import nodemailer from 'nodemailer';
export function mailer() {
return nodemailer.createTransport({
host: 'smtp.emailit.com',
port: 587,
secure: false,
requireTLS: true,
auth: { user: 'emailit', pass: useRuntimeConfig().emailitApiKey },
});
}Poi chiama await mailer().sendMail({ from, to, subject, html }) da una route. Per le altre porte, vedi Impostazioni SMTP.
Ricevi i webhook
Crea un webhook che punta a https://your-app.com/api/webhooks/emailit. Verifica la firma sul corpo grezzo, poi analizza l’array di eventi:
import { createHmac, timingSafeEqual } from 'node:crypto';
export default defineEventHandler(async (event) => {
const rawBody = (await readRawBody(event)) ?? '';
const signature = getHeader(event, 'x-emailit-signature') ?? '';
const timestamp = getHeader(event, 'x-emailit-timestamp') ?? '';
const secret = useRuntimeConfig(event).emailitWebhookSecret;
const age = Math.abs(Math.floor(Date.now() / 1000) - Number(timestamp));
const expected = createHmac('sha256', secret).update(`${timestamp}.${rawBody}`).digest('hex');
const valid =
Number.isFinite(age) &&
age <= 300 &&
expected.length === signature.length &&
timingSafeEqual(Buffer.from(expected), Buffer.from(signature));
if (!valid) {
throw createError({ statusCode: 401, statusMessage: 'Invalid signature' });
}
const events = JSON.parse(rawBody) as Array<{ event_id: string; type: string; data: { object: any } }>;
for (const item of events) {
if (item.type === 'email.complained') {
// Stop emailing item.data.object.to
}
}
return { received: events.length };
});Restituisci un 2xx entro 30 secondi; le altre risposte vengono ritentate. Vedi Firma delle richieste.
Consigli per la produzione
- Imposta i secret nel tuo hosting. Configura
NUXT_EMAILIT_API_KEYnelle impostazioni dell’ambiente del tuo provider di hosting invece di distribuire un file.env. - Convalida prima di inviare. Accetta un destinatario dal browser solo quando è l’indirizzo dell’utente che ha effettuato l’accesso, e limita la frequenza delle route pubbliche. Ogni email costa crediti e rientra nei limiti di invio.
- Usa chiavi separate per ogni ambiente, così puoi revocare una chiave di anteprima senza toccare la produzione.