Why donate
API Explorer
Upgrade guide
NEW!
The quasar.config file
Convert to CLI with Webpack
Browser Compatibility
Supporting TypeScript
Directory Structure
Commands List
CSS Preprocessors
Routing
Lazy Loading - Code Splitting
Handling Assets
Boot Files
Prefetch Feature
API Proxying
Handling Webpack
Handling process.env
State Management with Pinia
State Management with Vuex
Linter
Testing & Auditing
Developing Mobile Apps
Ajax Requests
Opening Dev Server To Public
Quasar CLI with Webpack - @quasar/app-webpack
Directory Structure

This is the structure of a project with all modes installed. There’s no reason to be intimidated though!

TIP

If you are a beginner, all you’ll need to care about is the /quasar.config file (Quasar App Config file), /src/router, /src/layouts, /src/pages and optionally /src/assets.

public
# Pure static assets (directly copied)
assets/
# Dynamic assets (processed by Vite)
components/
# .vue components used in pages & layouts
app.sass
quasar.variables.sass
# Quasar Sass variables for you to tweak
layouts/
# Layout .vue files
pages/
# Page .vue files
boot/
# Boot files (app initialization code)
index.js
# Vue Router definition
routes.js
# App Routes definitions
index.js
# Pinia initialization
<store>
# Pinia stores...
<store>...
index.js
# Vuex Store definition
<folder>
# Vuex Store Module...
<folder>
# Vuex Store Module...
App.vue
# Root Vue component of your App
index.template.html
# Template for index.html
src-ssr/
# SSR specific code (like production Node webserver)
src-pwa/
# PWA specific code (like Service Worker)
src-capacitor/
# Capacitor generated folder used to create Mobile Apps
src-cordova/
# Cordova generated folder used to create Mobile Apps
src-electron/
# Electron specific code (like "main" thread)
src-bex/
# BEX (browser extension) specific code (like "main" thread)
spa
# Example when building SPA
ssr
# Example when building SSR
electron
# Example when building Electron
...
quasar.config.js
# Quasar App Config file
.gitignore
# GIT ignore paths
.editorconfig
# EditorConfig file
.eslintignore
# ESLint ignore paths
.eslintrc.cjs
# ESLint config
postcss.config.cjs
# PostCSS config
babel.config.cjs
# Babel config
jsconfig.json
# Editor config (if not using TypeScript)
tsconfig.json
# TypeScript config
package.json
# npm scripts and dependencies
README.md
# Readme for your website/App