about tsconfig.json
Is there a way to "extend" these files without interfering with the tsconfig.json and tsconfig.server.json files under the .nuxt folder? For example, I want to change the file path alias "~/*" to "../server/*" for the server folder and "../app/*" for the client.
2 Replies
Hi @aranje. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Nuxt 4’s new TypeScript setup (with project references) is specifically designed so that you don’t directly edit the
.nuxt/tsconfig.*.json files, and extends on your root tsconfig.json is no longer supported together with references.[TS extends removal]
Instead, you customize what Nuxt generates by using Nuxt config keys:
- For global / shared TS options, use typescript.sharedTsConfig (this is what was suggested as the fix in the tsconfig.shared.json issue).[tsconfig.shared issue]
- Nuxt also internally manages aliases and passes them into the generated tsconfigs (including Nitro’s), and there have been fixes to re‑expose those aliases and shared aliases into the generated tsconfig files.[restore aliases; shared aliases]
From the sources, there is no documented way to:
- Have your root tsconfig.json “extend” .nuxt/tsconfig.app.json / .nuxt/tsconfig.server.json and
- Override ~/* differently for app vs server (e.g. ../app/* vs ../server/*)
because:
1. extends + references are mutually exclusive and the recommended migration explicitly tells you to remove "extends": "./.nuxt/tsconfig.json" when using references.[TS extends removal]
2. The per‑project configs (tsconfig.app.json, tsconfig.server.json, tsconfig.shared.json, tsconfig.node.json) are fully generated by Nuxt and meant to be controlled via Nuxt config and typescript.*TsConfig, not by directly extending them.
There is an example of changing alias order (to prefer @ over ~) by setting typescript.tsConfig.compilerOptions.paths in nuxt.config, which then feeds into the generated .nuxt/tsconfig.json.[SO alias order] However, the sources do not show a supported pattern for different ~/* mappings for server vs client – only shared aliases and shared/server includes.
So, based on the available information:
- You can influence aliases globally (and for Nitro) via Nuxt config and the typescript.*TsConfig options.
- You cannot safely “extend” the generated .nuxt/tsconfig.*.json files from your root tsconfig.json, and the docs explicitly discourage extends in this setup.
- The knowledge sources do not describe a built‑in way to map ~/* to ../server/* only for server and ../app/* only for client via tsconfig alone.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@786441998458552362> Kapa.ai is still learning and improving, please let me know how I did by reacting below.