Working with Multiple Vue 3 Projects in a Monorepo

[pablo-vega-kloeckner-i]

Hi everyone 👋

I'm working on a monorepo setup with multiple Vue 3 applications, and I'm looking for best practices around managing structure, shared code, and build configuration.

Here's what my current directory structure looks like:

javascript/
  ├── app1/
  │   ├── Layouts/
  │   ├── Pages/
  │   └── Components/
  ├── app2/
  │   ├── Layouts/
  │   ├── Pages/
  │   └── Components/
  └── shared/
      ├── Components/
      ├── Composables/
      └── Utils/

Each app1 and app2 is a separate Vue 3 application with its own logic, pages, layouts, and components. The shared/ directory contains reusable code (components, composables, utilities) that should be imported and used across both apps.

✅ What I’m trying to achieve:

Cleanly separate app1 and app2 as independent Vue 3 frontends

Be able to import shared (components/composables/utilities) from a common directory

Use Vite (preferred) or Webpack to handle multiple entry points and shared code resolution

Keep things modular and maintainable in the long term

🔧 Questions

How should I structure this monorepo for clean development and build separation of each app?

What's the best way to configure Vite to:

Build each Vue 3 app independently?

Use a shared library without duplicating code or having import issues?

Are there best practices for organizing shared code across apps (e.g. aliasing, symbolic links, packages)?

Should I consider using pnpm workspaces, Yarn workspaces, or Nx/TurboRepo for better monorepo support?

💡 This a video with some related information Abdelrahman Awad - Lessons Learned from Building a Thriving Vue SaaS App | VueJS.DE Conf 2024