There are a number of UI toolkits in the JS (and specifically VueJS) space. BootstrapVue, Vuetify, VueStrap, Ionic, Quasar, ElementUI and more. I wrote a post some time ago (which may get recovered at some point!) about some of these, and indicated I’d be diving in to one or more at some point, and… I have.<\/p>\n\n\n\n
Through a long and winding set of events, I’ve found myself working with Quasar<\/a>\/Vue3 over the last 7 months. This is a relatively big change from BootstrapVue<\/a> which I’d used on multiple projects since pre-covid times.<\/p>\n\n\n\n As a side note, I’m generally a fan of these, because there’s typically a lot of work that’s already gone in to providing defaults – default settings, theme\/styling, documentation, accessibility concerns, testing, and many other things I may not have thought about up front. I’ve worked with folks that are very against this approach, and prefer to do everything ‘by hand’, but I’ve also found a lot tends to be missed, especially with respect to accessibility, documentation and testing, and often for little upside (yes, you can control the UI 100% to your liking but… I also happen to like the defaults and options available in the bootstrap world, for example). What I’ve recently started doing is wrapping the framework components in my own super-components. This allows for some ability to do more uniform customizations of, say, input tags. <\/p>\n\n\n\n Using this in a project…<\/p>\n\n\n\n Each input now gets ‘dense’, ‘stacked-label’ and ‘clearable’ attributes set to on without the repetition. (FWIW, this is typed from memory – hopefully no major errors in there!).<\/p>\n\n\n\n There may potentially be some benefit if the desire to switch to a new UI toolkit arises, but I suspect that’s probably way too hard of a lift (but I’ve only just considered this a potential benefit this morning!) There are a number of UI toolkits in the JS (and specifically VueJS) space. BootstrapVue, Vuetify, VueStrap, Ionic, Quasar, ElementUI and more. I wrote a post some time ago (which may get recovered at some point!) about some of these, and indicated I’d be diving in to one or more at some point, and… I…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-39","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/kimsal.com\/blog\/wp-json\/wp\/v2\/posts\/39","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kimsal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kimsal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kimsal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kimsal.com\/blog\/wp-json\/wp\/v2\/comments?post=39"}],"version-history":[{"count":0,"href":"https:\/\/kimsal.com\/blog\/wp-json\/wp\/v2\/posts\/39\/revisions"}],"wp:attachment":[{"href":"https:\/\/kimsal.com\/blog\/wp-json\/wp\/v2\/media?parent=39"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kimsal.com\/blog\/wp-json\/wp\/v2\/categories?post=39"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kimsal.com\/blog\/wp-json\/wp\/v2\/tags?post=39"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Moving in to Quasar has been … interesting. I’m not a fan of material design styling, which is their default design language. I think changing *from* it to something else may be too big a lift for the project, and they actually may not care to, although there do seem to be some rumblings from folks in the forums about supporting alternate design languages. We’ll see where that goes.<\/p>\n\n\n\n<q-input\n dense\n stacked-label\n clearable\n v-model=\"user.email\"\n\/><\/pre>\n\n\n\n
This use of Quasar’s q-input component is common, useful but also gets verbose. You may want the same set of attributes on dozens of inputs on a screen. Wrapping in a common custom input component can save a lot of repetition.<\/p>\n\n\n\n\/\/ src\/components\/My\/Input.vue\n<template>\n <div class=\"my-input\">\n <q-input \n dense\n stacked-label\n dark\n clearable\n v-bind=\"$attrs\"\n >\n <slot><\/slot>\n <\/q-input>\n <\/div>\n<\/template>\n\n<script>\nexport default {\n name: \"MyInput\",\n};\n<\/script>\n<\/pre>\n\n\n\n\/\/ src\/components\/UserInfo.vue\n\n<template>\n <q-page>\n <q-row>\n <my-input\n autofocus\n v-model=\"user.name\"\n label=\"Name\"\n \/>\n <\/q-row>\n <q-row>\n <my-input\n v-model=\"user.email\"\n label=\"Email\"\n \/>\n <\/q-row>\n <q-row>\n <my-input\n v-model=\"phone\"\n label=\"Phone\"\n \/>\n <\/q-row>\n <\/div>\n<\/template>\n\n<script>\nimport MyInput from \"src\/components\/My\/Input.vue\";\nexport default {\n components: [MyInput], \n ....\n ....\n};\n<\/script><\/pre>\n\n\n\n
I’ve seen this done in other places in the past – this is not claiming the approach is new by any means. I’ve just recently started to incorporate this approach to recent projects. I’ll keep you posted if this proves troublesome later on down the road.<\/p>\n","protected":false},"excerpt":{"rendered":"