Nuxt 3 VS h3

- https://github.com/nuxt/framework: An intuitive framework for building web applications, built for the edge.

It uses Nuxi for Command line interface,

Note, the repo linked below, https://github.com/danielroe/nuxt-zero-js, was an experiment that I subsequently moved into Nuxt core: https://github.com/nuxt/framework/pull/7248. I plan to update it to test out per-route zero-JS via a route rule.

I asked this before on the Github discussion https://github.com/nuxt/framework/discussions/10073, but I haven't found an answer yet.

Also one I've reported a long time ago, that's still an issue today: If you start the Nuxt dev server without create the server/ folder, Nuxt isn't going to be able to read any of your server/api files. You have to create the folder and restart the dev server. Only then, it will start detecting your server files. This is an issue on both Windows and Linux.

Perhaps this thread can help you.

But there is a catch, nuxt.config does not allow functions in it. And it could be bother to mention this in every single page. Also, the later part is supposed to act like a Default or Fallback. Hmm.. Now what? Well, that where plugins system comes in. I can create a Plugin named title and add this logic there, which will be implemented on every page. Also, Nuxt devs mentioned this approach here.

I've found a matching issue with a solution I can use as a hotfix for now: https://github.com/nuxt/framework/issues/6648

https://github.com/nuxt/framework/issues/3587 (upstream Vue bug maybe?) https://github.com/nuxt/framework/issues/8634 https://github.com/nuxt/framework/issues/8611

This issue is where I started, and I noticed that in my project, setting the cookie header manually, or through a composable on the server-side doesn't actually set it in the browser (it doesn't show up in the developer tools). They've listed workarounds, but they're just that - the first link (when it comes back up, will show a messy composable you can write). Everything works fine with `axios` (instead of their built-in data fetching APIs), but the request seems to be executed twice on page load for some reason.

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.