# Vue

Add a Vue contact form with useFormsReach from @formsreach/vue - no custom backend required.

## What you will achieve

A Vue contact form that posts to FormsReach using the official composable.

## Prerequisites

- A [FormsReach form and API key](/docs/getting-started/create-form-api-key/)
- Vue 3 app with npm

## Steps

### 1. Install

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

### 2. Use the composable

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

Use `@submit.prevent` and `name` attributes on inputs.

### 3. Ship and test

Include the component on a page, submit once, open **Submissions**.

## Verify

- Dashboard row appears
- Button disables while submitting

## Common failures

| Symptom | Check |
|---|---|
| Empty payload | Missing `name` on inputs |
| Nuxt-specific setup | See [Nuxt](/docs/frameworks/nuxt/) |
| Package not found | Install `@formsreach/vue` (not the React package) |

## Next

- [Nuxt guide](/docs/frameworks/nuxt/)
- [Email channel](/docs/channels/email/)
- Marketing landing: [/integrations/vue/](/integrations/vue/)