Table of Contents
The Quasar Framework is a Vue.js-based framework used to develop cross-platform applications using one codebase. This helps by saving in development costs.
Quasar offers a cutting edge user Interface and support builds for:
- Single-page applications.
- Progressive web applications.
- Server-side rendering.
- Mobile apps (Ios and android) using Cordova or capacitor.
- Multi-platform desktop apps using Electron.
- Browser extensions.The overhead of using Quasar is minimal as it implements the best practices in web development out-of-the-box. These practices include SEO, image compression, and mobile responsiveness. It also has components for almost every web development need.
1. Prerequisites
To follow along with this tutorial, you will need:
- Some knowledge of Vue.js.
- Node.js 10.x or newer, excluding 13 and 15. These versions are not tested with Quasar.
- Npm 5.10 or newer / yarn 1.2 or newer.
2. Installing the Quasar framework
There are three ways in which we can install Quasar as listed below.In this tutorial, we’re going to use the third method; using Quasar CLI, which comes with all Quasar features out-of-the-box. You can skip the first two and try them later.
2.1. Embedding into an existing project through a CDN as shown below.
<!DOCTYPE html>
<html>
<head></head>
<body>
<!-- Add at the end of your body tag -->
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.15.6/dist/quasar.umd.min.js"></script>
<script>
new Vue({
el: '#q-app',
data: function () {
return {}
},
methods: {},
})
</script>
</body>
</html>
In your body tag, you should use Quasar components in a div with id q-app as shown below:
<div id="q-app"> ... </div>
Do not use self-closing tags like <q-list /> instead, use <q-list></q-list>.
Note: This is not the best practice, since you will have to make sure to match all Quasar-related tags to the same version you have installed. In the
<script>above, we have used version@1.15.6.Finally, do not forget to add<!DOCTYPE html>at the beginning of the document. This is because some browsers like Safari will have compatibility issues e.g breaking flex.
2.2. Installing using Vue CLI Quasar plugin
To work with Quasar through the Vue CLI plugin ensure to have installed @vue/cli globally.Make sure you have at least version 3. Check the version using the command below.
$ vue --version
If you have Vue CLI 2.x.x, run the command below to uninstall it.
$ npm uninstall -g vue-cli
If you’re using yarn, run:
$ yarn global remove vue-cli
Now install Vue CLI (4+) with the command below:
$ npm install -g @vue/cli
If you’re using yarn, run:
$ yarn global add @vue/cli
To create a project run the command below.
$ vue create my-app
Make sure to select babel from the vue CLI features list prompt while installing.
❯ Default ([Vue 2] babel, eslint)
To add Vue CLI Quasar Plugin, navigate to the created project and run: vue add quasar to add the Quasar plugin.
$ cd my-app $ vue add quasar
The CLI will prompt you to replace some existing files. You should accept this and move on to picking the features you’ll need for the Quasar plugin.This may not be the best approach to install quasar because you’ll not have access to some of the features provided by Quasar CLI. Besides, Quasar was not tested with these plugins.
2.3. Installing using Quasar CLI
Before we install Quasar, first check whether Quasar CLI is globally installed on your computer.
Using the terminal run:
$ quasar -v
If you get a command not found, run the following command to install it.
$ npm install -g @quasar/cli
If you are using yarn, run:
$ yarn global add @quasar/cli
3. Create a Hello World app with Quasar
To create a new Quasar app, run the command below.
$ quasar create hello-world-app
hello-world-app will be the name of your project.Hit Enter to accept the default project details or edit them to your liking.Using the arrow keys select the first CSS preprocessor:
❯ Sass with SCSS syntax (recommended) Sass with SCSS syntax (recommended) Sass with indented syntax (recommended) Stylus (deprecated) None (the others will still be available)
Select Auto-import-in-use Quasar Components and hit Enter.
? Pick a Quasar components & directives import strategy
❯ * Auto-import in-use Quasar components & directives
- also treeshakes Quasar; minimum bundle size
* Import everything from Quasar
- not treeshaking Quasar; biggest bundle size
Then press the spacebar to unselect the ESLint feature. We won’t be needing it here. Hit Enter.
❯ (*) ESLint (recommended)
Finally, using the arrow keys select yarn. This is what we will use during development, you can use npm if you like.
❯ Yes, use Yarn (recommended)
Navigate to the created hello-world-app and serve the app by running the commands:
$ cd hello-world-app $ quasar dev
After serving the app, the URL: http://localhost:8080/#/ opens in your browser to view the app. You’ll see Quasar logo and the name “Quasar” at the center of the page.Open the created hello-world-app folder in your editor of choice.Navigate to the src folder, open App.vue. You’ll see a div with and id q-app.
<div id="q-app">
This is where the Quasar app is injected into the project using the id q-app.Navigate to the src/layouts folder and open the file: MainLayout.vue.Here, we will rename the app title to “Hello World App”. If everything is okay, you’ll see the name change reflected on the toolbar at the top of the app.The toolbar title tag looks like this:
<q-toolbar-title> Hello World App </q-toolbar-title>
You can delete the next div after the q-toolbar-title to remove the Quasar version.
<div>Quasar v{{ $q.version }}</div>
The MainLayout.vue file also contains navigation links for the app. This is where you’ll put navigation links to your app when it grows bigger.For now, the links component, which is the components/EssentialLink.vue, is imported into the MainLayout.vue file.
Data in linksData array is then looped through in the imported EssentialLink component and displayed to the left drawer of the app.Don’t worry if you don’t understand, you’ll get a hang of it with a little practice.Now, navigate to the src/pages folder and open Index.vue.You can delete the whole image tag that looks like this:
<img alt="Quasar logo" src="~assets/quasar-logo-full.svg">
This will remove the image and the name: “Quasar” from the center of the app, leaving the app ready for other components.
4. Familiarize yourself with the structure of the components
Here, we are going to build a component.Just like Vue.js, Quasar uses a single file components (SFC) structure. A SFC has 3 parts; the HTML, SCRIPT (JS) and STYLE(CSS).
The <template> tag represents the HTML, the <script> tag is for JavaScript and the <style> tag is for CSS. These tags should be in a single file.If you have the knowledge of building Vue.js apps, this should be a breeze.Create a file named Country.vue in the components folder. It has the SFC structure like Vue. Add the following code to the HTML part of the code.
<template>
<div>
{{ name }}
</div>
</template>
We intend to display a name of a country in the root page. In the <script>, add the following code.
export default {
name: "Country",
data () {
return {
name: 'Kenya'
}
}
}
The <style> tag should remain as it is.Now in the pages/Index.vue file, import the Country component. The <script> tag should be as shown below.
import Country from "../components/Country";
export default {
name: 'PageIndex',
components: {Country}
}
The html part should look as shown below.
<template>
<q-page class="flex justify-start">
<div>
<Country />
</div>
</q-page>
</template>
The name of the country: “Kenya”, appears at the top left of the page. This is how simple it is to create a component. This component can also be reused in other components.
5. Pros of Choosing Quasar
The following are some of the pros of choosing Quasar framework.
5.1. Support for multiple platforms
This is the most exciting feature that comes with Quasar. It has support builds for multiple platforms using only one codebase.This is a very huge advantage since it saves on costs of application development and time. It supports builds for single-page applications, progressive web applications, etc.
5.2. Fast to get up to speed
Although Quasar comes with a lot of technologies to make it a complete whole, such as Webpack, Cordova, etc. You’ll will only need to learn Vue.js which has a shallow learning curve.
The other technologies are all integrated and configured in Quasar. Thus, you are not required to know them. In addition, it has one of the best detailed documentations around.
5.3. Automated treeshaking
With treeshaking, you can import only the needed components in your app. Quasar provides treeshaking out-of-the-box. Remember, during the installation of the hello-world-app we were prompted to Pick a Quasar components & directives import strategy? We selected the first.
❯ * Auto-import in-use Quasar components & directives
- also treeshakes Quasar; minimum bundle size
* Import everything from Quasar
- not treeshaking Quasar; biggest bundle size
This instructs Quasar to only import the components we’ll need and not the whole Quasar, saving on the bundle size of our application.
5.4. Support for RTL language
RTL (right-to-left) support for both Quasar components and the developer’s own code. It automatically converts developer-written website or app CSS code to RTL if a RTL language pack is used.
5.5. Implements the best practices of web development.
Web development best practices are implemented out-of-the-box; with features including cache busting, source mapping, code splitting, lazy loading and HTML, CSS, JS minification.Quasar developers are also encouraged to implement the best practices in web developement.
5.6. A vast number of language packs
Quasar comes with over 40 language packs out-of-the-box.
6. Cons of choosing Quasar
6.1. It is developed by only one person
The only drawback is that it was developed by one person. This may cause developers to rethink of the framework’s future.
7. Conclusion
We’ve just created a simple app with Quasar framework. You can create even bigger enterprise applications with it.
Quasar tends to bring a better development environment and argues that not everything should be done (as they have been) like in the last decades.If you are a total beginner to Vue and reactive UI libraries and want a good tutorial, I recommend you take a look at Vue and Quasar video tutorials by Danny.
That is it.Happy Coding!
