Directory Structure | Quasar Framework

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)

src/

assets/

# Dynamic assets (processed by Vite)

components/

# .vue components used in pages & layouts

css/

# CSS/Sass/... files for your app

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)

router/

# Vue Router

index.js

# Vue Router definition

routes.js

# App Routes definitions

stores/

# Pinia Stores (if not using Vuex)

index.js

# Pinia initialization

<store>

# Pinia stores...

<store>...

store/

# Vuex Store (if not using Pinia)

index.js

# Vuex Store definition

# Vuex Store Module...

# 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)

dist/

# Where production builds go

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

Caught a mistake?Edit this page in browser