Quasar Framework: Tutorial part 2— Installation & practices

4 min readApr 23, 2020

If you are a beginner in VueJS or Quasar framework, then before continuing, I would recommend you to read part 1 of this tutorial.

So in this part of the tutorial, we are going to setup the environment to develop Quasar applications. I don’t know about the best process of learning but, I’ll tell you that what I do, when I start to learn something new. I don’t believe in watching the videos to install the setup and starting from the scratch by watching those lengthy video tutorials because I am quite fickle person 😄

Instead what I do is,

First I go to the official installation page of particular language
Download and Install the prequisites and go through the necessary lines only from the documentation to run the first app. What after installation ?
Run the first app…take a breath and feel that you have done some magic (by running the command npm start 😄 ).
Next, without worrying about syntax, unfamiliar method and class names, try to understand the folder structure, find out the first page that is going to open for e.g. index.html or index.template.html
Try to find the the main file that is responsible for routing and figure out that how component is going to load. Do change in the component’s html content (for web) for some fun, and have a look at web page in the browser that content is really changing quickly. That’s fun !

Android : Now the same way we can do in Android also. We will install the requirements to run the hello world app and change the content in XML and rerun the app and have a look at the app is also working well in device. It’s magic ! Believe me it’s magic 😃

How to follow above process to setup Quasar?

Go to the official installation page:

Not now !
Install NodeJS > =10 (Recommended to download LTS 12.16.0) https://nodejs.org/en/download/
Install Quasar CLI by running below command in console

npm install -g @quasar/cli

Create new project in some folder by running

quasar create my-first-app

Here, while creating a new project, there are some features you would like to install in the project. I would recommend to use sass with SCSS syntax (For styling), Auto import quasar components and ESLint (For pretty code formation and reduce the errors).

After creating the project, go to root folder and run,

quasar dev

Here, in the Quasar project folder, you will have the availability of many more commands, too. See, Quasar Command List.
Outside of the project you will have only around 5 commands to play with, but in Quasar project folder, few more commands are added from the package. Don’t worry, we are also going to play with them. 😅

Take a breath…

you will be redirected to http://localhost:8000

If page is loaded, then you may take a look into the folder structure, do not need to worry about anything if you find unfamiliar. Check few folders and do some changes in the component’s HTML and have a look in the browser if it’s changing or not because at first, it’s necessary to get familiar with the language.

As you can see in the picture, you can do changes in the MainLayout.vue. Now, if you remember from the previous article, this is SFC (Single File Component) that has Template and Script in the same Component also it render as it is. Change the title of the Quasar app, save and have a look into the browser, the app title should be changed.