NUXT Integration

Overview

Collect serverless forms in your Nuxt 3 projects using Nuxt's $fetch API and composable components.

Build with AI (LLM Prompt)

promptprompt

Create a Nuxt 3 contact form template using Composition API and Nuxt $fetch routing to:
https://voieform.com/f/<YOUR-FORM-API-KEY-HERE>

What you'll get out of the box:

Nuxt 3 directory compatible

Universal rendering support (SSR & client hydrations)

Integration with Nuxt server routes

Handles reactive error and success states

Setup instructions

bashbash

# Built directly with standard Nuxt 3 utilities.

Code Example

javascriptjavascript

<template>
  <form @submit.prevent="handleSubmit" class="space-y-4 max-w-sm">
    <input v-model="email" type="email" placeholder="Your Email" required class="border p-2 w-full rounded" />
    <textarea v-model="message" placeholder="Message" required class="border p-2 w-full rounded"></textarea>
    <button type="submit" :disabled="pending" class="bg-blue-600 text-white px-4 py-2 rounded">
      {{ pending ? 'Sending...' : 'Submit' }}
    </button>
    <p v-if="success" class="text-emerald-500 text-xs">Form submitted!</p>
  </form>
</template>

<script setup>
const email = ref('');
const message = ref('');
const pending = ref(false);
const success = ref(false);

const handleSubmit = async () => {
  pending.value = true;
  try {
    await $fetch('https://voieform.com/f/YOUR_FORM_API_KEY', {
      method: 'POST',
      body: { email: email.value, message: message.value }
    });
    success.value = true;
    email.value = '';
    message.value = '';
  } catch (err) {
    alert('Submission failed.');
  } finally {
    pending.value = false;
  }
};
</script>

Need help?

Contact Support