← Blog

Receive form submissions in Nuxt without a Nitro route

Receive Nuxt form submissions with a hosted endpoint — native form or $fetch, no Nitro route required.

To receive form submissions in Nuxt without a Nitro server route, either post a plain HTML form to a hosted endpoint or call it with $fetch from a component. No server/api handler, no database — the endpoint accepts the email and keeps it against your campaign.

Native form vs $fetch

For inline UX, submit with $fetch and your public campaign id (pub_...). Keep ss_live_ keys out of the browser entirely — the public id is all the client needs. If you do not need client-side success/error states, a native form post is even smaller.

Nuxt component ($fetch)
<!-- components/SignupForm.vue -->
<script setup lang="ts">
const email = ref('');
const state = ref<'idle' | 'sending' | 'done' | 'error'>('idle');
async function submit() {
  state.value = 'sending';
  try {
    await $fetch('https://simple-signups.com/api/subscribe', {
      method: 'POST',
      body: { campaignId: 'pub_your_campaign_id', email: email.value },
    });
    state.value = 'done';
  } catch {
    state.value = 'error';
  }
}
</script>


<template>
  <form @submit.prevent="submit">
    <input v-model="email" type="email" required placeholder="you@example.com" />
    <button :disabled="state === 'sending'">Subscribe</button>
  </form>
</template>

When you do not need Nitro

Static-generated marketing pages often do not need a Nitro route at all. If the form’s job is only to capture an email or enquiry, a native <form action> posting to the endpoint works without any script. Allow-list every hostname you embed from; fields and errors are in the quickstart.

Related