Does it work with `nuxt generate`?

Yes, with the client-side component, which POSTs directly to FormLoom.

Nuxt contact form

Verified against Nuxt 3.x · June 2026

Nuxt 3 can submit to FormLoom from the client (simplest) or via a Nitro server route (`server/api`) if you want to keep the request server-side. For a static `nuxt generate` build, use the client component.

Customize in the generator Full Nuxt guide

The code

Use a `<script setup>` component with `@submit.prevent` for the simple path. If you need server-side handling, create a `server/api/contact.post.ts` route that forwards to FormLoom with `$fetch`.

Vue 3 single-file component

ContactForm.vue

<!-- ContactForm.vue — Vue 3 / Nuxt 3 -->
<script setup>
import { ref } from "vue";
const status = ref("idle");
async function submit(e) {
  const res = await fetch("https://formloom.vercel.app/api/submit/YOUR_ACCESS_KEY", {
    method: "POST",
    headers: { "Content-Type": "application/json", Accept: "application/json" },
    body: JSON.stringify(Object.fromEntries(new FormData(e.target))),
  });
  status.value = (await res.json()).success ? "ok" : "error";
}
</script>

<template>
  <p v-if="status === 'ok'">Thanks — we got your message.</p>
  <form v-else @submit.prevent="submit">
    <label>
      Name
      <input type="text" name="name" required />
    </label>
    <label>
      Email
      <input type="email" name="email" required />
    </label>
    <label>
      Message
      <textarea name="message" required placeholder="How can we help?"></textarea>
    </label>
    <!-- honeypot: bots fill this, humans don't see it -->
    <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off" />
    <button type="submit">Send</button>
  </form>
</template>

@formloom/client (typed SDK)

submit.ts

// npm i @formloom/client
import { createForm } from "@formloom/client";

type Contact = {
  name: string;
  email: string;
  message: string;
};

const form = createForm<Contact>("YOUR_ACCESS_KEY");

// End-to-end typed: TS errors if you send the wrong shape.
const { success, message } = await form.submit({
  name: form.name.value,
  email: form.email.value,
  message: form.message.value,
});

AJAX fetch (vanilla JS)

contact.html

<form id="contact-form">
  <label>
    Name
    <input type="text" name="name" required />
  </label>
  <label>
    Email
    <input type="email" name="email" required />
  </label>
  <label>
    Message
    <textarea name="message" required placeholder="How can we help?"></textarea>
  </label>
  <!-- honeypot: bots fill this, humans don't see it -->
  <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off" />
  <button type="submit">Send</button>
</form>

<script>
const form = document.getElementById("contact-form");
form.addEventListener("submit", async (e) => {
  e.preventDefault();
  const res = await fetch("https://formloom.vercel.app/api/submit/YOUR_ACCESS_KEY", {
    method: "POST",
    headers: { "Content-Type": "application/json", Accept: "application/json" },
    body: JSON.stringify(Object.fromEntries(new FormData(form))),
  });
  const data = await res.json();
  if (data.success) {
    form.reset();
    alert("Thanks — we got your message.");
  } else {
    alert(data.message || "Something went wrong.");
  }
});
</script>

Gotchas

On `nuxt generate` (static), there's no Nitro server at runtime — use the client variant.
If you use a Nitro route, forward with `$fetch` and return the FormLoom JSON.

Form types for Nuxt

Tailored field sets and code for common use cases.

Nuxt contact form Nuxt newsletter form Nuxt waitlist form Nuxt feedback form Nuxt support ticket form Nuxt lead capture form Nuxt rsvp form Nuxt job application form Nuxt survey form Nuxt bug report form

FAQ

Client component is simplest and works on static builds. Use a Nitro `server/api` route only if you need server-side processing.