Quasar CLI | Quasar Framework

Quasar CLI

Quasar CLI is the pride of Quasar Framework. You can seamlessly build:

a SPA (Single Page Application/Website),
a SSR (Server-side Rendered App/Website),
a PWA (Progressive Web App),
a BEX (Browser Extensions),
a Mobile App (through Cordova or Capacitor),
an Electron App

…within the same project folder, ensuring you are following the best Quasar practices while everything will simply work out of the box.

Trying Quasar CLI Online

You can try Quasar CLI online directly in the browser, without installing anything! You will also be able to use the command line, so it will be almost identical to creating a project locally.

Open in Stackblitz

TL;DR

Requirements:

Node 14+
Yarn v1 (strongly recommended), PNPM, NPM or Bun

Yarn

NPM

PNPM

Bun

$ yarn global add @quasar/cli
$ yarn create quasar

Pick Quasar CLI with Vite if you want:

Faster dev server start
Faster hot updates
Faster build
Superior PWA, SSR and BEX Quasar modes (more features)

View Components

Installation / Project Scaffolding

Requirements:

Node 12+ for Quasar CLI with Webpack, Node 14+ for Quasar CLI with Vite.
Yarn v1 (strongly recommended), PNPM, or NPM.

Let’s create a Quasar app:
Yarn
NPM
PNPM
Bun
$ yarn create quasar
Copied to clipboard
TIP
You may be presented with a confirmation to install the create-quasar package, press the enter key to confirm.
Pick the App with Quasar CLI option then Quasar v2.
You will then be asked which Quasar App CLI you want. Do you prefer the Vite one or the Webpack one?
Tip: pick "Quasar CLI with Vite" if you want:
- Faster dev server start
- Faster hot updates
- Faster build
- Superior PWA, SSR and BEX Quasar modes (more features)
Answer the rest of the questions and you’re almost done.
Now, do you want to be able to run Quasar CLI commands directly (eg. $ quasar dev/build) or through yarn or npx ($ yarn quasar dev/build / npx quasar dev/build)?
We strongly recommend to pick the first choice and be able to run commands directly. Actually, you’ll be able to do even more than just this (eg. “quasar upgrade” or “quasar serve” commands). For this, you’ll need to globally install the @quasar/cli package:
Yarn
NPM
PNPM
Bun
$ yarn global add @quasar/cli
Copied to clipboard
TIP
If you are using Yarn, make sure that the Yarn global install location is in your PATH:
```
# in ~/.bashrc or equivalent
export PATH="$(yarn global bin):$PATH"

# for fish-shell:
set -U fish_user_paths (yarn global bin) $fish_user_paths
```
Copied to clipboard
Under Windows, modify user's PATH environment variable. If you are using yarn then add `%LOCALAPPDATA%\yarn\bin`, otherwise if you're using npm then add `%APPDATA%\npm`.
Or to do this easily, enter the following code in the terminal:
```
# If you're using Yarn:
setx path "%path%;%LocalAppData%\yarn\bin"

# Or if you're using NPM:
setx path "%path%;%AppData%\npm"
```
Copied to clipboard
WSL2
Microsoft’s recommended Nodejs development environment setup in WSL2.
When using WSL2 (Windows Subsystem for Linux) Microsoft recommends keeping files in the linux file system to maximize performance. Projects will build around 3X slower and HMR (Hot Module Reload) will not work without a hack if the project files are on the Windows mount instead of the local linux file system. This is also true in Docker for Windows based development environments.

How Quasar CLI works

Quasar CLI (@quasar/cli) works in tandem with either @quasar/app-vite or @quasar/app-webpack. The first one is optional (but strongly recommended) and allows you to run Quasar CLI commands directly and some other useful commands like quasar upgrade (upgrade Quasar packages seamlessly) or quasar serve (serve your distributable with an ad-hoc webserver). The second package is the heart of it (runs the important commands - dev, build, inspect, info, describe etc) and it gets installed locally into every Quasar project folder.

Running without the global @quasar/cli

However, should you want independence of the globally installed @quasar/cli package, you have the possibility to directly run the Quasar CLI commands. It is @quasar/app-vite or @quasar/app-webpack (which is specific to each project folder) that will run all the CLI commands.

Here are the options:

You can write npm scripts (in your package.json) to run Quasar commands.
Example of adding a few npm scripts into your package.json:
```
// package.json
"scripts": {
  "dev": "quasar dev",
  "build": "quasar build",
  "build:pwa": "quasar build -m pwa"
}
```
Copied to clipboard
The above will allow you to run $ yarn dev or $ yarn build without the need of a globally installed @quasar/cli, should you wish to do so.
Alternatively, you can directly run the Quasar CLI commands through Yarn:
```
$ yarn quasar dev
$ yarn quasar inspect
# ..etc
```
Copied to clipboard

Or use npx:

$ npx quasar dev
$ npx quasar inspect
# ..etc

What next?

View Components

Caught a mistake?Edit this page in browser

1. Introduction

2. Trying Quasar CLI Online

3. TL;DR

4. Installation / Project Scaffolding

5. How Quasar CLI works

6. What next?