# Vue Integration Guide

Complete guide to integrate MyFormCapture with Vue

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

Add a MyFormCapture contact form to a Vue 3 app with the Composition API. Submit with `FormData` and `fetch` — no custom backend required.

## ** Prerequisites

- ** A MyFormCapture account — [sign up here](/users/sign_up)
- ** A form created in your MyFormCapture dashboard with its UUID copied
- ** A Vue 3 project (Vite or similar)
- ** Basic familiarity with the Composition API (`ref`, `<script setup>`)

## ** Integration Methods

### Composition API + fetch

                5 minutes

                Easy

Build a contact form with `<script setup>`, then POST `FormData` to MyFormCapture. Do not `JSON.stringify` the fields.

                  1

#### Copy your form UUID

                    You need the UUID MyFormCapture assigned to your form.

1. Log in to your MyFormCapture dashboard
2. Open the form you want to use
3. Copy the form UUID (e.g. `550e8400-e29b-41d4-a716-446655440000`)

##### Important Note

                            Using the wrong UUID sends submissions to the wrong form.

                  2

#### Add a Vue 3 contact form component

                    Create a component that posts `FormData` to your form endpoint.

1. Create `ContactForm.vue` (or add the form to an existing view)
2. Replace `YOUR_FORM_UUID` with your form UUID
3. Import and render the component on your contact page

```
<script setup>
import { ref } from 'vue'

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

                            Use `new FormData(e.target)` — do not set `Content-Type` manually. Do not `JSON.stringify` the payload.

                  3

#### Run and verify

                    Submit a test entry and confirm it appears in MyFormCapture.

1. Start your Vue app and open the contact page
2. Fill in the form and click Submit
3. Check your MyFormCapture dashboard under **Leads** or **Form Responses

##### Important Note

                            If Domain Restriction is enabled, add your local origin (e.g. `http://localhost:5173`) in the dashboard.

## ** Troubleshooting

              Confirm the form UUID in the endpoint URL is correct, then check **Leads** or **Form Responses** for the right form. Also verify your site URL is listed under Domains if restriction is enabled.

              Post `FormData` (not JSON). Include `Accept: application/json` and `X-Requested-With: XMLHttpRequest` so the endpoint returns JSON instead of a redirect. Check the browser Network tab for the POST status.

              Add your production origin to the allowed domains list in MyFormCapture. Redeploy after changing environment-specific UUID values.

#### 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