Blogs

Serverless functions are tiny pieces of code that run on demand in the cloud. You don’t provision servers or infrastructure, or write scaling rules. Cloud providers handle the underlying infrastructure, automatically scaling resources based on demand. 

They’re perfect for lightweight APIs, form handlers, webhooks, simple auth endpoints, and glue code.


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

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.

Nuxt's useFetch and useAsyncData composables are already powerful, but they got some seriously handy options that can level up how you handle data in your app.

Here are a few advanced options that make a real difference in performance, UX, and network efficiency:

1. dedupe: Avoid Duplicate Requests

Nuxt by default cancels any request with the same key before starting a new one. This means if you have multiple components that fetch the same data, you’ll see unnecessary requests and a lot of canceled ones. With the option dedupe: 'defer’ if an identical request is already pending, Nuxt won’t refetch and waits for the current one to finish. 

const { data } = await useFetch('/api/products', {
  dedupe: 'defer'         // default value: cancel
});

2. retry and retryDelay: Resilience for Unstable Endpoints

Not all users have stable connection or fast Wi-Fi. For flaky APIs, edge functions, or when you want to add basic fault tolerance without custom logic, you can use Nuxt’s retry mechanism.

const { data } = await useAsyncData('user', () => $fetch('/api/user'), {
  retry: 3,            // number of retries after first request fails
  retryDelay: 1000     // milliseconds delay between retries
});

3. delay: Stagger Fetches for Smoother UX

This option adds a delay before making the request. You can use it to debounce fetches triggered by user input (though better handled via watch + debounce). It’s’ useful when you want to avoid flashing loading states for super quick page transitions.

const { data } = await useFetch('/api/settings', {
  delay: 300.          // milliseconds before starting fetch
});

Pro tip:

Always provide a key if you're using immediate: false, lazy, or working with reactive URLs to ensure deduplication and caching behave predictably.

These options let you finely tune your app's data layer for performance, UX, and network behavior. Mastering them in useFetch and useAsyncData helps you write cleaner, more efficient, and more resilient Nuxt apps.

As published on "the official State of Vue.js report of 2025" earlier this year, I did a case study to showcase how Funda (real estate platform in the NL) makes use of Vue and Nuxt.

Little intro about Funda?
Funda is the Netherlands' leading real estate listing platform, serving millions of users daily. With hundreds of thousands of property listings and approximately 5 million daily searches, the platform demands exceptional performance, scalability, and search capabilities. Given the possible combination of search parameters and filters to cater to the users’ needs, this isn’t a trivial task. In addition, search engine optimization (SEO) is critical for ensuring visibility in property searches and maintaining a competitive edge for brokers.


How did we use Vue and Nuxt? And why?
Our web application combines modern technologies throughout its stack. For the frontend, we rely on Nuxt 3 with TypeScript and use Tailwind CSS as our CSS framework of choice, which also helps us write consistent styles according to our design system. The backend relies on the .NET framework, incorporating Elasticsearch to handle search functionality. The entire solution is hosted on the Microsoft Azure cloud platform.

Beyond that, essential performance defaults, such as automatic code-splitting by route or predefined cache headers for assets, helped us get a good baseline. The built-in filesystem-based routing structure is also a big plus, as it makes navigation between listings and pages much simpler than solely using Vue Router (which is possible in Nuxt, too, if needed).

One key feature that makes domain-driven design possible is Nuxt's layer system. This allows us to split our codebase into multiple layers representing a domain. Each layer can have its own BFF and export its components. This makes it easy to separate concerns and keep the codebase clean and maintainable. Further, the layer system makes it easy to auto-import composables, components, and utilities, which is a big plus. Eventually, we benefit from further enhancements the Nuxt team ships consistently, from performance to developer experience improvements.