Skip to main content

Frameworks

Nuxt (Vue)

Send email from a Nuxt server route with the top-level mail().


Postboi is framework-agnostic — read the request’s FormData in a Nitro server route and hand it straight to mail(). Postboi extracts the special fields and renders the rest into a tidy HTML table.

// server/api/contact.post.ts
import { mail } from 'postboi'

export default defineEventHandler(async (event) => {
	await mail({ body: readFormData(event) })
	return sendRedirect(event, '/?sent=1', 303)
})
// server/api/contact.post.ts
import { mail } from 'postboi'

export default defineEventHandler(async (event) => {
	await mail({ body: readFormData(event) })
	return sendRedirect(event, '/?sent=1', 303)
})

defineEventHandler, readFormData, and sendRedirect are Nuxt auto-imports. Point a multipart/form-data form at the route. Include hidden _subject and _reply_to fields, and bind _reply_to to the email (v-model + :value) so replying reaches the sender:

<script setup lang="ts">
const email = ref('')
</script>

<template>
	<form method="post" action="/api/contact" enctype="multipart/form-data">
		<input type="hidden" name="_subject" value="Contact Form" />
		<input type="hidden" name="_reply_to" :value="email" />
		<input name="contact→name" placeholder="Name" required />
		<input name="contact→email" type="email" v-model="email" required />
		<textarea name="details→message" placeholder="Message"></textarea>
		<button type="submit">Send</button>
	</form>
</template>
<script setup lang="ts">
const email = ref('')
</script>

<template>
	<form method="post" action="/api/contact" enctype="multipart/form-data">
		<input type="hidden" name="_subject" value="Contact Form" />
		<input type="hidden" name="_reply_to" :value="email" />
		<input name="contact→name" placeholder="Name" required />
		<input name="contact→email" type="email" v-model="email" required />
		<textarea name="details→message" placeholder="Message"></textarea>
		<button type="submit">Send</button>
	</form>
</template>

Field names use the fieldset→field syntax. The provider and default recipient come from postboi.config.ts — a POSTBOI_TOKEN routes to Postboi Cloud, or pick any provider.

Runnable example: examples/nuxt-provider-postboi.