Frameworks

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

Steps

1. Install

npm install @formsreach/vue

2. Create a form component

For example components/ContactForm.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

<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

Next

Previous
Next