Best posts made by s.molinari

We would like to thank all of you, our awesome Quasar community. And in a spirit of give and share we’d like to present our cherry-picked community contributions with you. One of the contributions is picked by the team as our “Pick of the Week” to honor who we felt made the best contribution (outside of the core team):
.

Tomer Shalev requested a feature to clear events on clearable components

Jeff Galbraith filed a bug on QInput file type with clearable property

Eugene Granik requested a feature - QDate flat mode

zknic requested new prop grid-header which allows to display header when in grid mode too

Gordon Blahut requested to change the way how Esc is handled when QSelect is used with QDialog

Scott Molinari posted in forum a link to a codepen how-to create a QInput, which will only take positive numbers, without validation

Staff Pick of the Week! rconstantine posted a snippets on how-to use CASL with Quasar. CASL is an isomorphic (as in works both in Node and in the browser) authorization/ permissions system

Scott Molinari selected Gold Nuggets which contain a lot of cool knowledge that might just surprise some of you!
.

Thank you for your valuable time in making Quasar a better framework! We’ll be continuing this posting of favorites in the coming weeks. Stay tuned!

If you like this aggregation of best contributions and would even like a more direct reception of this information, or you have any other ideas for honoring contributions to Quasar, please let us know in the comments below.

Ionic Vue is still in its infancy. It’s still alpha. And it’s not getting that much love. It was a third party addition and was later added to Ionic. So, it wasn’t even developed by the core Ionic team. And, Ionic/Vue is still only the new Ionic Stencil bit in Ionic 4 (i.e. the abstraction of the components from the Angular core) bound to Vue. It’s not really a Vue.js based framework, where the components are also built from Vue.

That alone should be enough to tell you, Quasar is a better choice.

But, there is more.

The Quasar CLI takes care of building your different applications. With Ionic. You must use Vue, so you are talking the same disadvantages (or advantages) as if you were using Vue CLI and Quasar as a Vue CLI Plugin. See here please: https://quasar-framework.org/guide/

Quasar’s Vue based components are built for speed and developer efficiency, and not only for SPAs, but for all manner of applications possible with Quasar. With Ionic, you aren’t getting this TLC for developer efficiency. Quasar has been built for over 2 years now and only on Vue. Ionic can’t come even close to this.

With Vue 3.0 coming around the corner with even more efficiencies, you’ll gain those efficiencies right off the bat with Quasar. With Ionic, this isn’t a given at all.

Quasar has more components for you to work with. And again, they are Vue based. That means consuming them as a developer will just make better sense.

Quasar’s team are Vue aficionados. That means, you’ll get more direct help, if something goes wrong. And, I’d say the Quasar community is larger now, than the Ionic/ Vue community is. So, if you get stuck, and you are more likely to get stuck with Vue/Ionic, because the Vue binding code for Ionic is still alpha, you more than likely won’t get the help you will get with the Quasar community.

Are you sold yet?

Scott

Here is a list of Gold Nuggets noted on the Discord Chat. It’s a lot of cool knowledge that might just surprise some of you!

Note: the solutions are above the messages linked below. You’ll need to follow the convos a bit. But, it’s all great stuff!

How to make a text area fill the height of a QCard (in Chrome)

How to calculate QPage height on resize

How to use render for optimization

How to maximize a QDialog

Pinning content to the bottom of a QDrawer

Creating an array of unique values using QSelect

Get dom element height and width

Using QUploader to upload to Firebase

How can I add a badge to an expansion item

How can I add VUEX to an existing project?

How to get the id of table row clicked

How can I create a password input field with display toggle?

How can I create a standard Notify response on Axios error?

How to log errors from every user of your App with Quasar and Sentry

How can I get UUID in a Quasar Cordova App?

Is there a more convenient way of importing components into a page?

How I can get socket.io to work in a quasar cordova app?

How to get an external API server connected to Quasar’s dev server?

How to handle dialogs (and back button) with Vue router?

How to use SCSS/SASS with app-exts that use Stylus at the same time?

How to import the Vuex store into an external file when using SSR?

Scott

This is the second installment of our new Quasarians in Action weekly posting. It’s the Quasar Team’s way to show our appreciation of our community’s efforts with the extra bit of effort to inform the community of what is happening in the Quasar world, which some might have missed.

Enjoy!

Reported Issues

Stephen reported Capacitor bug blocking to run a dev server using npm

fascisdonut reported a bug on QDate within QInput, which was fixed by preventing focus from tampering with before/after/prepend/append slots

Gordon Blahut requested new feature Show months view after selecting a year from years view if the month is not set or defaultView is Years which will be available in Quasar 1.2.2

brindosch reported a bug QToggle prop ‘true-value’ broken with Array which resulted in a fix on QCheckbox,QToggle and QRadio: Allow true/false values as array close

shashane reported a bug QTime / IE11 / UMD : closing unexpectedly while selecting time which resulted in a fix with focus on QBtn, QMenu, ClickOutside, QSelect, Ripple

cashmisa reported a bug QTable pagination’s pagesNumber and submitted a pull request for a fix as well!

Bart Duisters reported a bug on documentation [docs] /layout/page wrong URL for Layout Builder

Florian Saleur reported a bug QDrawer’s backdrop doesn’t have class no-pointer-events on first show on mobile

Devin Holloway reported a bug Slide-Item top slot not working properly

Submitted PRs

Yogesh Dhakad fixed a typo in SPA deployment documentation

N1Mirzo fixed Quasar CLI docs for CSS preprocessors

ejez submitted fixes related to Stylus introduction, fixed documentation typos in Quasar CLI command list and quasar-conf.js

Bart Duisters sent 15 PRs which improved Quasar documentation

Benoît Dupont fixed link to npx in documentation

All of this was complemented by PRs from core team: 11 by Jeff , 10 by Dan, 2 by Allan and 1 by Matyáš.

Forum News

qyloxe shared with a Quasar community a New And Experimental CSS DevTools In Firefox - flex grid inspector etc.

– Staff Pick of the Week - Patrick Monteiro shared a Quasar + Cordova Fingerprint plugin Using fingerprint on android with Quasar(cordova mode)

And finally Scott shared How to get the Quasar docs to run offline? which will not be needed anymore as Quasar docs is coming as PWA, stay tuned!

Quasar Releases

• quasar/app - v1.1.3 released
• quasar/app - v1.1.4 released
• Quasar - v1.1.7 released
• @quasar/app v1.2.0
• @quasar/app v1.2.1

As always you can find all release detalis in documentation.

Quasar Official App Extension Releases

• QCalendar - @quasar/quasar-ui-qcalendar v1.0.1
• QIconPicker - @quasar/quasar-ui-qiconpicker v1.0.9
• QRibbon - @quasar/qribbon v1.0.0-beta.8
• quasar/icon-genie - v1.1.1
• quasar/quasar-app-extension-qcalendar - v1.0.10

Thank you for your valuable time in making Quasar a better framework!

Scott

We would like to thank all of you, our awesome Quasar community. And in a spirit of give and share we’d like to present our cherry-picked community contributions with you. One of the contributions is picked by the team as our “Pick of the Week” to honor who we felt made the best contribution (outside of the core team):

Tutorials and Articles

Quasar blog has been moved to dev.to/quasar. Make sure you subscribe so you will not miss any future articles.

• Enjoy the first issue of HYS #1 - Quasar 1.3.0 . “Have You Seen” series will bring you updates about upcoming Quasar features
• Video - “Quasar Vue.js Tutorial - Getting Started” by Erik
• Staff Pick of the Week Video - “Quasar Vue.js Tutorial - Let’s Build An App!” by Erik
• Deploying an app from Gitlab to Heroku using the Quasar framework and Sailsjs by Navicstein Rotciv
• Quasar - SSR and using cookies by Tobias Mesquita

Reported and Fixed Issues

holtalanm reported the issue QBtn.click throws error when no event passed to function which was fixed by a fix(QBtn): click() throws error when no event passed to function #5469 #5469 #5470, fixed in Quasar v1.4.0
lmfmaier reported the issue 1.3.0: QInfiniteScroll error / no initial load when initialized with empty array which was fixed by a fix(QInfiniteScroll): error / no initial load when initialized with empty array #5452, fixed in Quasar v1.3.1
holtalanm reported the issue QForm.submit and QForm.validate do not respect async rules which was fixed by a fix(QForm): submit() and validate() do not fully respect async rules #5432, fixed in Quasar v1.3.0
matthieuowlie reported the issue Ipad 13.1 considered as mac desktop which was fixed by a feat(Platform): Improve detection of ios when emulated or used with request desktop site
Eugene Granik reported the issue Errors in PWA mode: js/fastclick.js.LICENSE and js/vendor.js.LICENSE which was fixed by a fix(app): Make webpack-terser-plugin not extract comments into .LICENSE files #5429, fixed in Quasar app v1.2.3
tmikaeld reported the issue Q-Input with mask - paste only paste first character. which was fixed by a fix(QInput mask): Fix cursor positioning at the first available place when pasting text in a field with mask, fixed in Quasar v1.3.0

Submitted PRs

Quasar

holtalanm submitted a PR to fix 2 issues fix: #5469 #5470, which will be released in Quasar v1.4.0
ejez submitted a PR q-color: fix infinite loop in q-tabs align property when scrollbars appear in q-color, which fixed 2 issues fixes #4710 and #5145 and will be released in Quasar v1.3.1
Bart Duisters submitted a PR Update notify.md to polish Notify plugin usage
Adam Purdy submitted a PR feat(docs): Firebase

app-extension-typescript

Nicholas Sidwell submitted a PR Update package.json

quasar-ui-qcalendar

Stefan van Herwijnen submitted a PR fix: compare date strings instead of objects in checkChange

app-extension-qpdfviewer

Jesús Villanueva Ramos submitted a PR fix(component) to remove unnecessary selector and add error and load events.

The list does not include PRs from the Quasar Core team.

Quasar Releases

• Quasar v1.3.0
• Quasar app v1.2.3

As always you can find all release details in the documentation.

Quasar Official App Extension Releases

• quasar-ui-qscroller v1.0.0 - alpha.1, alpha.2, alpha.3, alpha.4, alpha.5, alpha.6, alpha.8, alpha.9, alpha.10, alpha.11, alpha.12, alpha.13
• quasar-app-extension-qcalendar - v1.0.17, v1.0.18
• quasar-ui-qcalendar - v1.0.7, v1.0.8
• app-extension-icon-genie - v1.1.2

Thank you for your valuable time in making Quasar a better framework! We’ll be continuing this posting of favorites in the coming weeks. Stay tuned!

If you like this aggregation of best contributions and would even like a more direct reception of this information, or you have any other ideas for honoring contributions to Quasar, please let us know in the comments below.

@joaopaulofilho @MusicForMellons @rstoenescu

I believe that if we could get apollo working with Quasar, in what ever way necessary (and naturally as professionally as possible) we could also “spread the word” within GraphQL circles (which is growing in leaps and bounds) about Quasar and possibly get some traction with that community.

Scott

@Nicholas said in The 0.14 beta release is available!:

0.14 Beta looks fantastic! Awesome job!
Do you have any idea of a possible release date for the final version of 0.14, or a timeframe?

Razvan will be taking a well earned vacation in the next few days. He’ll be off for up to about 10 days. When he comes back 0.14 will be finalized. So, 0.14 final will be determined towards the end of July.

We feel the beta is pretty stable currently and there are no plans to make any more major changes. So, there should be no worries on anyone’s part to run with 0.14 now and to build beautiful apps with it.

Scott

And let’s be honest. A select with 30k items isn’t really something that should be happening. If you need to select something from within such a large set of data like that, it should be a type of lookup field, which should be it’s own component and not a select/ picklist.

Scott

We would like to thank all of you, our awesome Quasar community. And in a spirit of give and share we’d like to present our cherry-picked community contributions with you. One of the contributions is picked by the team as our “Pick of the Week” to honor who we felt made the best contribution (outside of the core team):

Tutorials and Articles

• Publish your Quasar SPA on Github.io with History Mode
• Creating Quasar Framework project with Typescript support

Reported Issues

pirelle reported that Swipe on QDrawer doesn’t work in SSR mode which resulted into a fix - execute SSR takeover queue in beforeCreate instead of mounted and a correct detection of touch-capable devices for SSR when taking over, released in Quasar 1.2.2

Robin Mehner reported that extractDate returns wrong date which resulted into a fix(date.extractDate): Don’t anchor extraction regex on end of string, released in Quasar 1.2.2

Rasmus Rosimannus reported a bug QSelect closes QMenu since v1.2.0 which resulted in a fix(QSelect): Do the correct refocusing on $refs.target when closing options list, released in Quasar 1.2.2

DST reported QSelect doesn’t call filter function on cyrillic characters on mobile devices which resulted in a fix(QInput/QSelect): Composition handling for some non-composition languages, released in Quasar 1.2.3

rfox12 reported QColor + QPopupProxy bug - random closing which was fixed by a fix(ClickOutside): Disregard events emitted on html elements, released in Quasar 1.2.3

Gordon Blahut reported the following bugs:

• Display issue with focused QSelect in Firefox [v1.2.2] which was fixed by fix(QSelect): Hide focus target outline (Firefox)
• event.d.ts missing some members from event.js? which was fixed by fix(typescript): Add missing definitions for event methods,

both fixed and released in Quasar 1.2.3

Devin Holloway reported a bug QSlideItem doesn’t work with Firefox in mobile simulation which was fixed by a fix(firefox): Remove outlines from q-focus-target and button on mobile. Use targetTouches (firefox populates touches and changedTouches late). Guard re-entry in mouseStart for touch directives, released in Quasar 1.2.3

ibrainventures reported the following bugs:

• q-tooltip / Input event fires also after hiding which was fixed by a fix(QTooltip): Remove the correct function (hide) on cleaning up scroll events. Add some guards and fix some cleanups, released in Quasar 1.2.3
• QDialog [ios] [ipados] Keyboard is overflowing inputfields on Dialogs which was fixed by a fix(QDialog): QDialog with input on iOS doesn’t lets field get focus, released in Quasar 1.2.5

Staff Pick of the Week Daviz reported Memory leak on q-select (important) which was fixed by fix(QSelect): Possible infinite loop on search handling, released in Quasar 1.2.3

Vince Lombardo reported Error with input which was fixed by fix(QInput/QSelect): Pass the original event to __onComposition because destructuring removes all props from event, and consider type ‘change’ to be similar to compositioned, released in Quasar 1.2.4

BodaMat reported a bug template’s button not submitted which resulted in a documentation update feat(docs): Explain how to use QBtn type submit in QField marginalia slots

New Feature Requests

Arjon Jason Castro asked for a feature Add label in Linear Progress which resulted in documentation update feat(docs): Add example for QLinearProgress with label and example CodePen

Submitted PRs

• Max - Update scroll-fire.md
• lbauschhttps://github.com/lbausch) - Fixed typo in docs
• Stefan van Herwijnen fix(QTable): watch for changes when filter is an object
• Bartd Duisters - Update form.md

Quasar Releases

• quasar - v1.2.5, v1.2.4, v1.2.3, v1.2.2
• @quasar/app - v1.2.2

As always you can find all release details in the documentation.

Quasar Official App Extension Releases

• app-extension-typescript - v1.0.0-beta.2
• @quasar/quasar-ui-qcalendar - v1.0.6, v1.0.4, v1.0.3, v1.0.2
• @quasar/quasar-app-extension-qcalendar - v1.0.15, v1.0.13, v1.0.12, v1.0.11

Thank you for your valuable time in making Quasar a better framework! We’ll be continuing this posting of favorites in the coming weeks. Stay tuned!

If you like this aggregation of best contributions and would even like a more direct reception of this information, or you have any other ideas for honoring contributions to Quasar, please let us know in the comments below.

As of Quasar version 0.13.2, you can now use a Vue config setting to turn off the (annoying) production tip you see in the console, when working with Quasar in dev mode. You know, this one:

You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html

To get rid of it, all you need is:

Vue.config.productionTip = false

Happy programming!

Scott

We have a PR for a feathers API wrapper. https://github.com/quasarframework/quasar-wrapper-feathersjs-api

And the maker of that did a tutorial too. https://github.com/claustres/quasar-templates/tree/feathers-api

Do let us know, how the rest goes (haha, pun not intended). I’d be very interested in how you get Quasar running with Nuxt.

BTW, I am working on a GraphQL API for Quasar. The start is also made with a simple wrapper. https://github.com/quasarframework/quasar-wrapper-graphql-api

And a demo app is also in the works, similar to the Feathers demo. All of this is WIP, so take it with a grain of salt.

Scott

Good news! Version 0.14 will have more icons.

The docs are still rough, but it should give you an idea of what is coming.

https://github.com/quasarframework/quasar-framework.org/blob/dev/source/components/icons.md

Scott

I’ve been working on the docs and I can attest to the fact that 0.14 is practically like a new Quasar. There are so many improvements. And to think Quasar was already a great piece of work. This release is going to be awesome.

Scott

@potatoheadgear - A component is a component. It doesn’t matter if it is located in the root, /layouts, /pages or the /components folders. Wherever you place the .vue file within the /src folder (or in sub-folders), you can import it anywhere else in your application. That’s because, since it is a .vue file, Vue knows what to do with it in its compilation process.

So, having said that, the only reason there are /pages, /layouts and /components folders is for organizational purposes. Everything in those folders is Vue SFCs. They naturally also have different purposes, despite them all being .vue components, and the folders depict those purposes. Nothing more, nothing less.

Scott

Yup.

https://codepen.io/smolinari/pen/dybJdyj?editors=1010

Scott

I can’t dispell those concerns directly about Quasar. But, it sounds like you are afraid of risk which is unfounded. The software is written and available. That in turn means your software can be written and available too. And, if you are honest, your concerns are valid for any reactivity-based component framework out there.

As for support, you (your company) could become patrons and get more personal support through our Discord server.

As a last note, I know Rasvan and he’s bet his livelihood on Quasar. So he is 100% dedicated to making Quasar a success and not only for himself, but for the approximatdly 20 team members, who have devoted serious amounts of hours of their free time to making Quasar a great experience, including me.

Sure, there will always be risk. But, follow your instincts. You won’t regret it.

Scott

If you want to have the docs offline, follow these steps.

Note, you must have Node and NPM or Yarn and Quasar CLI installed on your machine.

Steps:

1. Download or git clone the Quasar core repo.

$ git clone https://github.com/quasarframework/quasar.git

2. Change to the docs directory.

3. Run yarn or npm install.

4. Run quasar dev.

You could also build and serve the SPA or PWA version, but dev should get you offline viewing capabilities too. Or, you could also build an Electron version. That might be a good choice for offline, however, a bit more work.

Scott

We would like to thank all of you, our awesome Quasar community. And in a spirit of give and share we’d like to present our cherry-picked community contributions with you. One of the contributions is picked by the team as our “Pick of the Week” to honor who we felt made the best contribution (outside of the core team):

Tutorials and Articles

• Do not miss the brand new video tutorials.

Reported and Fixed Issues

• Niko2040Belich reported the issue Button icons on left side are broken in 1.2.6 which was fixed by a fix(QBtn): regression on left icon from v1.2.5, fixed in Quasar v1.2.7.
• Dragomir Denev reported the issue Vertical QSeparator is misplaced in Firefox when inset=“true” which was fixed by a fix(QSeparator): misplaced when on vertical + inset on FF and IE11, fixed in Quasar v1.2.6.
• Ben Kilah reported the issue Q1 - QUploader IE 11/Edge which was fixed by a fix(QUploader): Add files button not working in IE11, fixed in Quasar v1.2.6.
• matro-skin reported the issue too long title of q-step break icons which was fixed by a fix(QStepper): dot can display too narrow when the title is long, fixed in Quasar v1.2.6.
• rvyas reported the issue QTd QTh auto-width with cell separator removes cell border which was fixed by a fix(QTh,QTd): auto-width with cell separator removes cell border, fixed in Quasar v1.2.6.
• ibrainventures reported the issue QDialog [ios] [ipados] Keyboard is overflowing inputfields on Dialogs which was fixed by a fix(QDialog): QDialog with input on iOS doesn’t lets field get focus and a feat(QDialog): Detect iOS soft keyboard show/hide and adjust QDialog, fix QSelect refocus after close

Merged PRs

• Staff Pick of the Week! Michael Vreeken submitted 6 PRs focused on the documentation: 1, 2, 3, 4, 5, 6
• Tomer Shalev submitted a PR Improve now.sh documentation
• huy-tran submitted a PR QSelect - fix #5395: issue on IE where q-select does not show menu on click
• snoop31 submitted a PR [QDate] Missed borderColor to dark mode
• Stefan van Herwijnen submitted a PR feat(QTable): support for nested row key
• heartbeat submitted a PR fix(QExpansionItem): type validation of expandIconClass prop

The list does not include PRs from the Quasar Core team.

Quasar Awesome Example Applications

• SunEngine | github, website | CMS+ site engine with blog, articles and forum functionalities. Asp.Net Core on server side.
• Gistor | github, website | Powerful UI for your Gist snippets stored on GitHub.
• Content Hub | Website | Spread the word about your business everywhere online and track your impact.

Quasar Releases

Quasar - v1.2.5, v1.2.6, v1.2.7

As always you can find all release details in the documentation.

Quasar Official App Extension Releases

None this week. We focused on adding new features instead

Thank you for your valuable time in making Quasar a better framework! We’ll be continuing this posting of favorites in the coming weeks. Stay tuned!

If you like this aggregation of best contributions and would even like a more direct reception of this information, or you have any other ideas for honoring contributions to Quasar, please let us know in the comments below.

Hey Jeff.

I believe the main cost is an OSX native device (i.e. MacBook or MacMini), which Razvan would need to build the app and upload it to the app store for approval.

If you are really interested in Quasar and have the money to spare, you can donate to Patreon for recurring donations or to Paypal for one time donations.

Scott

This is the final logo. FYI.

Scott