Using FormBeep in Vue#

If you are building a Vue or Nuxt application, bypassing the embed script and calling the FormBeep API directly provides the best experience. It prevents DOM-manipulation conflicts and allows you to bind Vue’s reactive state natively.

API Integration#

Here is a simple example using Vue 3 Composition API:

<template>
  <form @submit.prevent="submitForm">
    <input v-model="form.name" type="text" placeholder="Name" required />
    <input v-model="form.email" type="email" placeholder="Email" required />
    <textarea v-model="form.message" placeholder="Message" required></textarea>

    <button type="submit" :disabled="status === 'submitting'">
      {{ status === 'submitting' ? 'Sending...' : 'Send' }}
    </button>

    <p v-if="status === 'success'" class="success">
      Message sent successfully!
    </p>
    <p v-if="status === 'error'" class="error">
      Something went wrong. Please try again.
    </p>
  </form>
</template>

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

const form = reactive({
  name: '',
  email: '',
  message: ''
})

const status = ref('idle')

const submitForm = async () => {
  status.value = 'submitting'

  try {
    const response = await fetch('https://api.formbeep.com/v1/submit/YOUR_API_KEY', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      },
      // Vue's reactive object can be stringified directly
      body: JSON.stringify(form)
    })

    if (response.ok) {
      status.value = 'success'
      // Reset form
      form.name = ''
      form.email = ''
      form.message = ''
    } else {
      status.value = 'error'
    }
  } catch (error) {
    console.error(error)
    status.value = 'error'
  }
}
</script>

Advantages#

Full control over validation.
Can easily implement loaders.
Prevents external script evaluation on route changes in single-page applications.

Using the Embed Script#

If you really want to use the script, you would inject it in the standard fashion in either your index.html or app.vue (for Nuxt), ensuring it’s available globally. But beware of virtual DOM mismatches if the script attempts to inject response messages into your VNodes.