# Nuxt

Add a Nuxt contact form with @formsreach/vue - no server/api contact route required.

## What you will achieve

A Nuxt contact form using the Vue FormsReach package, without a custom `server/api` mail handler.

## Prerequisites

- A [FormsReach form and API key](/docs/getting-started/create-form-api-key/)
- Nuxt 3 project

## Steps

### 1. Install

```bash
npm install @formsreach/vue
```

### 2. Create a form component

For example `components/ContactForm.vue`:

```vue
<script setup>
import { useFormsReach } from "@formsreach/vue";

const { submit, submitting, error } = useFormsReach("YOUR_ACCESS_KEY");
</script>

<template>
 <form @submit.prevent="submit">
 <input name="name" required />
 <input name="email" type="email" required />
 <textarea name="message" required />
 <button type="submit" :disabled="submitting">
 {{ submitting ? "Sending…" : "Send" }}
 </button>
 <p v-if="error" role="alert">{{ error.message }}</p>
 </form>
</template>
```

### 3. Use it on a page

```vue
<template>
 <main>
 <h1>Contact</h1>
 <ContactForm />
 </main>
</template>
```

### 4. Test

Run `nuxt dev`, submit once, confirm **Submissions**.

## Verify

- Form posts from the browser (no custom server route required for delivery)
- Dashboard stores the test row
- Works with static generation hosts

## Common failures

| Symptom | Check |
|---|---|
| Import error | Package is `@formsreach/vue` |
| Empty fields | Inputs need `name` attributes |
| Domain denied on production | [Domain allowlist](/docs/submit-api/domains/) |

## Next

- [Vue guide](/docs/frameworks/vue/) for pure Vite SPAs
- [Email channel](/docs/channels/email/)
- Marketing landing: [/integrations/nuxt/](/integrations/nuxt/)