Nuxt•3mo ago

Working with Multiple Nuxt Projects in a Monorepo

Hi everyone 👋 I'm building a monorepo that contains multiple Nuxt applications, and I'm looking for best practices around structure, shared code, and how to configure the build system efficiently. Here's my current directory structure: javascript/ ├── app1/ │ ├── pages/ │ ├── layouts/ │ └── components/ ├── app2/ │ ├── pages/ │ ├── layouts/ │ └── components/ └── shared/ ├── components/ ├── composables/ └── utils/ Each app1 and app2 is a standalone Nuxt 3 application with its own pages, layouts, and components. The shared/ folder contains reusable code that should be accessible by both apps — things like global components, composables, and utility functions. ✅ What I’m trying to achieve: Clearly separate app1 and app2 as independent Nuxt frontends (e.g., for different clients or parts of a platform) Import shared code (components, composables, utils) from a central place without duplication Use Vite (default in Nuxt 3) to efficiently handle dev/build for multiple apps Avoid code duplication while keeping developer experience smooth 🔧 Questions What's the best way to structure a Nuxt monorepo with multiple apps and shared code? How can I configure Vite (inside Nuxt) to: Support multiple Nuxt app entry points? Share code from a shared/ directory across apps? Should shared/ be a local package (e.g., using npm link, pnpm workspace, or a custom alias)? Is it better to use pnpm workspaces, Yarn workspaces, or a monorepo tool like Nx or TurboRepo with Nuxt?

2 Replies

kapa.ai•3mo ago

Hi @Hacktheblues. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You're asking about best practices for structuring a monorepo with multiple Nuxt 3 applications and a shared codebase, as well as how to configure Vite and package management for this setup. Here’s what the official Nuxt documentation and related sources recommend: --- 1. Monorepo Structure & Shared Code Nuxt supports monorepo setups and provides several mechanisms for sharing code: - Nuxt Layers:
Layers are a first-class way to share code (components, composables, utils, config, etc.) between multiple Nuxt apps. You can create a shared layer (e.g., shared/ with its own nuxt.config.ts) and have each app extend from it. This allows you to reuse code and configuration without duplication. Layers are easy to author and maintain, and their structure is almost identical to a standard Nuxt app.
Read more: Authoring Nuxt Layers - Directory Structure Example:

  javascript/
    ├── app1/
    │   └── nuxt.config.ts
    ├── app2/
    │   └── nuxt.config.ts
    └── shared/
        ├── components/
        ├── composables/
        ├── utils/
        └── nuxt.config.ts

  javascript/
    ├── app1/
    │   └── nuxt.config.ts
    ├── app2/
    │   └── nuxt.config.ts
    └── shared/
        ├── components/
        ├── composables/
        ├── utils/
        └── nuxt.config.ts

In each app’s nuxt.config.ts:

  export default defineNuxtConfig({
    extends: ['../shared']
  })

  export default defineNuxtConfig({
    extends: ['../shared']
  })

This way, app1 and app2 both inherit from the shared layer, gaining access to shared components, composables, and utils automatically. - Shared Directory (Nuxt 3.14+):
The shared/ directory is designed for code that can be used in both the Vue app and the Nitro server. Only files in shared/utils/ and shared/types/ are auto-imported (with Nuxt 4 compatibility enabled). Other files can be imported using the #shared alias.
See: shared/ directory usage and auto-imports --- 2. Vite Configuration for Multiple Apps - Multiple Entry Points:
Nuxt does not natively support running multiple apps from a single Vite instance. Each Nuxt app (e.g., app1, app2) should be run and built independently. However, sharing code via layers or packages is efficient and works seamlessly with Vite. - Sharing Code Across Apps:
By using Nuxt layers or a shared directory/package, Vite will handle HMR and build optimizations for shared code as long as it’s properly referenced (either via extends or as a workspace package). --- 3. How to Reference Shared Code - Local Package (Recommended):
You can make shared/ a local package and reference it via your package manager (e.g., pnpm workspaces). This is especially useful if you want to share code as a package and control versioning. - Nuxt Layers:
If you use layers, you don’t need to set up a package—just use the extends property in nuxt.config.ts. - Custom Aliases:
For non-auto-imported files, use the #shared alias to import code from the shared directory, as Nuxt automatically configures this alias for you. --- 4. Package Manager & Monorepo Tools - pnpm Workspaces (Recommended):
The Nuxt ecosystem recommends pnpm as the package manager for modules, libraries, and apps. pnpm workspaces are well-supported and efficient for monorepos.
See: Conventions Across Ecosystem - Yarn Workspaces:
Also supported, but pnpm is preferred in the Nuxt community. - Nx/TurboRepo:
These tools can be used for advanced monorepo management (task orchestration, caching, etc.), but are not required for Nuxt monorepos. If your monorepo grows in complexity, they can add value, but for most cases, pnpm workspaces and Nuxt layers are sufficient. --- Summary of Best Practices - Use Nuxt layers or a shared local package for shared code. - Structure each Nuxt app as an independent project, extending from the shared layer. - Use pnpm workspaces for efficient dependency management. - Use the #shared alias or auto-imports for shared code, depending on your Nuxt version and config. - Run/build each app independently; Vite will handle shared code efficiently if referenced correctly. For more details and examples, see the official Nuxt documentation on Layers, Shared Directory, and Monorepo Conventions. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@691036389986271233> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Working with Multiple Nuxt Projects in a Monorepo

Did you find this page helpful?