Before you begin with Quasar, it is a good idea to get acquainted with ES6 and have a fairly good knowledge about how Vue works. (quick overview of ES6 and full description – don’t worry, you don’t need to understand ALL of ES6). For devs experienced with reactive UIs, the Vue documentation itself takes half a day at most to read top-to-bottom and will help you understand how Quasar components can be used and configured.
If you are a total beginner to Vue and reactive UI libraries and want a good tutorial, we recommend you take a look at the Udemy Course - Vue JS 2 - The Complete Guide.
After reading the Vue documentation, let’s clear up some of the most frequently asked questions, like “How can I use Quasar components, Vue properties, methods and events”.
You’ll be building your Quasar app using
<style> tag, you can also use whatever CSS preprocessor you want. Stylus is available out of the box. For SCSS/SASS or LESS, you’ll need to install their Webpack loaders (example:
npm install less-loader).
After installing the loader you need (remember Stylus is already installed for you), you can specify you want your chosen preprocessor to handle the CSS code you’re writing:
In the above example, you would replace
stylus with the preprocessor you’ve chosen.
Quasar comes with a few custom Vue Directives. In order to use them, you need to import them (globally or locally per Vue component where you use them).
Example importing Quasar directive locally:
Notice how Ripple is used in the Vue HTML template as
v-ripple. Vue directives are prefixed with
Example importing Quasar directives globally. This means you won’t need to import the specified Quasar directive in every
*.vue file where you are using them.
Quasar components have names beginning with “Q” like “QBtn” or “QElementResizeObservable”. In order to use them, you need to import them (globally or locally per Vue component where you use them).
Example importing Quasar component locally:
Notice how QBtn is used in the Vue HTML template as
<q-btn>. If we’d import QElementResizeObservable, then we’d use it in template as
Example importing Quasar components globally. This means you won’t need to import the specified Quasar components in every
*.vue file where you are using them.
You can import all Components and Directives globally.
This will not take advantage of tree shaking, causing your code to become bloated with unnescesary/unused code. Not recommended for production. Use this only for quick testing purposes.
Some Quasar components do not need you to include HTML content inside them. In this case, you can use them as self closing tags. One example with QIcon below:
Self-closing means the above template is the equivalent to:
Both forms are valid and can be used.
You will notice throughout the documentation that Quasar components have a section called “Vue Properties”. These are often called Props in Vue documentation. Example:
|Boolean||Infinite slides scrolling|
|String||Thickness of loading bar.|
|Number||How fast should loading bar update its value (in milliseconds).|
|Object||Object defining columns (see “Columns Definition” below).|
|Array||Array with two numbers. Offset on horizontal and vertical (in pixels).|
Let’s take some examples with a bogus Quasar component (we will call it QBogus) that supports the properties above. We will discuss each of the types of Vue properties in the below sections.
A boolean property means it only accepts a strictly Boolean value. The values will not be cast to Boolean, so you must ensure you are using a true Boolean.
If you are trying to control that property and change it dynamically at runtime, then bind it to a variable in your scope:
If, on the other hand, you know this Boolean value is not going to change, you can use the shorthand version of the variable like a component attribute and just specify it. In other words, if you don’t bind the variable to a variable in the component’s scope, it will always be
As you can imagine, Strings are required as a value for this type of property.
You will notice throughout the documentation that some Quasar components have a section called “Vue Methods”. Example:
|Goes to next slide.|
|Goes to previous slide.|
|Toggles fullscreen mode.|
In order for you to access these methods, you will need to set a Vue reference on the component first. Here’s an example:
You will notice throughout the documentation that some Quasar components have a section called “Vue Events”. Do not confuse these Vue events with the Global Event Bus as these two have nothing in common.
Example of “Vue Events” section in docs:
|Triggered right after the Modal is opened.|
|Triggered right after the Modal is closed.|
In order for you to catch these events, when they are triggered, you will need to add listeners for them on the component itself in the HTML template. Here’s an example:
There are times when you need to access native DOM events on a Quasar component too, like the native
@click. Do not confuse native events with the Vue events emitted by the component. They are different things. Let’s take an example: let’s say we have a component (QBogus) that emits
@close, but doesn’t emit a
@click being a native DOM event, we can still catch it with the