New Nuxt project as monorepo
Hey, it's been almost a year since I used Nuxt. I see there are a lot of new features since v3.
Anyways, I wanted to ask the AI here to give me a starter guide or directions on how to setup a monorepo with Nuxt v4.
I'm reading about layers and stuff and getting a bit lost.
I just want to setup a monorepo with Nuxt in it and NuxtUI to start out.
Monorepo, because I plan on adding separated stuff, like a NativeScript app in the future and a second Nuxt project that will share components and stuff.
2 Replies
Hi @eyJOdnJHb25uYSI6Imd2VXVwIn0=. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Certainly! Here’s a focused starter guide for setting up a Nuxt v4 monorepo, based on the latest folder structure and features:
---
1. Monorepo Structure
With Nuxt v4, the recommended folder structure has changed. The new default structure separates your application code (
app/), server code (server/), modules, and public assets at the root level. This is especially helpful for monorepos, as it keeps things organized and makes sharing code easier. Here’s what the structure looks like:
- app/: Your main Nuxt app code.
- modules/: Custom Nuxt modules.
- server/: API routes, server middleware, etc.
- shared/: New in Nuxt 4, for utilities and code shared between client and server (pure JS/TS, not Vue/Nitro-specific) feat(schema,nuxt): add shared folder to alias and auto-imports, docs: added new Shared folder to the example of v4 folder structure.
- public/: Static assets.
2. Monorepo Tooling
For managing a monorepo, tools like pnpm workspaces, Turborepo, or Yarn workspaces are commonly used. Nuxt itself doesn’t enforce a monorepo tool, but the community often uses pnpm or Turbo. You can see examples of this setup in real-world projects and issues How to dockerize a nuxt project inside Turborepo? Part 1.
3. Nuxt Layers
Nuxt Layers allow you to share code (like components, composables, or even configuration) between multiple Nuxt projects in your monorepo. You can create a base layer (e.g., a UI library or shared theme) and have multiple Nuxt apps extend it. This is especially useful for sharing design systems or utilities across projects. For a practical guide, see How to use Nuxt Layers to encapsulate your code.
4. NuxtUI
To add NuxtUI (or any other UI library), simply install it in your monorepo’s root or in the relevant workspace/app. Then, import and use it as you would in a standard Nuxt project.
5. Getting Started
Step-by-step:
1. Initialize your monorepo (e.g., with pnpm or Turbo).
2. Create your Nuxt app in the app/ directory (or as a workspace).
3. Set up the new folder structure as shown above.
4. Add a shared/ folder for utilities you want to share between projects.
5. Add NuxtUI and other dependencies.
6. (Optional) Add more Nuxt apps or other projects (like NativeScript) as separate workspaces.
6. References and Further Reading
- feat(nuxt,schema): support v4 folder structure
- docs: added new Shared folder to the example of v4 folder structure
- feat(schema,nuxt): add shared folder to alias and auto-imports
- How to use Nuxt Layers to encapsulate your code (YouTube)
- NEW Folder Structure in Nuxt 4 (YouTube)
---
Tip: The new shared/ folder is for pure JS/TS utilities, not Vue or Nitro-specific code. Use it to share logic between your Nuxt apps and server code. For sharing Vue components, use Nuxt Layers or a package in your monorepo.
If you need more details on a specific step, let me know!
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@234662458638336000> Kapa.ai is still learning and improving, please let me know how I did by reacting below.