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.
Familiarize yourself with the list of commands:
See help for any command:
Check the CLI version and, if on a Quasar app folder, also output Quasar version being used.
Initializes an App folder with a starter boilerplate.
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:
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.
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 withsudo chown -R username: .
or run the dev server with root privilegessudo 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.
You can also clean up the build assets with:
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
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:
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:
This command does not rely on Quasar Framework. Any folder with any web content can be served.