Vue 3 & Nuxt 3 (Composition API)

Get Endpoint Free

Interactive Live Sandbox

Test submitting this live demo form in real-time.

Ready

3-Step Integration Checklist

1Create a form in your Formtruck Dashboard to get your endpoint URL.

2Paste the component code into your codebase.

3Receive instant submission alerts in your inbox and dashboard!

Implementation Code

Copy-paste ready

vue-integration.tsx

12345678910111213141516171819202122232425262728
<script setup>
import { ref } from 'vue';
 
const form = ref({ name: '', email: '', message: '', _gotcha: '' });
const loading = ref(false);
const submitted = ref(false);
 
async function submitForm() {
  loading.value = true;
  const res = await fetch('https://api.formtruck.com/f/ft_YOUR_FORM_ID', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
    body: JSON.stringify(form.value),
  });
  loading.value = false;
  if (res.ok) submitted.value = true;
}
</script>
 
<template>
  <form @submit.prevent="submitForm">
    <input v-model="form.name" placeholder="Your Name" required />
    <input v-model="form.email" type="email" placeholder="Email" required />
    <textarea v-model="form.message" placeholder="Message" required />
    <button :disabled="loading">{{ loading ? 'Sending...' : 'Send' }}</button>
    <p v-if="submitted">Thank you! Your submission was recorded.</p>
  </form>
</template>

Formtruck Special Form Field Attributes

name="_gotcha"Honeypot

Keep this field hidden via CSS. If a spam bot fills it out, Formtruck silently traps the submission into your spam folder.

name="_next"Redirect

Specify a custom thank-you page URL (e.g. https://yoursite.com/thank-you) for native HTML POST submissions.

name="_subject"Email Subject

Customize the email notification subject line (e.g. New VIP Client Inquiry).