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
- 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 Google your question?
- check the FAQ bellow
- search in Quasar docs page (See code examples e.g. Docs - Chat - Basic)
- check out Quasar forum
- join Discord chat server
R: Docs - Quasar - Awesome ever-growing community
A: When developing on Windows there can problems with NPM used locally. Delete node_modules
, lock file
and re-install yarn install --force
with yarn. Or give a npm second chance npm install
. General rule: User 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: Try to 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
R: StackOverflow - terminal shows old npm version Note: it is not working anymore (WebStorm 2019.2)
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: How do I get QSelect to display the label instead of the value?
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: https://quasar.dev/vue-components/select#Example--Map-options
Example Codepen: https://codepen.io/david-watson-the-encoder/pen/eqNrZz