scratchpad: Quasar
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 splitwise.com 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.
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'inquasar.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.jsand 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" ...no 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 | .. |
notes/observations
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.
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.