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
- 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.
- Log in to your MyFormCapture dashboard
- Open the form
- 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.
- Create
components/ContactForm.client.vue(or wrap with<ClientOnly>) - Replace
YOUR_FORM_UUIDwith your UUID - 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.
- Run
nuxt devand open the contact page - Submit the form
- 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.
Related Integrations
References & Official Documentation
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