An Introduction to the Quasar Framework

Build high-performance Vue.js interfaces, fast

If you are a React developer and want to start with Vue, then before continuing, please read my previous article.

In this article, I will try to introduce the readers to a new Vue-based framework named Quasar.

What Quasar’s official docs say is this:

“Build high-performance VueJS user interfaces in record time. This is possible because you only need to write one authoritative source of code for all platforms: responsive desktop/mobile websites (SPA, SSR), PWAs (Progressive Web Apps), mobile apps (that look native) and multi-platform desktop apps (through Electron) and also Browser Extensions.”

What Actually Is the Quasar Framework?

• It is an open source, Vue-based framework.
• It is one source code for all platforms including SPAs (single page apps), PWAs (progressive web apps), BEXs (browser extensions), SSRs (server-side rendered apps), hybrid mobile apps, and multi-platform desktop apps.
• Quasar provides support for app extensions, RTL, your own responsive material design components, multiple language support, and Quasar CLI.
• There’s a component for almost every web development need within Quasar.
• You don’t need additional heavy libraries like Hammer.js, Moment.js, or Bootstrap while working with Quasar. It’s got those needs covered internally, and all with a small footprint.

Quasar’s motto is “write code once and simultaneously deploy it as a website, a mobile app and/or an Electron app.”

Comparing Vue, Angular, and React

Let’s start with a quick comparison chart in terms of their history and status.

The history of Angular vs. React vs. Vue

• Vue is the latest JavaScript technology among the three.
• Vue and React use virtual DOM, while Angular uses real DOM.
• Vue and Angular are JavaScript frameworks, while React is a library.
• Vue uses single file components (SFCs), unlike React and Angular, which contain templates, scripts, and styles.

Why Quasar?

• It has support for multiple platforms.
• It has a responsive UI framework with lots of prebuilt components out of the box.
• Quasar is designed with performance and responsiveness in mind.
• It has the best support for desktop and mobile browsers (including iOS Safari) out of the box.
• Quasar developers are encouraged to follow web development best practices, and Quasar comes with many embedded features in that regard out of the box: HTML/CSS/JS minification, cache busting, tree shaking, source mapping, code splitting, and lazy loading.
• Quasar has RTL (right-to-left) support for both Quasar components and the developer’s own code. Developer-written website/app CSS code gets automatically converted to RTL if an RTL language pack is used.
• There are more than 40 Quasar language packs available out of the box.
• Its documentation is detailed and comprehensive.
• Quasar CLI takes care of all the quirks involved in developing an SPA, PWA, SSR, mobile app, or Electron app.
• Your full focus is on your app’s content rather than all the other boilerplate stuff around it.

What Is Single File Component (SFC) structure?

A Vue component is divided into three parts.

HTML

<template>
   <div>{{ text }}</div>
</template>

Script (JS)

<script>
  export default {
    name: 'ComponentName',
    data: (){
      return {
       text: 'Some content...'
      }    
    }
  }
</script>

Style (CSS)

<style lang='css'>
</style>

Setting Up a Quasar Environment

• Install Node after downloading from the official download link.
• Install Quasar CLI by running:

npm install -g @quasar/cli

This command will do the necessary bootstrapping for you. It will ask a few questions, for which you can set your own priorities based upon the project’s requirements.

You can see the list of all the available commands by running Quasar on the terminal.

After the project is created successfully, go into the root folder and run:

quasar dev

You will be redirected to http://localhost:8080 and see the following:

Have a look at the folder structure, and you will see something like this:

Now open MainLayout.vue file and rename the app title to “My First Quasar App.” See if the change is reflected on the UI.

If everything goes perfectly, you should now see the name change reflected on the UI:

Awesome! It means that your first Quasar app is up and running. Go through the official docs and get your hands dirty with this awesome framework.

Learned something new? Comments and feedback always make the writer happy. Happy coding!