Vue integration

A Single-File Component with script setup (Composition API) that submits the form to Farvane with fetch.

<script setup>
import { ref } from "vue";

const ACCESS_KEY = "YOUR_ACCESS_KEY_HERE";
const status = ref("idle");

async function handleSubmit(event) {
  status.value = "sending";
  const formData = new FormData(event.target);
  formData.append("access_key", ACCESS_KEY);

  try {
    const response = await fetch("https://api.farvane.com/api/v1/submit", {
      method: "POST",
      headers: { Accept: "application/json" },
      body: formData,
    });
    const result = await response.json();
    status.value = result.success ? "success" : "error";
  } catch (error) {
    status.value = "error";
  }
}
</script>

<template>
  <form @submit.prevent="handleSubmit">
    <input type="checkbox" name="botcheck" style="display: none" tabindex="-1" autocomplete="off" />
    <input type="text" name="name" placeholder="Nombre" required />
    <input type="email" name="email" placeholder="Email" required />
    <textarea name="message" placeholder="Mensaje" required></textarea>
    <button type="submit" :disabled="status === 'sending'">
      {{ status === 'sending' ? 'Enviando...' : 'Enviar' }}
    </button>
    <p v-if="status === 'success'">¡Gracias! Hemos recibido tu mensaje.</p>
    <p v-if="status === 'error'">Algo falló. Inténtalo de nuevo.</p>
  </form>
</template>

botcheck is still the required honeypot field. access_key is appended to the FormData right before the fetch call, same as the React and Next.js examples.

Next step: create your account and copy your real access_key.