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.
reminders & gotchas
- start dev server:
- ensure # doesn't show up in URL: set
- here's the list of default scss variables. Customize them by creating
- 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
|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:
|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.
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