Front-end frameworks help developers save time when developing a website or an application. They make it possible to simplify how code is written by offering ready-made components or features, depending on the framework’s specific focus.
In this article we are going to introduce you to the front-end framework named Quasar. Its slogan: “Beyond the framework”.
What is Quasar?
Quasar is an open-source front-end framework. Its code is based on the Vue.js framework.
Created by Razvan Stoenescu, the framework’s first stable version was released in July 2019.
The developer created a tool that uses a single code base to build for several targets: website, PWA, mobile application and more.
The purpose of this JS framework
Time savings
With Quasar, developers can deploy their project to different targets very quickly.
Indeed, a single code base is enough to create both an SPA, SSR or PWA website and an iOS and Android mobile application. There is no longer any need to keep several files and lines of code up to date — there is only one single code base to update.
There is also no longer any need to worry about the different technologies to use in order to vary your distribution targets. Quasar takes care of that automatically when you ask it to compile.
What’s more, Quasar offers “hot reloading”. This is a feature that allows developers to code while having a live preview of their work, without needing to reload the page.
Size savings
Weighing in at 437 KB, Quasar is a very lightweight framework.
In addition, it has its own internal tools that you can add to your projects according to your needs. This saves you from having to attach other libraries, which can very quickly make your project heavier. You will therefore gain in weight, in loading time and in efficiency!
Ease of use
Quasar has a component library comprising more than 70 elements — plenty to find what you need. What’s more, every component is fully responsive so that it adapts automatically for web and mobile rendering.
The Quasar framework has very detailed documentation and a blog, as well as a large community that is active on the Quasar forum and on the Discord chat. You will have no trouble finding the answers to all your questions.
A three-part structure
Quasar has opted for a development structure divided into three parts, between HTML, CSS and JavaScript. In your code you will therefore find:
- a
<template>block for the HTML - a
<script>block for JavaScript or TypeScript - a
<style>block for CSS, SCSS or Sass
Installing Quasar
To install the Quasar framework using Node.js, you need to use the command npm install -g @quasar/cli and then the command npx quasar create to create your project.
Once the installation is under way, all that remains is to answer a few questions in order to initialise the project (author name, project name, choice of CSS pre-processor, and so on).
During configuration you will have to choose whether you want to use all the components included with the framework, or whether you prefer to import only the components you will actually need. Of course, you will be able to import other elements of the JS framework later on if you realise they would be useful. However, the second option will allow you to save on size and therefore on loading speed in your applications.
To launch your project in development mode, you will need to use the following command: npx quasar dev, which will run in your default browser.
Compiling a mobile version with Quasar
First, you need to create the production application using the command npx quasar build.
You then have two options for compiling your base code into a mobile version (via Cordova or via Capacitor).
All that remains is to use the following command: npx quasar dev -m capacitor -T android to compile the Android version, or npx quasar dev -m capacitor -T ios for iOS.
The key takeaway: as mentioned earlier in this article, Quasar is based on Vue.js, so it is recommended that you first master Vue.js before getting started with Quasar.
Easy and fast are the watchwords of the Quasar framework.
For more articles, don’t hesitate to browse our Framework section.
