Nuxt Contact Form Without a Server Route

Set up FormsReach with Nuxt

Install @formsreach/vue

npm install @formsreach/vue and create an API key at FormsReach.

Add a form component

Create a Vue SFC with script setup. Import useFormsReach and bind the form with @submit.prevent="submit".

Use it from any page

Import the component into a Nuxt page or layout. Test email and/or WhatsApp delivery with your free monthly credits.

 <script setup> import { useFormsReach } from '@formsreach/vue'; const { submit, submitting } = useFormsReach('YOUR_API_KEY'); </script> <template> <form @submit.prevent="submit"> <input type="text" name="name" required /> <input type="email" name="email" required /> <textarea name="message" required /> <button type="submit" :disabled="submitting">Submit Form</button> </form> </template>

<script setup> import { useFormsReach } from '@formsreach/vue'; const { submit, submitting } = useFormsReach('YOUR_API_KEY'); </script> <template> <form @submit.prevent="submit"> <input type="text" name="name" required /> <input type="email" name="email" required /> <textarea name="message" required /> <button type="submit" :disabled="submitting">Submit Form</button> </form> </template>

Server routes are optional for contact forms

Nuxt makes it easy to add server/api handlers - and easy to overbuild. For many marketing and product sites, a contact form only needs a reliable form API and email and WhatsApp delivery from one credit pool, not a custom mail stack. Credits meter usage across channels.

Platform notes

Use named inputs and @submit.prevent as in the snippet.
Keep the form in a reusable component under components/.
See the Vue page for pure Vite SPA notes without Nuxt conventions.

Troubleshooting

Hook fails in setup: Confirm @formsreach/vue is installed and imported correctly.
Empty payload: Ensure inputs have name attributes.
Hydration warnings: Keep the form interactive client-side; avoid mismatched server HTML for controlled inputs you do not need.

What you get

Free

500 credits every month for form submissions, email, and WhatsApp. Spam filtering, webhooks, and workflow rules included. No credit card required.

Starter & Pro

Larger monthly credit pools (2,000 or 8,000) for growing sites and multi-site volume. Same channels - email, WhatsApp via the official Meta API, webhooks. See pricing.

FAQ

Do I need a Nuxt server route for contact forms?+

Not for standard contact forms. FormsReach is the form backend, so you do not need server/api/contact.post.ts just to forward email and WhatsApp.

Which package should Nuxt apps install?+

@formsreach/vue - the same useFormsReach hook as pure Vue, with Nuxt-friendly SFC syntax in the snippet.

Free vs Pro?+

Deliver by email with spam filtering and to WhatsApp via the official Meta WhatsApp Business API. Usage is metered in monthly credits.

Does this work with static generation?+

Yes - the form posts to FormsReach from the browser, so you do not need a long-running Nuxt server for submission delivery.

Nuxt contact form without a server route