Michael Hoffmann LogoMichael Hoffmann
·
1 min read

Nuxt Tip: How Nuxt Uses Nitro, h3 and ofetch Internally

Nuxt Tip: How Nuxt Uses Nitro, h3 and ofetch Internally Image
Nuxt

If you are using Nuxt 3 you might stumble upon one of the following tools: Nitro, h3 or ofetch. I often see that people are confused by these tools, so let me clarify their responsibility and how Nuxt uses them internally.

UnJS

All of the following packages are published in the UnJS ecosystem. The philosophy is

A robust ecosystem, driven by the UNIX Philosophy, housing purpose-built, high-quality JavaScript utilities, libraries, and tools, upheld by a collaborative community.

The ecosystem provides 56+ packages.

ofetch

Nuxt provides access to ofetch via the $fetch API. Its described as

A better fetch API. Works on node, browser, and workers.

Some of its key features:

  • Smartly parsing JSON responses (with access to raw response if needed).
  • Request body and params are automatically handled, with correct Content-Type headers.

h3

h3 is an H(TTP) server framework built for high performance and portability running in any JavaScript runtime.

Some of its key features:

  • Event handlers automatically convert responses. For example, if you return a JSON object it will be stringified and sent with the default application/json Content-Type header.
  • If an event handler returns a Promise, h3 will wait for it before it sends the response.
  • A set of useful helper functions for body parsing, cookie handling, redirects, headers and more.

Nitro

Nitro uses h3 internally and is a server toolkit to create web servers with everything you need and deploy them wherever you prefer.

Some of its key features:

  • Cross-platform support for Node.js, Browsers, service-workers and more.
  • Support for API routes, middleware, and more.
  • Development server with hot module reloading.

Nitro powers the server API endpoints and middleware in Nuxt 3.