Vue & Nuxt

Plain HTML works too

If you don't need an in-page success state, skip JavaScript entirely: point your <form action> at the endpoint and let the browser post and follow the redirect — see Plain HTML. The rest of this guide covers AJAX submissions with a JSON response.

Composition API with fetch

Post a FormData with the Accept: application/json header and render the result. Keep the hidden _honey field in your template — it's our spam honeypot.

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

const status = ref("idle"); // idle | submitting | success | error
const message = ref("");

async function onSubmit(event) {
  status.value = "submitting";
  const response = await fetch(
    "https://api.formcrest.com/v1/submit/abc123",
    {
      method: "POST",
      headers: { Accept: "application/json" },
      body: new FormData(event.target),
    },
  ).catch(() => null);

  if (response?.ok) {
    status.value = "success";
  } else {
    status.value = "error";
    const body = await response?.json().catch(() => null);
    message.value = body?.message ?? "Something went wrong. Please try again.";
  }
}
</script>

<template>
  <p v-if="status === 'success'">Thanks — we'll be in touch.</p>
  <form v-else @submit.prevent="onSubmit">
    <input type="email" name="email" required />
    <textarea name="message" required></textarea>

    <!-- Honeypot — keep it hidden from real users. -->
    <input
      type="text"
      name="_honey"
      tabindex="-1"
      autocomplete="off"
      style="display: none"
    />

    <button type="submit" :disabled="status === 'submitting'">
      {{ status === "submitting" ? "Sending…" : "Send" }}
    </button>
    <p v-if="status === 'error'" role="alert">{{ message }}</p>
  </form>
</template>

Using the SDK instead

The submit() function from @formcrest/sdk is framework-agnostic — it handles the headers, JSON parsing, and network errors for you and never throws:

npm install @formcrest/sdk

import { submit } from "@formcrest/sdk";

async function onSubmit(event) {
  status.value = "submitting";
  const result = await submit("abc123", new FormData(event.target));

  if (result.ok) {
    status.value = "success";
  } else {
    status.value = "error";
    message.value = result.message;
    // result.fieldErrors?.email, etc.
  }
}

Only the React hook is framework-specific; everything else in the SDK works the same in Vue. See React & Next.js for the full submit() options (accessKey, idempotencyKey, apiBase, signal).

Nuxt

The component above is client-side, so in Nuxt it works as-is inside any page or component — no server route needed. If you render the form on a static or server-rendered page, nothing changes: the submission happens from the browser when the visitor hits send.

Next steps

• Submit API reference — everything the endpoint accepts.
• Error codes — the values you'll see in error.
• Form configuration — redirects, domain whitelist, notification frequency.