# quasarframework/quasar architecture

> Architecture diagram of the GitHub repository quasarframework/quasar, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/quasarframework/quasar
- Repository: https://github.com/quasarframework/quasar

## Overview

Quasar is a Vue framework and project toolchain for creating and running applications across web, server-rendered, static, mobile, desktop, and browser-extension targets. A typical developer starts with project scaffolding, configures an app, then runs development or production commands; the app tooling selects a platform mode to serve or build. The repository also provides the UI runtime, icon/font extras, icon asset generation, and an MCP server for framework documentation and API access. The README documents these capabilities; only selected storage, positioning, and MCP source excerpts were available, so uncertain internal calls are omitted.

Main entry points: [`app-vite/bin/quasar.js`](https://github.com/quasarframework/quasar/blob/dev/app-vite/bin/quasar.js) (App commands), [`app-vite/lib/modes`](https://github.com/quasarframework/quasar/tree/dev/app-vite/lib/modes) (Platform modes), [`create-quasar/lib/create-project-folder.js`](https://github.com/quasarframework/quasar/blob/dev/create-quasar/lib/create-project-folder.js) (Project scaffolder), [`cli/bin/quasar.js`](https://github.com/quasarframework/quasar/blob/dev/cli/bin/quasar.js) (Quasar CLI)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_projects["Project workflow"]
  node_scaffolder["Project scaffolder"]
  node_cli["Quasar CLI<br/>[quasar.js]"]
  node_appcli["App commands<br/>[quasar.js]"]
  node_appbuilder["App builder<br/>[app-builder.js]"]
  node_devserver["Dev server<br/>[app-devserver.js]"]
  node_mode["Platform modes"]
  node_config["App configuration"]
  node_templates["App templates"]
end

subgraph group_runtime["App runtime"]
  node_ui["Vue UI framework<br/>[components.js]"]
  node_position["Popup positioning"]
  node_storage["Browser storage<br/>[web-storage.js]"]
end

subgraph group_assets["Assets and icons"]
  node_extras["Icon and font extras<br/>[index.js]"]
  node_icongenie["Icon asset generator<br/>[generate.js]"]
end

subgraph group_assistant["AI documentation"]
  node_mcp["Quasar MCP server<br/>[server.js]"]
  node_docs["Installed docs and API<br/>[docs.js]"]
end

node_developer(("Developer"))
node_platforms["Target platforms"]
node_webstorage[("Web Storage")]
node_nativeassets["Platform icon assets"]
node_ai(("AI coding agent"))

node_developer -->|"creates project"| node_scaffolder
node_scaffolder -->|"uses templates"| node_templates
node_developer -->|"runs commands"| node_cli
node_cli -->|"invokes app tooling"| node_appcli
node_appcli -->|"loads config"| node_config
node_appcli -->|"starts development"| node_devserver
node_appcli -->|"runs build"| node_appbuilder
node_appbuilder -->|"selects mode"| node_mode
node_devserver -->|"serves mode"| node_mode
node_mode -->|"targets"| node_platforms
node_developer -->|"uses framework"| node_ui
node_position -->|"supports popups"| node_ui
node_storage -->|"reads and writes"| node_webstorage
node_developer -->|"generates assets"| node_icongenie
node_icongenie -->|"writes assets"| node_nativeassets
node_developer -->|"selects extras"| node_extras
node_ai -->|"requests framework help"| node_mcp
node_mcp -->|"reads and searches"| node_docs

click node_scaffolder "https://github.com/quasarframework/quasar/blob/dev/create-quasar/lib/create-project-folder.js"
click node_cli "https://github.com/quasarframework/quasar/blob/dev/cli/bin/quasar.js"
click node_appcli "https://github.com/quasarframework/quasar/blob/dev/app-vite/bin/quasar.js"
click node_appbuilder "https://github.com/quasarframework/quasar/blob/dev/app-vite/lib/app-builder.js"
click node_devserver "https://github.com/quasarframework/quasar/blob/dev/app-vite/lib/app-devserver.js"
click node_mode "https://github.com/quasarframework/quasar/tree/dev/app-vite/lib/modes"
click node_config "https://github.com/quasarframework/quasar/blob/dev/app-vite/lib/quasar-config-file.js"
click node_templates "https://github.com/quasarframework/quasar/tree/dev/app-vite/templates"
click node_ui "https://github.com/quasarframework/quasar/blob/dev/ui/src/components.js"
click node_position "https://github.com/quasarframework/quasar/blob/dev/ui/src/composables/private.use-position-engine/use-position-engine.js"
click node_storage "https://github.com/quasarframework/quasar/blob/dev/ui/src/plugins/storage/engine/web-storage.js"
click node_extras "https://github.com/quasarframework/quasar/blob/dev/extras/index.js"
click node_icongenie "https://github.com/quasarframework/quasar/blob/dev/icongenie/lib/cmd/generate.js"
click node_mcp "https://github.com/quasarframework/quasar/blob/dev/mcp/src/server.js"
click node_docs "https://github.com/quasarframework/quasar/blob/dev/mcp/src/docs.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_scaffolder,node_cli,node_appcli,node_appbuilder,node_devserver,node_mode,node_config,node_templates toneBlue
class node_ui,node_position,node_storage,node_webstorage toneAmber
class node_extras,node_icongenie toneMint
class node_mcp,node_docs toneRose
class node_developer,node_platforms,node_nativeassets,node_ai toneIndigo
```

## Components

### Project workflow

- [Project scaffolder](https://github.com/quasarframework/quasar/blob/dev/create-quasar/lib/create-project-folder.js): `create-quasar/lib/create-project-folder.js`
- [Quasar CLI](https://github.com/quasarframework/quasar/blob/dev/cli/bin/quasar.js): `cli/bin/quasar.js`
- [App commands](https://github.com/quasarframework/quasar/blob/dev/app-vite/bin/quasar.js): `app-vite/bin/quasar.js`
- [App builder](https://github.com/quasarframework/quasar/blob/dev/app-vite/lib/app-builder.js): `app-vite/lib/app-builder.js`
- [Dev server](https://github.com/quasarframework/quasar/blob/dev/app-vite/lib/app-devserver.js): `app-vite/lib/app-devserver.js`
- [Platform modes](https://github.com/quasarframework/quasar/tree/dev/app-vite/lib/modes): `app-vite/lib/modes`
- [App configuration](https://github.com/quasarframework/quasar/blob/dev/app-vite/lib/quasar-config-file.js): `app-vite/lib/quasar-config-file.js`
- [App templates](https://github.com/quasarframework/quasar/tree/dev/app-vite/templates): `app-vite/templates`

### App runtime

- [Vue UI framework](https://github.com/quasarframework/quasar/blob/dev/ui/src/components.js): `ui/src/components.js`
- [Popup positioning](https://github.com/quasarframework/quasar/blob/dev/ui/src/composables/private.use-position-engine/use-position-engine.js): `ui/src/composables/private.use-position-engine/use-position-engine.js`
- [Browser storage](https://github.com/quasarframework/quasar/blob/dev/ui/src/plugins/storage/engine/web-storage.js): `ui/src/plugins/storage/engine/web-storage.js`

### Assets and icons

- [Icon and font extras](https://github.com/quasarframework/quasar/blob/dev/extras/index.js): `extras/index.js`
- [Icon asset generator](https://github.com/quasarframework/quasar/blob/dev/icongenie/lib/cmd/generate.js): `icongenie/lib/cmd/generate.js`

### AI documentation

- [Quasar MCP server](https://github.com/quasarframework/quasar/blob/dev/mcp/src/server.js): `mcp/src/server.js`
- [Installed docs and API](https://github.com/quasarframework/quasar/blob/dev/mcp/src/docs.js): `mcp/src/docs.js`

### Other components

- **Developer**
- **Target platforms**
- **Web Storage**
- **Platform icon assets**
- **AI coding agent**

## Connections

- Developer → Project scaffolder: creates project
- Project scaffolder → App templates: uses templates
- Developer → Quasar CLI: runs commands
- Quasar CLI → App commands: invokes app tooling
- App commands → App configuration: loads config
- App commands → Dev server: starts development
- App commands → App builder: runs build
- App builder → Platform modes: selects mode
- Dev server → Platform modes: serves mode
- Platform modes → Target platforms: targets
- Developer → Vue UI framework: uses framework
- Popup positioning → Vue UI framework: supports popups
- Browser storage → Web Storage: reads and writes
- Developer → Icon asset generator: generates assets
- Icon asset generator → Platform icon assets: writes assets
- Developer → Icon and font extras: selects extras
- AI coding agent → Quasar MCP server: requests framework help
- Quasar MCP server → Installed docs and API: reads and searches