Vue Contact Form Without a Backend (Composition API)

A Vue contact form doesn't need a server. The form POSTs to a hosted endpoint; the service behind it stores the submission, screens the spam, and emails you. Your Vue app stays a static bundle — Vite build, any CDN, no API route, no nodemailer, no credentials in client code.

Two patterns cover it, both against the same endpoint.

Pattern 1: plain action, zero script

If the contact page just needs to work, HTML already does this:

<template>
  <form action="https://shipmyform.com/f/YOUR_FORM_ID" method="POST">
    <input type="text" name="name" placeholder="Your name" required />
    <input type="email" name="email" placeholder="[email protected]" required />
    <textarea name="message" placeholder="How can we help?" required></textarea>
    <!-- honeypot: hidden from humans, filled by bots -->
    <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" style="display:none" />
    <input type="hidden" name="_redirect" value="https://yoursite.com/thanks" />
    <button type="submit">Send</button>
  </form>
</template>

No script block at all. Field names become the fields you receive; _redirect returns the visitor to your thank-you page.

Pattern 2: Composition API with status states

To stay on the page with a disabled button and inline confirmation:

<script setup>
import { ref } from "vue";

const status = ref("idle"); // idle | sending | sent | error

async function submit(e) {
  status.value = "sending";
  try {
    const res = await fetch("https://shipmyform.com/f/YOUR_FORM_ID", {
      method: "POST",
      headers: { Accept: "application/json" },
      body: new FormData(e.target),
    });
    status.value = res.ok ? "sent" : "error";
  } catch {
    status.value = "error";
  }
}
</script>

<template>
  <p v-if="status === 'sent'">Thanks — we'll get back to you soon.</p>
  <form v-else @submit.prevent="submit">
    <input type="text" name="name" placeholder="Your name" required />
    <input type="email" name="email" placeholder="[email protected]" required />
    <textarea name="message" placeholder="How can we help?" required></textarea>
    <button type="submit" :disabled="status === 'sending'">
      {{ status === "sending" ? "Sending…" : "Send" }}
    </button>
    <p v-if="status === 'error'" role="alert">Something went wrong — try again.</p>
  </form>
</template>

Notice what's absent: no v-model per field, no reactive form object. new FormData(e.target) reads the DOM at submit time — v-model earns its place only when something must react while the user types. The endpoint returns JSON ({ ok: true }) because of the Accept header; error handling in more depth lives in submit a form with fetch.

Nuxt, and the "just add a server route" question

On a static or SPA Nuxt site, the pattern above is the answer as-is. If you run the Nuxt server, you could proxy the form through a server route — but for a contact form it usually adds moving parts without capability: sending email still needs authenticated infrastructure, spam still needs screening, submissions still need to live somewhere. That's the whole job of a form backend, and as of 2026 ShipMyForm's free plan does it for 100 submissions a month — spam pipeline, searchable inbox, Slack/Sheets/webhook routing — with Vue-specific docs for the details.

Next steps

• Compare with the React version — same two patterns, different framework accents.
• Generate the markup with your own fields (Vue output included): contact form generator.
• Create a free endpoint and the form above works as soon as you paste your form ID.