h3 VS ofetch

H3 is a small and delightful webserver. It honestly won me over the second I saw how simple the server side implementation of websockets was. It's actually so good, it even has bindings for uploadthing

Same, I'll probably move to https://github.com/unjs/h3 since it's used anyway in Nuxt (which I use for other projects)

import formidable from 'formidable'; /* global defineEventHandler, getRequestHeaders, readBody */ /** * @see https://nuxt.com/docs/guide/concepts/server-engine * @see https://github.com/unjs/h3 */ export default defineEventHandler(async (event) => { let body; const headers = getRequestHeaders(event); if (headers['content-type']?.includes('multipart/form-data')) { body = await parseMultipartNodeRequest(event.node.req); } else { body = await readBody(event); } console.log(body); return { ok: true }; });

import formidable from 'formidable'; /** * @see https://nuxt.com/docs/guide/concepts/server-engine * @see https://github.com/unjs/h3 */ export default defineEventHandler(async (event) => { let body; const headers = getRequestHeaders(event); if (headers['content-type']?.includes('multipart/form-data')) { body = await parseMultipartNodeRequest(event.node.req); } else { body = await readBody(event); } console.log(body); return { ok: true }; }); /** * @param {import('http').IncomingMessage} req */ function parseMultipartNodeRequest(req) { return new Promise((resolve, reject) => { /** @see https://github.com/node-formidable/formidable/ */ const form = formidable({ multiples: true }) form.parse(req, (error, fields, files) => { if (error) { reject(error); return; } resolve({ ...fields, ...files }); }); }); }

You could probably do all that in Nuxt with building a backend in the server folder. (More info here: https://nuxt.com/docs/guide/directory-structure/server) But, I understand that the official Nuxt 3 Auth module is being worked on which should make life a lot easier. For now, there's something new you can look into, namely the session support in the newest Nitro version (which is the backend part of Nuxt 3). There's some info here: https://github.com/unjs/h3/pull/315. I should not that I have not looked at this yet, though.

h3 - a minimalistic and simple node.js framework

Nuxt 3 is powered by a new server engine called Nitro. Nitro is used in development and production. It includes cross-platform support for Node.js, Browsers, and service-workers and serverless support out-of-the-box. Other features include API routes, automatic code-splitting, async-loaded chunks, and hybrid static/serverless modes. Server API endpoints and Middleware that internally uses h3 are added by Nitro.

useFetch uses the oFetch client per the documentation

Create a similar webshits lib

and rolled my own retry/caching/timeout implementation using https://github.com/unjs/ohmyfetch interceptors

It's not entirely clear, I'd agree. It takes some time getting used to the syntax changes from Nuxt 2 > Nuxt 3. All of the above methods are all just Nuxt 3 wrappers for $fetch (https://github.com/unjs/ohmyfetch) with various degrees of flexibility/control.

As I am using Nuxt 3, I use ohmyfetch https://github.com/unjs/ohmyfetch created by the Nuxt team.

Nitro allows 'direct' calling of routes via the globally-available $fetch helper. This will make an API call to the server if run on the browser, but will simply call the relevant function if run on the server, saving an additional API call. The $fetch API uses ohmyfetch to: