# Vue

> Ikiform에 제출하는 Vue 싱글 파일 컴포넌트, 그리고 시크릿 키를 쓰는 Nuxt 서버 라우트.

Vue에서는 SDK나 `fetch`로 브라우저에서 POST합니다. 평소 설정 외에 플러그인이나 빌드 단계는 필요 없습니다.

## SDK 설치

`Terminal`:

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

## 싱글 파일 컴포넌트

`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>
```

**Ikiform** 사람 확인을 쓰는 폼은 [React 가이드](https://ikiform.com/ko/docs/guides/react.md#component)처럼 `submit` 전에 `challenge(formId)`를 호출하고 토큰을 `{ turnstileToken }`으로 전달하세요.

## Nuxt 서버 라우트

서버에서 POST하려면 시크릿 키와 함께 본문을 전달하는 서버 라우트를 추가하세요. 페이지는 여러분의 라우트로 JSON을 POST합니다. 하이드레이션 전 대체 동작을 갖추고 브라우저에서 바로 POST하는 컴포넌트는 [Nuxt](https://ikiform.com/ko/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,
  });
});
```

> 서버에서 보낸 POST는 모두 서버의 IP 주소에서 오므로, Ikiform의 방문자별 레이트 리밋이 모든 방문자를 합쳐서 셉니다. Standard 프리셋은 IP와 폼별로 분당 5건을 허용하며, 트래픽이 많은 사이트는 이 한도에 닿을 수 있습니다. 가능하면 브라우저에서 POST하거나, 서버를 거쳐 보내는 폼에는 Relaxed 또는 Custom [레이트 리밋](https://ikiform.com/ko/docs/rate-limits.md)을 고르세요.