skip to content

scratchpad: Quasar

quasar is an open-source UI framework based on vue. I used it to build an app and kept some notes here.
Tags: #vue #quasar #ui
Last updated: Jul 21, 2022

I used Quasar for a Splitwise app I created to make it easier for my partners and I to input expenses with uneven splits, which is annoyingly difficult on itself.

It wasn't the most common or popular framework I found, but when I started this in April or May 2022 there weren't a lot of frameworks supporting Vue3 yet, I was searching for one that did and stumbled across this one. I haven't used a whole lot of these UI frameworks so I don't have much of a framework (ha!) for comparison, but other people on the internet seem to appreciate this one.

character Q from Star Trek TNG saying "How about a big hug?" Q from Star Trek: The Next Generation, because literally everything Quasar is prefixed with a Q

reminders & gotchas

  • start dev server: quasar dev
  • ensure # doesn't show up in URL: set vueRouterMode: 'history' in quasar.config.js
  • here's the list of default scss variables. Customize them by creating src/css/quasar.variables.scss (or .sass)
  • and here's the list of CSS helper classes for positioning - basically it's bootstrap with "q-" in the front
  • routing is defined in src/router/routes.js and is pretty straightforward
  • command to add pinia store: quasar new store <store_name>

pros + cons

Pros Cons
CLI is easy to set up & use Integrating it into an existing project seems unnecessarily complex
has a component for everything has a component for everything
thorough docs with lots of examples seemed a bit tough to find support online, not sure how many people are actually using this
the site includes this layout builder to generate a boilerplate layout layout structure is kinda confusing: My main layout has this attribute: view="hHh lpR fFf" clue what this means
easily supports a bunch of icon libraries not particularly cute (really material looking)
includes Vue3, vite, pinia, and other up-to-date gadgets ..


semantic html pls

I have a list of number inputs, each one part of a 100% split. I want to enclose all 3 in a fieldset, but Quasar does not offer this option.

screenshot of 3 text inputs with numbers which all add up to 100

This git request from 2019 states: "Due to performance constraints this will not get implemented." This seems not a great reason to me.

Brings me to a more general point of accessibility is probably not great. Focus styles are barely noticeable where they exist at all. Buttons are divs. Etc.

form input validation

By default form fields show an immediate error if you focus on them and then focus out of them without filling them out all the way. Despite being a common-ish pattern, this always seems jarring to me - sometimes I just want to tab through fields without filling them out, either because I'm not filling the fields out in order or I'm simply using the tab key to navigate around the page.

I did figure out eventually that I could turn this off by adding lazy-rules="ondemand" to the q-input component.