# Vue

> Un composant monofichier Vue qui envoie à Ikiform, plus une route serveur Nuxt avec une clé secrète.

Vue envoie depuis le navigateur avec le SDK ou `fetch`. Aucun plugin ni étape de build n'est nécessaire au-delà de votre configuration habituelle.

## Installez le SDK

`Terminal`:

```bash
npm install @ikiform/sdk
```

## Un composant monofichier

`ContactForm.vue`:

```vue
<script setup>
import { submit } from "@ikiform/sdk";
import { ref } from "vue";

const status = ref("idle");
const errors = ref({});
const message = ref("");

async function onSubmit(event) {
  status.value = "sending";
  const result = await submit("frm_xxxxxxxxxxxxxxxx", new FormData(event.target));
  if (result.ok) {
    status.value = "sent";
    return;
  }
  errors.value = result.error.fields ?? {};
  message.value = result.error.message;
  status.value = "error";
}
</script>

<template>
  <p v-if="status === 'sent'">Thanks, we got it.</p>
  <form v-else @submit.prevent="onSubmit">
    <label>
      Email
      <input name="email" type="email" required />
    </label>
    <p v-if="errors.email">{{ errors.email[0] }}</p>
    <label>
      Message
      <textarea name="message"></textarea>
    </label>
    <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
    <p v-if="status === 'error' && !errors.email" role="alert">{{ message }}</p>
    <button :disabled="status === 'sending'">Send</button>
  </form>
</template>
```

Pour les formulaires avec la vérification humaine **Ikiform**, appelez `challenge(formId)` avant `submit` et passez le token dans `{ turnstileToken }`, comme dans le [guide React](https://ikiform.com/fr/docs/guides/react.md#component).

## Route serveur Nuxt

Pour envoyer plutôt depuis le serveur, ajoutez une route serveur qui transmet le corps avec une clé secrète. La page envoie alors du JSON à votre propre route. Pour un composant qui envoie directement depuis le navigateur, avec une solution de repli avant l'hydratation, voir [Nuxt](https://ikiform.com/fr/docs/guides/nuxt.md).

`server/api/contact.post.ts`:

```ts
export default defineEventHandler(async (event) => {
  const body = await readBody(event);
  return $fetch("https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx", {
    method: "POST",
    headers: { Authorization: `Bearer ${process.env.IKIFORM_SECRET_KEY}` },
    body,
    ignoreResponseError: true,
  });
});
```

> Les envois depuis votre serveur viennent tous de l'adresse IP de votre serveur, donc les limites de débit par visiteur d'Ikiform comptent tous les visiteurs ensemble. Le préréglage Standard autorise 5 envois par minute par IP et par formulaire, ce qu'un site fréquenté peut atteindre. Envoyez depuis le navigateur quand c'est possible, ou choisissez la [limite de débit](https://ikiform.com/fr/docs/rate-limits.md) Relaxed ou Custom pour les formulaires que vous faites passer par un serveur.