Nuxt Contact Form Without a Server Route

Nuxt contact form without a server route

Add a Nuxt contact form with useFormsReach from @formsreach/vue. No server route, no nodemailer stack, no DIY delivery pipeline. Deliver submissions by email with spam filtering and to WhatsApp in seconds, metered with 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

Monthly credits for submissions and delivery. Scale when volume grows.

Free

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

Starter, Pro & Agency

Larger monthly credit pools (2,000 / 5,000 / 18,000). WhatsApp via Meta Business API unlocks on Pro and Agency. See pricing.

FAQ

Common questions about FormsReach with Nuxt.

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

Set up FormsReach with Nuxt

Install @formsreach/vue

Add a form component

Use it from any page

Nuxt snippet

Server routes are optional for contact forms

Platform notes

Troubleshooting

What you get

FAQ

Ready to receive form leads?

Set up FormsReach with Nuxt

Install @formsreach/vue

Add a form component

Use it from any page

Nuxt snippet

Server routes are optional for contact forms

Platform notes

Troubleshooting

What you get

FAQ

Related frameworks

Ready to receive form leads?