# Nuxt Integration Guide

Complete guide to integrate MyFormCapture with Nuxt

      Setup time: **5-10 minutes
      Difficulty: **Easy
        Compatible versions: **Nuxt 3**

Add a MyFormCapture contact form to a Nuxt 3 app with a client-side submit handler. Use `FormData` and `fetch` so submissions reach your dashboard without a custom API route.

## ** Prerequisites

- ** A MyFormCapture account — [sign up here](/users/sign_up)
- ** A form created in your MyFormCapture dashboard with its UUID copied
- ** A Nuxt 3 project
- ** Basic Vue / Nuxt familiarity

## ** Integration Methods

### Client-side FormData + fetch

                5 minutes

                Easy

Use a client-only form component (`<ClientOnly>` or a `.client.vue` file) and POST `FormData` to MyFormCapture.

                  1

#### Copy your form UUID

                    Grab the UUID for the form that should receive submissions.

1. Log in to your MyFormCapture dashboard
2. Open the form
3. Copy the form UUID from the URL or settings

##### Important Note

                            Each form has a unique UUID — keep it correct.

                  2

#### Create a client form component

                    Add a Nuxt component that submits with `fetch` and `FormData`.

1. Create `components/ContactForm.client.vue` (or wrap with `<ClientOnly>`)
2. Replace `YOUR_FORM_UUID` with your UUID
3. Use the component on a page such as `pages/contact.vue`

```
<script setup>
const endpoint = 'https://myformcapture.com/f/YOUR_FORM_UUID'
const status = ref('idle')
const errorMessage = ref('')

async function onSubmit(e) {
  e.preventDefault()
  status.value = 'loading'
  errorMessage.value = ''

  try {
    const res = await fetch(endpoint, {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'X-Requested-With': 'XMLHttpRequest'
      },
      body: new FormData(e.target)
    })
    if (!res.ok) throw new Error('Submission failed')
    status.value = 'success'
    e.target.reset()
  } catch {
    status.value = 'error'
    errorMessage.value = 'Something went wrong. Please try again.'
  }
}
</script>

<template>
  <p v-if="status === 'success'">Thanks — we will be in touch soon.</p>
  <form v-else action="https://myformcapture.com/f/YOUR_FORM_UUID" method="POST" data-mfc="true" @submit="onSubmit">
    <label for="name">Name *</label>
    <input id="name" name="name" type="text" required />

    <label for="email">Email *</label>
    <input id="email" name="email" type="email" required />

    <label for="message">Message</label>
    <textarea id="message" name="message" rows="4"></textarea>

    <button type="submit" :disabled="status === 'loading'">
      {{ status === 'loading' ? 'Sending…' : 'Send Message' }}
    </button>
    <p v-if="status === 'error'">{{ errorMessage }}</p>
  </form>
</template>
```

##### Important Note

                            Prefer a `.client.vue` suffix so the browser `fetch` runs only on the client. Do not `JSON.stringify` the body.

                  3

#### Test the submission

                    Confirm the lead appears in your dashboard.

1. Run `nuxt dev` and open the contact page
2. Submit the form
3. Check MyFormCapture under **Leads** or **Form Responses

##### Important Note

                            If Domain Restriction is on, allow `http://localhost:3000` (or your dev URL) in the dashboard.

## ** Troubleshooting

              Keep the submit handler client-only (`.client.vue` or `<ClientOnly>`). Do not call the MyFormCapture endpoint from a server route unless you intentionally proxy it.

              Verify the form UUID, then open **Leads** or **Form Responses**. Confirm Domain Restriction allows your Nuxt origin if enabled.

              Send `FormData` with `Accept: application/json` and `X-Requested-With: XMLHttpRequest`. Do not set `Content-Type` manually.

#### Still having issues?

Can't find the answer you're looking for? Our support team is here to help with your integration.

          [** Contact Support](/support)

## ** Related Integrations

      [Next.js Integration Guide →](/docs/frameworks/nextjs)      [Vue Integration Guide →](/docs/frameworks/vue)      [Static Sites Integration Guide →](/docs/deployment/static-sites)

## ** References & Official Documentation

- ** [Getting Started Guide](/docs/getting-started)
- ** [Custom Webhooks](/docs/tools/code/custom-webhooks)

## ** Next Steps

#### ** Configure MyFormCapture

- ** Set up your timezone
- ** Configure lead notifications
- ** Set up advanced spam detection
- ** Add team members to your account

#### ** Advanced Features

- ** Use our custom form templates
- ** Try AI Insights for Leads
- ** Integrate with your CRM
- ** Set up automated workflows