Here is a list of questions which are asked more often then others. If you know of a question that a lot of people ask, just ask it in a comment. If you would like to add to this faq, just leave a comment in the Q & A & R (question, answer, reference) format. Use Markdown! Let's Answer this!!!
Although Quasar framework documentation covers most of the asked questions from users I think it would be nice to have quick reference guide to Frequently Asked Questions.
If you like saving time to yourself and/or to Quasar users reacting to your answer please provide if possible:
- Operating system, Browser (version), Quasar version
quasar --version, and if you are using npm or yarn - link to jsFiddle or Codepen - you can create your own example in Codepen from the existing Quasar component examples e.g. Docs - Quasar - Tabs
Before proceeding following steps have your tried to Google your question? Or, checked out Stackoverflow?
- check the FAQ below
- search in Quasar docs page (See code examples e.g. Docs - Chat - Basic)
- check out Quasar forum
- join Discord chat server
- if upgrading, check out the Upgrade Guide
R: Docs - Quasar - Awesome ever-growing community
A: When developing on Windows there can problems with NPM used locally.
- delete
node_modules,package-lock.json - re-install
yarn install --forcewith yarn.
General rule: use NPM for global packages, Yarn for local packages.
R: TODO - where is the information for new users that when developing under Windows is better to use Yarn (reasons)? Docs - Upgrade guide
Q: quasar build on Win 10 - complains about resource busy or locked. Windows restart is needed whenever I build the app.
A: There is probably other process blocking the dist/spa folder (e.g. Tortoise Git, Remote Desktop etc.). Install a Process Monitor to discover the process which blocks the folder.
A: Change configuration path of Terminal in your code IDE. Docs - cli - upgrade
Webstorm Location
Go to: Settings | Tools | Terminal and Add 'node_modules/.bin' from the project root to $PATH
A: This can happen when your template code is incomplete. Look for missing end tags, or incomplete strings.
A: There are some cases when the regex is not parsed by Babel. Try to change the regex.
Regex example
const regex = /(?<=\[start])(.*)(?=\[end])/s; const result = src.match(regex);)
A: Autocomplete component does not exist anymore in Quasar v1. Functionality for autocompleting is part of QSelect component
A: Use custom sort function or undocumented property this.$refs.YourTableName.computedData.rows
R: Docs - QTable, Example - JsFiddle, Discord chat - @Tobias Mesquita (PT-EN) - 11.04.2019
A: Often you might wish to display the label value of your options in the QSelect rather than the actual value. For example, if you have a QSelect for SalesRegionId but wish to show the descriptive label of that region. eg. Label: NorthWestSales Value: 3
To get this to work in that way, you need to add two settings to your QSelect:
emit-value map-options
R: Docs - QSelect, Example - Codepen
More examples
QTab - tabs looks like they were nested
Browser terminal contains errors
A: Be sure you are not using self closing tags.
A: Unfortunately those services are not supporting IE11 (to date 2019-07-10).
But you can use Codesandbox and published link works on IE11. Source needs to be edited in other modern browser.
A: Add Node.js to configuration with following paths:
Node interpreter: Project C:\Program Files\nodejs\node.exe
Working directory: D:\path\myApp
JavaScrip file: ~\AppData\Roaming\npm\node_modules\@quasar\cli\bin\quasar
Application parameters: dev
URL: http://localhost:8080
A: Check out the article Hack WebStorm to Introspect Quasar Framework Components or go directly to Plugin - Quasar Ide Helper
Note: Webstorm 2019.2 has autocomplete implemented but get more details.
Q: I got in dev tools: "property or method is not defined on the instance but referenced during render"
A: This means your template code referenced something that does not exist in your script code. Double-check your template code for a mispelling.