Directory Structure | Quasar Framework

Quasar CLI with Vite - @quasar/app-vite

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

# (or .ts) Vue Router definition

routes.js

# (or .ts) App Routes definitions

stores/

# Pinia Stores

index.js

# (or .ts) Pinia initialization

<store>

# Pinia stores...

<store>...

App.vue

# Root Vue component of your App

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

# (or .ts) Quasar App Config file

index.html

# Template for index.html

.gitignore

# GIT ignore paths

.editorconfig

# EditorConfig file

eslint.config.js

# ESLint config

postcss.config.js

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