integrazioni · framework

Un modulo di contatto Nuxt che sopravvive a nuxt generate.

Nuxt include un server: un file in server/api/ dà un endpoint Nitro senza altro setup, rendendo semplice il modulo. Poi esegui nuxt generate per il CDN e la soluzione sparisce: una build statica non ha runtime Nitro, quindi server/api/contact.post.ts viene compilato ma non pubblicato dove possa essere eseguito.

È la trappola di chi sceglie Nuxt proprio per lo statico. Punta a mailcontact e il modulo funziona ugualmente con nuxt build su Node, nuxt generate su CDN e il prossimo preset scelto dall’hosting.

configurazione consigliata

Usa lo script MailContact con il tuo design.

Aggiungi questo HTML al sito oppure usa generatore di moduli. Sostituisci il link del modulo con il tuo. Lo script ospitato inserisce il controllo nascosto, gestisce invio e verifica automatica e conserva la bozza in caso di errore. Tu controlli HTML e CSS. I moduli Free mostrano un link visibile “Processed by mailcontact.app”; Pro e Plus no. I messaggi seguono la lingua del browser; imposta data-mailcontact-language="fr" sul modulo per impostare il francese.

contact.html
<form action="https://mailcontact.app/api/forms/your-form-id" method="POST" data-mailcontact-form lang="it" data-mailcontact-language="it">
  <input type="hidden" name="_language" value="it" />
  <fieldset>
    <legend>Contattaci</legend>
    <label>
      Nome (facoltativo)
      <input name="name" type="text" autocomplete="name" maxlength="200" />
    </label>
    <label>
      Email
      <input name="email" type="email" autocomplete="email" maxlength="320" required />
    </label>
    <label>
      Messaggio
      <textarea name="message" rows="5" maxlength="5000" required></textarea>
    </label>
    <noscript>
    <div aria-hidden="true" style="position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;">
      <label>Sito web
        <input name="company_website" type="text" tabindex="-1" autocomplete="off" />
      </label>
    </div>
    </noscript>
    <button type="submit">Invia messaggio</button>
  </fieldset>
  <p data-contact-status role="status" aria-live="polite" aria-atomic="true"></p>
</form>
<script defer src="https://mailcontact.app/forms/v1.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Per un componente con un proprio gestore di invio, carica lo stesso script e usa MailContact.prepare(form) e MailContact.send() al posto del marcatore automatico. Consulta riferimento per interfacce personalizzate per caricamento, messaggi e attribuzione Free.

lo snippet

Alternativa: integrazione diretta per Nuxt.

Questo esempio invia direttamente all’API. Mantieni il campo obbligatorio company_website presente e vuoto. Gli invii nativi aprono JSON in caso di successo o una pagina di verifica se serve. Gli script personalizzati senza supporto alla verifica inviano i messaggi sospetti in Spam per revisione; anche lo spam evidente resta lì senza notifiche né consumo di quota. Una risposta di successo conferma la ricezione, anche per revisione, oppure lo scarto silenzioso di un controllo compilato. Vedi protezione antispam per il comportamento completo.

pages/contact.vue
<script setup>
// No server/api/contact.post.ts. Nothing here needs Nitro at runtime,
// so `nuxt generate` keeps this page fully working.
const sent = ref(false);

async function submit(event) {
  await $fetch("https://mailcontact.app/api/forms/your-form-id", {
    method: "POST",
    body: new FormData(event.target),
  });
  sent.value = true;
}
</script>

<template>
  <p v-if="sent">Thanks. We'll be in touch.</p>

  <form v-else @submit.prevent="submit">
    <input name="name" placeholder="Your name" required />
    <input name="email" type="email" placeholder="[email protected]" required />
    <textarea name="message" placeholder="What's on your mind?" required />
    <input name="company_website" type="text" tabindex="-1" autocomplete="off"
      style="position:absolute;left:-10000px" aria-hidden="true" />

    <button>Send</button>
  </form>
</template>

come funziona

Tre passaggi dall’inizio alla fine.

01

Crea una casella

Una casella per progetto. Endpoint modulo ed email sono attivi prima di aggiungere la pagina.

02

Aggiungi la pagina

Incolla in pages/contact.vue e cambia l’ID endpoint. Nessun file server/, voce runtimeConfig o chiave privata da escludere dal bundle client.

03

Ricevi notifiche

Aggiungi Discord, Slack, email o webhook: gli invii ti raggiungono appena arrivano.

perché mailcontact

Pensato per funzionare con Nuxt.

L’output statico resta possibile

Una route Nitro impedisce di accontentarsi di nuxt generate. Tieni esterno il modulo e puoi pubblicare l’intero sito come file quando vuoi.

Nessuna chiave email in runtimeConfig

La versione fai da te richiede una chiave API email: un segreto da conservare e configurazioni per hosting da sbagliare. Qui nessuna chiave può trapelare o richiede rotazione.

Il preset non conta più

I preset Nitro cambiano con l’host e una route server può comportarsi diversamente. Markup verso URL esterno si comporta uguale ovunque perché non tocca il preset.

FAQ

Nuxt + mailcontact: le risposte

Posso usare una route server Nuxt?

Sì, se pubblichi un server. server/api/contact.post.ts funziona con nuxt build e preset Node o serverless. Non con nuxt generate: un sito prerenderizzato non ha runtime Nitro per ricevere POST. Se vuoi output statico, tieni il modulo fuori dal grafo server.

Funziona con Nuxt 3 e Nuxt 4?

Sì. L’esempio usa solo ref, $fetch e @submit.prevent, stabili in entrambi. Puoi sostituire $fetch con fetch nativo: il payload è sempre FormData, quindi non dipende dal livello fetch di Nuxt.

Conviene usare useFetch qui?

No. useFetch è per dati necessari al rendering e deduplica e memorizza in cache: non è adatto a un POST singolo attivato da un clic. Chiama $fetch (o fetch) direttamente nel gestore d’invio.

Come evito lo spam senza captcha?

company_website deve essere presente e vuoto. Compilarlo scarta silenziosamente l’invio, ma un bot capace può ignorarlo. MailContact applica anche limiti sul server e controlli su contenuti e campagne. Lo script ospitato gestisce la verifica automatica quando serve; lo spam evidente resta in revisione senza notifiche né consumo di quota.

correlati

Funziona anche con

Una casella per ogni progetto Nuxt che pubblichi.

Moduli e un vero indirizzo email insieme, con notifiche dove lavori. Inizia con un account gratuito.

Crea un modulo gratis

Non serve la carta di credito. Free include un progetto e 50 messaggi dal modulo al mese.