Serverless functions in Nuxt: backend power without a backend

How Nuxt does it (Nitro + H3)

Nuxt has built-in support for serverless functions via Nitro (its server engine). Nitro compiles your server code to many targets (Node, Vercel, Netlify, Cloudflare Workers, etc.) and runs on top of H3, a tiny, fast HTTP framework.

You write your server-side logic inside the server/api/ folder. Each file becomes an API endpoint automatically.

// server/api/hello.ts
export default defineEventHandler(() => {
    return { message: 'Hello from serverless' }
})

This function will respond to GET /api/hello with a JSON object. That’s it. Visit /api/hello in your browser or useFetch() from your frontend, and you get:

{ "message": "Hello from serverless" }

Calling Your APIs from the Frontend

You can use useFetch(), useAsyncData(), or $fetch() to call these functions in your Vue components or pages.

<script setup>
  const { data } = await useFetch('/api/hello')
</script>

<template>
  <p>{{ data.message }}</p>
</template>

Deployment

Nuxt works with Vercel, Netlify, Cloudflare, etc. Just push your code and your functions will auto-deploy as serverless endpoints.

• Vercel → Serverless Functions
• Netlify → Netlify Functions
• Cloudflare → Workers

You don’t need to configure anything manually — just push your code.

Quick Tips to Not Shoot Yourself in the Foot

• Don’t trust inputs, always validate.
• Use environment variables for anything secret.
• Keep functions small and focused.
• Handle errors properly.
• Don’t block the event loop with long-running tasks (offload to queues if needed).

Common Use Cases

• Form submissions
• Email sending
• API proxies
• Auth endpoints
• Data fetching or caching
• Webhooks

Wrap Up

With Nuxt and Nitro, serverless functions are just regular files that do backend magic. No setup, no stress. Whether you need a contact form endpoint, a webhook handler, or a simple API proxy, you can build it in minutes.

No server management required.