The Quasar CLI allows you to create new projects in no time, by generating a base application, filled with everything you need to begin working on your application. It does most of the heavy-lifting, so you need not concern yourself with the redundant tasks of building a base application.
$ npm install -g quasar-cli
Familiarize yourself with the list of commands:
See help for any command:
$ quasar [command name] --help
Check the CLI version and, if on a Quasar app folder, also output Quasar version being used.
$ quasar version
Initializes an App folder with a starter boilerplate.
$ quasar init [template name] <folder-name>
By omitting the
template nameparameter the CLI will detect latest App template and generate the App folder with it.
You can check available App templates, by listing them at any time with:
$ quasar list
Tip - You can also install your own base template from Github with the
quasar init @myrepo/my-quasar-template my-new-app
If you want to refer to a specific branch, use a hash
#and then the branch name.
quasar init @myrepo/my-quasar-template#my-branch my-new-app
The Quasar development server allows you to develop your App by compiling and maintaining code in-memory. A web server will serve your App while offering hot-reload out of the box. Running in-memory offers faster rebuilds when you change your code.
Hot Reload is much more than just refreshing your browser when code changes. It skips the refresh and updates your code on the fly, while maintaining your App’s state (like your VueModel’s data). Please note that there are cases when this is impossible, so the dev webserver will simply refresh your browser.
Furthermore, you can develop your App directly on a phone and still benefit from Hot-Reload. Download and install the Quasar Play App (currently only on Google Play Store) to achieve this functionality.
# run development server (with default theme)
$ quasar dev
# run development server with specific theme
$ quasar dev mat
$ quasar dev ios
# dev server with QR code
# scan QR code with Quasar Play app
$ quasar dev -p
$ quasar dev --play
$ quasar dev mat --play
If you wish to change the port serving your App you have 2 options:
- Open up
/config/index.jsfile and change
- If this is a one time thing, specify the port as an environment variable:
$ PORT=3000 quasar dev
If there appears to be an issue with hot reload, you can try two fixes:
Change the permissions for the project folder with
sudo chown -R username: .
or run the dev server with root privileges
sudo quasar dev
The Quasar CLI can pack everything together and optimize your App for production. It minifies source code, extracts vendor components and leverages browser cache, and much more.
# build for production
$ quasar build
# build for production with specific theme
$ quasar build mat
$ quasar build ios
You can also clean up the build assets with:
$ quasar clean
After creating an App folder with the CLI, you’ll have a folder named
/templates inside your App, which contains templates for:
page, or a generic Vue
You can generate components for your App in your
# get available Component templates
$ quasar new -l
$ quasar new --list
# generate .vue file from a Component template
$ quasar new component Hello
# generate .vue file from a template to a subfolder
$ quasar new layout layout/about/help/Hello
# the above creates src/components/layout/about/help/Hello.vue
Add your own component templates. Quasar will be able to handle them.
quasar new templateName vueFileNamesimply copy the file from
/src/componentswith given names.
# will copy file from `/template/myView.vue` to `/src/components/MyNewView.vue`
$ quasar new myView MyNewView
The currently available App Wrappers are for Cordova & Electron. More will be added in the future, to allow you to build a Google Chrome extension or a Progressive Web App, just to name a few.
The CLI wrap command is like this:
$ quasar wrap <wrapper name>
$ quasar lint
You are able to create an ad-hoc web server to serve static-content web files from a folder. Browser sessions are automatically refreshed when content changes. User click/scroll can be synchronized.
This command comes in really handy after building your Quasar App for production. The
/dist folder contains files that are meant to be served with a webserver. This is how:
# Serve dist folder
# (must build app before that or else current folder will be served):
$ quasar serve
# ..or serve a full or relative path
$ quasar serve dist
$ quasar serve ./dist
$ quasar serve /work/quasar-app/dist
This command does not rely on Quasar Framework. Any folder with any web content can be served.