Discover the Hidden Free API in Nuxt 4

Nuxt 4 offers developers a powerful yet often overlooked API that leverages the Nitro server engine. This API enhances the development experience with features like automatic imports, server routes, and edge deployment readiness.

Server API Routes

The API in Nuxt 4 simplifies the creation of server routes with file-based routing and HTTP method suffixes. For example, to fetch posts from a database, you can create an API route as follows:

// server/api/posts.get.ts
export default defineEventHandler(async (event) => {
  const query = getQuery(event);
  const posts = await db.post.findMany({
    take: Number(query.limit) || 10,
    orderBy: { createdAt: "desc" }
  });
  return posts;
});

Creating new posts is equally straightforward:

// server/api/posts.post.ts
export default defineEventHandler(async (event) => {
  const body = await readBody(event);
  const post = await db.post.create({ data: body });
  return post;
});

Server Middleware

Nuxt 4 supports server middleware, allowing developers to manage authentication seamlessly. Here's an example of an authentication middleware:

// server/middleware/auth.ts
export default defineEventHandler((event) => {
  const token = getHeader(event, "authorization");
  if (!token && event.path.startsWith("/api/admin")) {
    throw createError({ statusCode: 401, message: "Unauthorized" });
  }
});

Composables with Server Data

Developers can leverage composables to fetch server data efficiently. For instance, fetching posts can be handled with:

// composables/usePosts.ts
export function usePosts() {
  return useFetch("/api/posts", {
    key: "posts",
    transform: (data) => data.map(formatPost)
  });
}

Nitro Storage Layer

The Nitro storage layer in Nuxt 4 allows caching of data for optimized performance:

// server/api/cache.ts
export default defineEventHandler(async (event) => {
  const storage = useStorage();
  const cached = await storage.getItem("mydata");
  if (cached) return cached;
  const fresh = await fetchExpensiveData();
  await storage.setItem("mydata", fresh, { ttl: 3600 });
  return fresh;
});

Key Features

• File-based API routing with HTTP method suffixes
• Nitro engine for seamless edge deployment
• Automatic utility imports for server-side operations
• TypeScript-first approach supporting full type inference
• Hybrid rendering capabilities (SSR, SSG, ISR, SWR per route)

Nuxt 4's API, powered by the Nitro engine, offers developers a robust toolset for building scalable and efficient applications.