Nuxt 3.7+ : net::ERR_CONTENT_LENGTH_MISMATCH with VS Code Devcontainer

Question

Nuxt 3.7+ : net::ERR_CONTENT_LENGTH_MISMATCH with VS Code Devcontainer

Opened this issue a year ago · 59 comments

Environment

Nuxt 3.7+

Reproduction

Note: the exact same codebase on Stackblitz works (including same node/npm versions), I suspect this is somehow related to my local environment. Here is below a repository reproduction containing a VS Code dev container:

Reproduction steps

Install Docker (I'm using Docker Desktop for Mac)
Install VS Code and VS Code Dev Container extension
Open VS Code, run the Clone Repository in Container Volume command, providing this url: https://github.com/ddahan/nuxt-starter-dev-container
Once the container is installed, run npm run dev in a terminal, and open Chrome Browser with the localhost url link.
Open the inspector, this should display the ERR_CONTENT_LENGTH_MISMATCH error.

Describe the bug

I have 3 projects running Nuxt (3.5 and 3.6). After upgrading any of them to Nuxt 3.7, I get an net::ERR_CONTENT_LENGTH_MISMATCH error in the browser when loading the page. The error happens on different potential files, and the site is basically unusable (not loaded completely, not clickable, etc.).

I'm using VS Code dev containers, which means the browser I'm using locally connects to a Docker container using port forwarding.

I tried using 3 local browsers but the error is the same.
I tried to run the server with the --host option but I got the same error.
I ensured there is enough space disk on my container

Any idea of what could have happened? I read the Nuxt 3.7 changelog and it seems there are many low-level changes that could explain this, but I'm not competent enough to understand.

Thanks.

EDIT: video added
https://github.com/nuxt/cli/assets/1933516/77acf4ce-411f-4493-85ad-5f8feb5b3467

Answer 1 · 2023-09-13T22:44:08.000Z

Would you be able to provide a reproduction? 🙏

More info

Why do I need to provide a reproduction?

Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.

What will happen?

If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritise it based on its severity and how many people we think it might affect.

If needs reproduction labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.

How can I create a reproduction?

We have a couple of templates for starting with a minimal reproduction:

👉 https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz
👉 https://codesandbox.io/s/github/nuxt/starter/v3-codesandbox

A public GitHub repository is also perfect. 👌

Please ensure that the reproduction is as minimal as possible. See more details in our guide.

You might also find these other articles interesting and/or helpful:

Answer 2 · 2023-09-13T22:45:29.000Z

I believe the issue is upstream in nuxt/cli, and may already have been fixed. Would you try with v3.8.3?

Answer 3 · 2023-09-13T22:59:47.000Z

By any chance are you using an endpoint with DELETE method? (because it is a known issue -- however not new one)

Answer 4 · 2023-09-13T23:15:14.000Z

I believe the issue is upstream in nuxt/cli, and may already have been fixed. Would you try with v3.8.3?

@danielroe I'm already on latest versions (Nuxt 3.7.3 and Nuxi 3.8.3) and the error still occurs. I added a video in the issue description and refreshed the page multiple times to show how the error is displayed.

I also ensured there is enough space disk on my container.

Answer 5 · 2023-09-13T23:18:58.000Z

By any chance are you using an endpoint with DELETE method?

I may have some DELETE endpoints but the error occurs before reaching them. On any website I tried, the error occurs at index page loading. By the way, one of the repository is a fork of Nuxt UI so it should work.

Answer 6 · 2023-09-13T23:23:07.000Z

Side question: if I'm able to build a minimal reproduction repository containing a VS Code .devcontainer file, are you able to run it? (you'd need VS Code and Docker Desktop for this).
I'm asking because I suspect the problem can't be reproduce on a local environment.

Answer 7 · 2023-09-13T23:40:00.000Z

Yes, docker env / devcontainer is even better!

Answer 8 · 2023-09-14T06:39:32.000Z

related: #118

Answer 9 · 2023-09-14T09:02:46.000Z

@pi0 @danielroe
I created a minimal repository containing a .devcontainer file for reproduction (see the initial updated issue).
Are you able to reproduce the issue? Thanks!

Answer 10 · 2023-09-14T09:17:03.000Z

Thanks! yes I can reproduce it. Seems coming from the vite handler.

GET http://127.0.0.1:3000/_nuxt/node_modules/.cache/vite/client/deps/vue-router.js?v=38dcfad8 net::ERR_CONTENT_LENGTH_MISMATCH 200 (OK)

CLI warning might be related:

[Vue Router warn]: No match found for the location with path "/_nuxt/@vite/client"

Something to add is if you open the network tab and disable the cache, this issue will be gone. (this might be simply a warmup cache timing issue)

/cc @antfu Do you have any guesses?

Answer 11 · 2023-09-23T18:06:25.000Z

Any update on this?

The error actually breaks any repository using Nuxt (like Nuxt UI).
I tried to disable the cache but it has no effect.

Answer 12 · 2023-10-02T19:23:08.000Z

I need to chime in here - exact same scenario.

Latest nuxt/nuxi in a freshly created devcontainer. Also with Nuxt UI.

To add some observations here: It doesn't always fail and it's not always the same ressource. This one failed at:

Loading the file directly shows a size of 191kB when it works and 130kB if it doesn't. Fetching that file using curl from inside the container works fine. Since devcontainer ports aren't actually real docker forwarded ports, I'd suspect vscode to cause the issues here.

Answer 13 · 2023-10-02T19:28:09.000Z

I'd like to add that it fails even without nuxt UI for me.
For me it always fails, but indeed, not always with the same file(s).

As it still works with nuxt 3.6, I'm wondering what change in the 3.7 could explain this VS Code dev container incompatibility.

Answer 14 · 2023-10-02T19:48:25.000Z

Also worth mentioning: vscode recently updated to nodejs 18. It's not the first issue caused by that update.

Answer 15 · 2023-10-02T19:58:07.000Z

As it still works with nuxt 3.6,

It took a while to process this bit... do you mean nuxt 3.6 works fine with the current vscode release?

Answer 16 · 2023-10-02T20:05:25.000Z

Yep.

No problem with this VS Code and Nuxt 3.6.5 (and latest nuxt UI)

Answer 17 · 2023-10-02T22:21:21.000Z

I was able to trace the issue down to

root@463d9cf38f77:/workspaces/nuxt# git bisect bad
abd5d857705fa830d6ef019cb8a5ed3c763b7cd5 is the first bad commit
commit abd5d857705fa830d6ef019cb8a5ed3c763b7cd5
Author: Daniel Roe <daniel@roe.dev>
Date:   Fri Aug 25 16:20:32 2023 +0100

    feat(nuxt): migrate to new `nuxt/cli` (#22799)

Let's see if that helps in finding the issue...

Answer 18 · 2023-10-02T22:47:27.000Z

For the diff -> nuxt/nuxt@abd5d857705fa830
Basically this commit is related to a full rewrite of the nuxt CLI using another framework (unjs/citty).

Answer 19 · 2023-10-02T23:04:00.000Z

I'm not sure if I can bisect my way through that one without having a direct check... I'd need a way to distinguish between bad because our issue and bad because incompatible with nuxt.

(Rephrasing: I'd need a good state as a starting point)

Answer 20 · 2023-10-02T23:35:30.000Z

Fingers crossed
P.s. we've given up on .devcontainer for now.

Answer 21 · 2023-10-03T08:54:24.000Z

we've given up on .devcontainer for now.

@or2e just curiosity: why not keep devcontainers and stick to Nuxt 3.6.5 in the meantime?
Dev containers are so important to me, that I'll prefer go to React if never solved 😃

Answer 22 · 2023-10-03T08:59:50.000Z

Hi again. Sorry hearing you still have issues with DevContainers. It is something we should investigate and fix for CLI proxy.

In the meantime, have you tried with nuxt dev --no-fork? It might fix possible issues.

Answer 23 · 2023-10-03T09:55:23.000Z

have you tried with nuxt dev --no-fork

@pi0 It just creates another error: [GET] "http://[::]:3000/__nuxt_vite_node__/manifest": fetch failed

As a reminder, I provided a reproduction repo with a devcontainer file.
Do you need anything else to help investigate? (time, I guess ? ^^)

Answer 24 · 2023-10-03T09:57:18.000Z

Hello @pi0 and good morning,

since I'm no developer - can you tell me in a handful of steps how I can replace the cli in my nuxt development version with a local clone of this repo, so I can use git bisect on it? If the earliest possible commit (roughly around the time the cli was replaced in nuxt) doesn't show the current issue or prolonged loading times, I'm probably able to identify the commit which started this issue.

If it helps, I'm on your discord server, I just can't dm you. Look for "Flo".

Answer 25 · 2023-10-03T10:04:36.000Z

@ddahan See #181 (comment) -- After disabling cache issue seems to be solved.

Answer 26 · 2023-10-03T10:22:00.000Z

@pi0 See #181 (comment) -- As I said disabling the cache had no effect for me. To be more specific, there is currently no workaround for me, except staying on Nuxt 3.6.5

Answer 27 · 2023-10-03T10:49:27.000Z

It just creates another error: [GET] "http://[::]:3000/nuxt_vite_node/manifest": fetch failed

@ddahan It seems another issue with DevContainers reporting IPv6 as a listener ({ address: '::', family: 'IPv6', port: 3000 }) but not being available. It is unrelated but will work on it.

In the meantime can you please try with --no-fork --host 127.0.0.1?

Main, thing making this issues investigation tricky is that it not always happens. i have a local dev container that does not reproduces this issue anymore. I understand it happens for you and is frustrating but we need stable way to reproduce and fix things like this.

Feel free to also DM me in discord (@pi0) if you like to have a chat maybe sharing your screen.

Answer 28 · 2023-10-03T10:52:24.000Z

Thanks for helping and upstream issue report dear @max06

I have pushed a .devcontainer setup to this repository. (b8f9fd3).

After cloning repo, you can reopen it in dev container and then run pnpm install / pnpm build --stub and then you can run any state of repository using pnpm run dev (it opens playground/ in dev mode).

This issue is most likely a combination of IPv6 stack issues with proxy layer. When using --no-fork --host 127.0.0.1 we disable this proxy layer.

Answer 29 · 2023-10-03T11:00:35.000Z

I reported the ipv6 issue in vscode a while ago and it was already fixed. This shouldn't matter anymore at least for vscode features.

If nuxt listens on ipv6, that would be another issue to solve.

Regarding your flags: I can confirm it works, but only if I specify both of them. If I only use --host ..., it works, but we're back to slow speeds (and failed requests). Only using --no-fork causes the 500 errors mentioned above.

Just in case: I'm always testing on vscode insiders

Answer 30 · 2023-10-03T11:11:19.000Z

I reported the microsoft/vscode#191945 a while ago and it was already fixed. This shouldn't matter anymore at least for vscode features.

Thanks for the previous reports and references it was helpful!

If nuxt listens on ipv6, that would be another issue to solve.

It is mainly an issue with Docker+Node.js. Nuxt requests the default host, and Node.js inside containers wrongly reports an IPv6 interface which makes issues with Nuxt internal calls.

Regarding your flags: I can confirm it works, but only if I specify both of them. If I only use --host ..., it works, but we're back to slow speeds (and failed requests). Only using --no-fork causes the 500 errors mentioned above.

If you specify both --no-fork --host 127.0.0.1 flags, while having a slower performance (which is expected and will be fixed), do you also still experience ERR_CONTENT_LENGTH_MISMATCH error locally? Also if you disable cache in devtools is there any difference?

Answer 31 · 2023-10-03T11:13:27.000Z

can you please try with --no-fork --host 127.0.0.1?

I don't have the ERR_CONTENT_LENGTH_MISMATCH error anymore, but got another error related to nuxt UI dependency popper.js, but can't say if it's related to these flags or not for now.

Disabling cache makes no difference for me.

Answer 32 · 2023-10-03T11:17:11.000Z

With both flags, both issues disappear (for me).

Compared to

(for once without failed requests)

Browser cache doesn't seem to make a big difference at all, maybe 20% on the loading time.

Answer 33 · 2023-10-03T14:19:35.000Z

Via #242, the --host flag is not required anymore in forkless version (therefore no slow speed)

@max06 @ddahan Can you please try latest change via npx nuxi-edge@3.9.1-1696342776.a6acb6a dev --no-fork in your project? 🙏🏼

Answer 34 · 2023-10-03T14:34:05.000Z

root@463d9cf38f77:/workspaces/nuxt# npx nuxi-edge@3.9.1-1696342776.a6acb6a dev --no-fork
Nuxt 3.7.4 with Nitro 2.6.3                                                2:33:35 PM

[2:33:35 PM]  ERROR  Error: Cannot find module @nuxt/kit imported from file:///workspaces/nuxt, file:///workspaces/, file:///workspaces/nuxt/_index.js, file:///workspaces/node_modules

  at resolvePath (/root/.npm/_npx/9bcd1de19fdfa663/node_modules/nuxi-edge/dist/shared/nuxi-edge.4354f916.mjs:7954:10)
  at importModule (/root/.npm/_npx/9bcd1de19fdfa663/node_modules/nuxi-edge/dist/shared/nuxi-edge.0458f9cb.mjs:11:30)
  at loadKit (/root/.npm/_npx/9bcd1de19fdfa663/node_modules/nuxi-edge/dist/shared/nuxi-edge.e7cda0de.mjs:9164:21)
  at async Object.run (/root/.npm/_npx/9bcd1de19fdfa663/node_modules/nuxi-edge/dist/chunks/dev.mjs:173:32)
  at async runCommand$1 (/root/.npm/_npx/9bcd1de19fdfa663/node_modules/nuxi-edge/dist/shared/nuxi-edge.77fb2b26.mjs:1647:7)
  at async runCommand$1 (/root/.npm/_npx/9bcd1de19fdfa663/node_modules/nuxi-edge/dist/shared/nuxi-edge.77fb2b26.mjs:1638:11)
  at async runMain$1 (/root/.npm/_npx/9bcd1de19fdfa663/node_modules/nuxi-edge/dist/shared/nuxi-edge.77fb2b26.mjs:1770:7) 



[2:33:35 PM]  ERROR  Error: Cannot find module @nuxt/kit imported from file:///workspaces/nuxt, file:///workspaces/, file:///workspaces/nuxt/_index.js, file:///workspaces/node_modules

Tried it in the nuxt devcontainer...

Answer 35 · 2023-10-03T14:39:09.000Z

Is /workspaces/nuxt a valid Nuxt project? (This command should be run when you are in the directory of an installed Nuxt project to work properly) -- also dependencies in node_modules being installed

Answer 36 · 2023-10-03T14:42:29.000Z

Ah, my bad. Executing in a starter project seems to work. Loading time is down to 1 second, compared to the 60 seconds it took before. No request issues seen so far.

Do you have a solution in mind for the --no-fork-option?

Answer 37 · 2023-10-03T14:49:02.000Z

Loading time is down to 1 second, compared to the 60 seconds it took before. No request issues seen so far.

Awesome!

Do you have a solution in mind for the --no-fork-option?

Yes. However not %100 sure if it resolves same root cause but to overcome internal networking issues, i plan to use IPC Sockets from main process to child. It works well for another proxy layer (Nitro) so I'm hopeful.

-- If it doesn't works well, i think in short term we can enable this flag by default for Docker environments (already enabled for Test and Bun)

Answer 38 · 2023-10-03T14:50:30.000Z

That sounds good!

Is there anything we should report to vscode, anything they can or have to fix to not need workarounds anymore? Otherwise I'd close the issue I opened for that.

Answer 39 · 2023-10-03T14:51:51.000Z

I think VSCode side should be fine as far as i tested. Root cause is mostly Docker networking issues With Node.js/IPv6... Thanks for following up btw!

Answer 40 · 2023-10-03T14:54:05.000Z

No worries, I'm here to help as much as I can. And I seem to attract bugs whenever I touch something 😅

I probably should have mentioned my docker containers are ipv6 enabled. However I'm totally fine if everything inside docker uses ipv4.

And before I forget it: Thank you very much for your quick fix!

Answer 41 · 2023-10-03T15:59:25.000Z

@max06 @ddahan Can you please try latest change via npx nuxi-edge@3.9.1-1696342776.a6acb6a dev --no-fork in your project? 🙏🏼

@pi0 it removes the main error 🙏🏼 thanks for your help!

(Sorry I had a cross bug that seems related to Nuxt UI popper.js dependency in the middle of my tests, which complicated everything).

Answer 42 · 2023-10-21T23:38:33.000Z

Hi there! Same issue with nuxt 3.8.0 unfortunately.
Any progression on this?

Is there anything I can do/try to help debugging?
Thanks for your help @pi0

Answer 43 · 2023-10-25T09:51:07.000Z

@rstainsby I'm not sure you're issue is the one I described.
Mine is not related to fetch or delete method. It happens on any project even on a hello world.

Answer 44 · 2023-10-26T00:16:00.000Z

Apologies, I was looking at several issue relating to CONTENT_LENGTH_MISMATCH and I posted that comment under the wrong one. Thanks for letting me know.

Answer 45 · 2023-11-02T10:06:49.000Z

Same, i have this error ERR_CONTENT_LENGTH_MISMATCH in browser console.

I'm using devcontainer under Windows 11 WSL2 (Ubuntu).

I got also sometimes this error: Uncaught (in promise) DOMException: Cache.put() encountered a network error.

These errors only appears on my Nuxt Bridge app, my Nuxt 3 app (in the same monorepo) is OK

Answer 46 · 2023-11-13T16:28:03.000Z

Waouuu... I was using Nuxt3 for a project for a while with devcontainers, and it was painfully slow (compared to Nuxt2), with a initial load time (under Chrome) often over a minute (worse than @max06), but I never found anyone speaking directly of this issue, and did with it.

I recently had lot more ERR_CONTENT_LENGTH_MISMATCH errors (after upgrading Nuxt and all dependencies), and the dev was impossible.
I added the --no-fork option to the dev command. The website is now loaded in less that 5 seconds, and the err content length mismatch disappeared!
After a while dealing with this long loading time, it feels like magic 🧙‍♂️!

Answer 47 · 2023-11-13T16:38:56.000Z

With your suggestion, i got this error :/

[GET] "http://[::]:3003/__nuxt_vite_node__/manifest": fetch failed

Answer 48 · 2023-11-14T08:22:23.000Z

These errors only appears on my Nuxt Bridge app, my Nuxt 3 app (in the same monorepo) is OK

I tried to migrate from Nuxt2 to Nuxt Bridge (before Nuxt3), but it was a nightmare, with all the dependencies.
I re-created a project with Nuxt3 from scratch, and migrated the code as quick as possible. It was not an easy task...

Answer 49 · 2023-11-14T09:29:40.000Z

We're getting this error in Vite + React. It seems that this error is not related to a specific framework. It might be something related to the container, or maybe even the linux, or even Chrome.

Answer 50 · 2023-12-17T07:07:01.000Z

Same problem here. Not using nuxt, however I am using React + Vite while port forwarding using VSCode. Accessing using the direct url works, using port forward, doesn't.

Answer 51 · 2024-02-12T18:03:06.000Z

Hi, I had the same issue as @marcotuna and it turned out that the problem was VSCode port forwarding. Forwarding the port with my ssh config solved it

Answer 52 · 2024-02-12T22:01:17.000Z

@leo-hardy yeah, I confirmed that worked as well. my workaround was to use the --no-fork flag on dev command.

fwiw, this is my working .devcontainer/devcontainer.json. The result is the same for nvm/volta/npm, I only switched to bun for troubleshooting.

{
  "name": "Node.js & TypeScript",
  "image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bookworm", // bookworm is the aarm64 version of the image
  "features": {
    "ghcr.io/devcontainers/features/docker-in-docker:2": {},
  },

  "forwardPorts": [3000],
  "postCreateCommand": "bash -i -c 'curl -fsSL https://bun.sh/install | bash && source ~/.bashrc && bun i && bun dev'",
  "postStartCommand": "bash -i -c 'bun dev'",
  "customizations": {
    "vscode": {
      "extensions": [
        "Vue.vscode-typescript-vue-plugin",
        "Vue.volar",
        "bradlc.vscode-tailwindcss"
      ]
    }
  },

}

edit: this was running nuxt 3.10.0 btw

Answer 53 · 2024-02-27T12:51:20.000Z

Its only happening to me on nuxt dev mode, If I use nuxt build then use node .output/server/index.mjs no problem.

Answer 54 · 2024-02-27T16:28:52.000Z

Hey @pi0 - how's the change for --no-fork going? I forget about that switch most of the times... 😅

Answer 55 · 2024-05-13T17:43:55.000Z

For me, the trick was to expose port via docker-compose.yml instead of using native vscode functionnality of trying to forward ports when they come up.

Sometimes the --no-fork works, sometimes the vite middlewareMode does the trick. Today, this is how I've solved it 😄

Answer 56 · 2024-05-23T20:10:30.000Z

Hi again. Sorry hearing you still have issues with DevContainers. It is something we should investigate and fix for CLI proxy.

In the meantime, have you tried with nuxt dev --no-fork? It might fix possible issues.

Actually, adding --no-fork at the end of the nuxt command did the job. In addition to this, my application also load much faster (like 5x faster)

Answer 57 · 2024-05-24T07:58:40.000Z

The --no-fork definitely seems to help with the ERR_CONTENT_LENGTH_MISMATCH, will this eventually get changed in the future so that it is integrated within the nuxt dev command itself without the fork option?

Answer 58 · 2024-05-27T12:18:11.000Z

Its only happening to me on nuxt dev mode, If I use nuxt build then use node .output/server/index.mjs no problem.

also I stopped using vscode port forwarding and using docker-compose native ports option, it is also major factor.

Answer 59 · 2024-08-18T12:35:57.000Z

My 2 cents:
I got it running inside a dev-container with the following configs:

(1) Use a Dopckerfile for global commands and interface settings (I think this solves the problem):

ARG VARIANT=18-bullseye
FROM mcr.microsoft.com/devcontainers/typescript-node:${VARIANT}

# Install global commands: pnpm, vercel, eslint
RUN npm install -g eslint vercel pnpm \
    && npm cache clean --force > /dev/null 2>&1

# listen on all interfaces inside the container
ENV HOST=0.0.0.0

Important: add environment variable "HOST=0.0.0.0" to the image

(2) Build the image in the dev-container.json. Note: I need to use the bullseye variant, because in my Windows 11 with WSL2 the host uses SSH v8.6p1. To get the ssh working in dev-container we must use a compatible Debian version (which has the code bullseye):

{
  "name": "NodeJS",
  "build": {
    "dockerfile": "Dockerfile",
    "args": {
      "VARIANT": "18-bullseye"
    }
  },
  "customizations": {
    "vscode": {
      "extensions": [
        "GraphQL.vscode-graphql-syntax",
        "GraphQL.vscode-graphql",
        "Nuxtr.nuxtr-vscode",
        "bradlc.vscode-tailwindcss",
        "rangav.vscode-thunder-client",
        "Vue.volar",
        "eamodio.gitlens",
        "ms-vscode.live-server"
      ],
      "settings": {
        "prettier.enable": false,
        "editor.formatOnSave": false,
        "editor.codeActionsOnSave": {
          "source.fixAll.eslint": "explicit",
          "source.organizeImports": "never"
        },
        "eslint.rules.customizations": [
          { "rule": "style/*", "severity": "off" },
          { "rule": "*-indent", "severity": "off" },
          { "rule": "*-spacing", "severity": "off" },
          { "rule": "*-spaces", "severity": "off" },
          { "rule": "*-order", "severity": "off" },
          { "rule": "*-dangle", "severity": "off" },
          { "rule": "*-newline", "severity": "off" },
          { "rule": "*quotes", "severity": "off" },
          { "rule": "*semi", "severity": "off" }
        ],
        "eslint.validate": [
          "javascript",
          "javascriptreact",
          "typescript",
          "typescriptreact",
          "vue",
          "html",
          "markdown",
          "json",
          "jsonc",
          "yaml"
        ],
        "livePreview.serverRoot": "./.vercel/output/static/",
        "livePreview.openPreviewTarget": "External Browser"
      }
    }
  },
  "appPort": 4111,
  "remoteUser": "node"
}

Important: use "appPort" instead of "forwardPorts"

Note: I use the package "@antfu/eslint-config", which is responsible for most vscode settings. Just have a look at @antfu/eslint-config. I think you can configure VSCode as you like - didn't correspond to this issue.

(3) For reference my package.json:

{
  "name": "eoffice",
  "type": "module",
  "private": true,
  "scripts": {
    "dev": "nuxt dev --no-qr -p 4111",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  },
  "dependencies": {
    "@vee-validate/zod": "^4.13.2",
    "nuxt-graphql-client": "^0.2.36",
    "resend": "^3.5.0",
    "vee-validate": "^4.13.2",
    "vue-matomo": "^4.2.0",
    "zod": "^3.23.8"
  },
  "devDependencies": {
    "@antfu/eslint-config": "^2.26.0",
    "@nuxtjs/i18n": "8.4.0",
    "@nuxtjs/robots": "^4.0.2",
    "@nuxtjs/sitemap": "^5.3.5",
    "@nuxtjs/tailwindcss": "^6.12.1",
    "@pinia/nuxt": "^0.5.3",
    "@tailwindcss/forms": "^0.5.7",
    "@tailwindcss/typography": "^0.5.14",
    "nuxt": "^3.12.4",
    "pinia": "^2.2.2",
    "vue": "^3.4.38",
    "vue-datocms": "^7.0.5",
    "vue-router": "^4.4.3"
  }
}

Hope this setup helps in some way.