Vue.js Integration

Embed your form into any Vue.js (or Nuxt) application effortlessly.

Using Iframe in Vue

Vue single-file components make it very easy to include external content. Just drop the iframe inside the <template> block of your component.

<template>
  <div class="form-container">
    <h2>Get in Touch</h2>
    <iframe 
      src="https://yourformapp.com/embed/YOUR_FORM_ID" 
      width="100%" 
      height="600px" 
      style="border: none"
    ></iframe>
  </div>
</template>

<style scoped>
.form-container {
  max-width: 800px;
  margin: 0 auto;
}
</style>

This approach works exactly the same whether you are using standard Vue 3, Vue 2, or Nuxt.js!

Using Vibe Code & Generated Form API URL

If you are writing vibe code in Vue or Nuxt to construct custom input components, you can either place your Form API URL directly into the <template> block's action attribute or post data using JavaScript:

Option A: Direct <form action="..." method="POST"> in Vue Template

Paste your Form API URL into your Vue component's action attribute:

<template>  <form action="https://yourformapp.com/api/v1/submit/YOUR_FORM_ID" method="POST"> <input type="text" name="name" placeholder="Full Name" required /> <input type="email" name="email" placeholder="Email Address" required /> <button type="submit">Submit Form</button> </form> </template>

Option B: Dynamic Vue Submission with Fetch & Redirects

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

const name = ref('')
const email = ref('')
const formApiUrl = 'https://yourformapp.com/api/v1/submit/YOUR_FORM_ID'

const submitForm = async () => {
  const res = await fetch(formApiUrl, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ answers: { name: name.value, email: email.value } })
  })
  const data = await res.json()
  if (data.redirectUrl) {
    window.location.href = data.redirectUrl
  } else {
    alert('Submitted successfully via Form API!')
  }
}
</script>

<template>
  <form @submit.prevent="submitForm" class="custom-vibe-form">
    <input v-model="name" placeholder="Your Name" required />
    <input v-model="email" type="email" placeholder="Your Email" required />
    <button type="submit">Submit via Form API</button>
  </form>
</template>