Support for Multiple Apps in a Single Codebase

[mridulsri]

I need a solution to develop multiple apps using a single code base using Quasar CLI (Vite). Each app has its main.ts, App.vue, store, and router, but they share some common components and code available on the root (src) level.

structure will be like as:

Note: scr/main.ts should decide which app needs to run or be built based on the .env provided

I saw one thread but no luck on that #6936
Please suggest.

[brunobydesign]

Nuxt has solved this problem nicely with the nuxt-extends feature,
see https://github.com/nuxt-contrib/nuxt-extend

Maybe the Quasar team could have a look at this tiny piece of code and see if it's doable in Quasar ?

[TobyMosque]

Quasar Multiple Apps with pnpm Workspaces

You can achieve a multi-app structure with shared code using pnpm workspaces:

Project Structure

├── pnpm-workspace.yaml
├── packages/
│   ├── admin/
│   │   ├── package.json
│   │   ├── quasar.config.ts
│   │   ├── tsconfig.json
│   │   └── src/
│   │       ├── App.vue
│   │       ├── main.ts
│   │       ├── router/
│   │       └── stores/
│   ├── client/
│   │   ├── package.json
│   │   ├── quasar.config.ts
│   │   ├── tsconfig.json
│   │   └── src/
│   │       ├── App.vue
│   │       ├── main.ts
│   │       ├── router/
│   │       └── stores/
│   └── shared/
│       ├── package.json
│       ├── tsconfig.json
│       └── src/
│           ├── components/
│           ├── layouts/
│           ├── pages/
│           ├── stores/
│           ├── css/
│           └── assets/

Configuration Files

1. pnpm-workspace.yaml (root)

packages:
  - 'packages/*'

2. packages/admin/quasar.config.ts

import { fileURLToPath } from 'node:url'

export default (ctx) => {
  return {
    build: {
      alias: {
        '@shared': fileURLToPath(new URL('../shared/src', import.meta.url))
      }
    }
  }
}

3. packages/admin/tsconfig.json

{
  "extends": "@quasar/app-vite/tsconfig-preset",
  "compilerOptions": {
    "paths": {
      "@shared/*": ["../shared/src/*"]
    }
  }
}

4. packages/shared/package.json

{
  "name": "@myapp/shared",
  "version": "1.0.0",
  "type": "module",
  "peerDependencies": {
    "vue": "^3.0.0",
    "pinia": "^2.0.0",
    "quasar": "^2.0.0",
    "vue-router": "^4.0.0"
  }
}

5. packages/shared/tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "types": ["vue"]
  },
  "include": ["src/**/*.ts", "src/**/*.vue", "src/**/*.tsx"],
  "exclude": ["node_modules"]
}

6. packages/admin/package.json

{
  "name": "admin",
  "version": "1.0.0",
  "scripts": {
    "dev": "quasar dev",
    "build": "quasar build"
  },
  "dependencies": {
    "@myapp/shared": "workspace:*"
  }
}

6. Root package.json

{
  "scripts": {
    "dev:admin": "pnpm --filter admin dev",
    "dev:client": "pnpm --filter client dev",
    "build:admin": "pnpm --filter admin build",
    "build:client": "pnpm --filter client build"
  }
}

Usage

Import shared components in your apps:

<script setup lang="ts">
import SharedComponent from '@shared/components/SharedComponent.vue'
import SharedLayout from '@shared/layouts/MainLayout.vue'
</script>

<template>
  <SharedLayout>
    <SharedComponent />
  </SharedLayout>
</template>

Using shared stores:

// In your app's store or component
import { useSharedStore } from '@shared/stores/sharedStore'

const sharedStore = useSharedStore()

Example shared store (packages/shared/src/stores/sharedStore.ts):

import { defineStore } from 'pinia'

export const useSharedStore = defineStore('shared', {
  state: () => ({
    user: null,
    theme: 'light'
  }),
  actions: {
    setUser(user: any) {
      this.user = user
    },
    toggleTheme() {
      this.theme = this.theme === 'light' ? 'dark' : 'light'
    }
  }
})

Running the apps:

# Install dependencies
pnpm install

# Run admin app
pnpm dev:admin

# Run client app
pnpm dev:client

# Build admin app
pnpm build:admin

# Build client app
pnpm build:client

Key Benefits

1. Complete isolation: Each app has its own Quasar configuration and dependencies
2. Shared code: Common components, stores, and utilities are compiled by each app's Vite instance
3. Type safety: TypeScript recognizes the @shared alias
4. Independent builds: Each app can be built and deployed separately
5. No runtime overhead: Shared code is bundled into each app during build
6. Shared state management: Common Pinia stores can be reused across apps

Notes

• The @shared alias is configured in both Vite (via quasar.config.ts) and TypeScript (via tsconfig.json)
• Each app maintains its own main.ts, App.vue, router, and store
• Shared components are treated as source code and compiled by each app's build process
• No need for a root-level main.ts or complex env-based switching

Important: Peer Dependencies

The @shared package uses peer dependencies to avoid version conflicts:

• Vue, Pinia, Quasar, and Vue Router are defined as peer dependencies in the shared package
• This ensures that the shared code uses the same versions installed in each app
• Each app (admin/client) must have these dependencies in their own package.json
• This prevents duplicate installations and version mismatches

TypeScript Configuration

The shared package has its own tsconfig.json to:

• Enable proper type checking for shared components and stores
• Provide better IDE support when editing shared code
• Ensure consistent TypeScript settings across the shared codebase

If you encounter TypeScript errors in shared components, ensure that the app's tsconfig.json includes the shared folder in its compilation scope.

Disclaimer

This solution is based on a suggested structure and real-world usage patterns. However, as this response was assembled with AI assistance, please review all code carefully before implementation. There may be inconsistencies or adjustments needed for your specific use case. Test thoroughly in your development environment.

[mridulsri]

Thank you, @TobyMosque!
I was just trying to solve this issue and came up with the following solution:
🔗 quasar-multi-app-starter

This is just an initial draft and may require further enhancements.