# 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](/it/docs/domains/add-a-domain/), ad esempio `acme.com`.
- Una [chiave API](/it/docs/developers/api-keys/). Basta una chiave di solo invio limitata al tuo dominio.
- Finché il workspace non ha l’[accesso alla produzione](/it/docs/workspaces/production-access/), puoi inviare solo agli indirizzi email degli account dei membri del workspace.

## Installa l’SDK

```bash
npm install @emailit/node
```

## Configura la chiave API

Dichiara le chiavi private del runtime config. Le chiavi fuori da `public` sono disponibili solo sul server:

```typescript title="nuxt.config.ts"
  runtimeConfig: {
    emailitApiKey: '',
    emailitWebhookSecret: '',
  },
});
```

Nuxt le valorizza dalle variabili d’ambiente con il prefisso `NUXT_`:

```bash title=".env"
NUXT_EMAILIT_API_KEY=secret_••••••••••••••••••••••••••••••••
NUXT_EMAILIT_WEBHOOK_SECRET=whsec_••••••••
```

> **Tieni la chiave fuori da runtimeConfig.public:** I valori in `runtimeConfig.public` vengono inviati al browser. Non inserire mai lì la chiave API e non chiamare mai Emailit da un componente o da una pagina.

Aggiungi una piccola funzione di supporto. I file in `server/utils` vengono importati automaticamente nelle server route:

```typescript title="server/utils/emailit.ts"

  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:

```typescript title="server/api/contact.post.ts"
  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`:

```vue title="pages/contact.vue"
<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](/it/docs/templates/) e [Invia un’email](/it/docs/api-reference/emails/send/).

## 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.

```typescript title="server/utils/mailer.ts"

  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](/it/docs/smtp/settings/).

## Ricevi i webhook

[Crea un webhook](/it/docs/webhooks/set-up/) che punta a `https://your-app.com/api/webhooks/emailit`. Verifica la firma sul corpo grezzo, poi analizza l’array di eventi:

```typescript title="server/api/webhooks/emailit.post.ts"

  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](/it/docs/webhooks/request-signature/).

## Consigli per la produzione

- **Imposta i secret nel tuo hosting.** Configura `NUXT_EMAILIT_API_KEY` nelle 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](/it/docs/limits/).
- **Usa chiavi separate per ogni ambiente**, così puoi revocare una chiave di anteprima senza toccare la produzione.

## Passaggi successivi

  - [Guida per Node.js](/it/docs/frameworks/nodejs/): Gestione degli errori e dettagli su Nodemailer.
  - [Invia email con l’API](/it/docs/email-api/send-email/): Allegati, programmazione e tracciamento.
  - [Tipi di evento dei webhook](/it/docs/webhooks/event-types/): Ogni evento e il suo payload.
  - [Chiavi API](/it/docs/developers/api-keys/): Permessi, limitazioni a un dominio e rotazione.

---
Fonte: https://emailit.com/it/docs/frameworks/nuxt/