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

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).

Tips of the Week

If you want load your CDN script programmatically:

checkStripeLoaded () {
  if (window.Stripe) {
    this.stripeLoaded = true
    return
  }
  const script = document.createElement('script')
  script.src = this.src
  script.onload = this.checkStripeLoaded
  document.head.appendChild(script)
}, 

and inside data you declare src = "url of the cdn-ed js".

A tip on transparent wrappers for components to set default options:

<template>
  <q-input
    ref="myWrapperInput"
    v-bind="$attrs" <!-- Copies props passed through to this component into QInput -->
    v-on="$listeners" <!-- Copies listeners passed through to this component into QInput -->
    :dense="dense"
  >
    <!-- Carry over all the slots to QInput -->
    <slot
      v-for="(slot, key) in $slots"
      :name="key"
      :slot="key"
    />

    <template
      v-for="(slot, key) in $scopedSlots"
      :slot="key"
      slot-scope="scope"
    >
      <slot :name="key" v-bind="scope"/>
    </template>
  </q-input>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  inheritAttrs: false,
  name: 'MyWrapperInput',
  props: {
    dense: {
      type: Boolean,
      required: false,
      default: true
    }
  }
})
</script>

Reported and Fixed Issues

Quasar

Shawn Makinson reported the issue QCarousel & autoplay as Number in 1.9.0 which was fixed by a fix(QCarousel): Autoplay breaks when it’s a number (#6408)
martijn788 reported the issue Target is passed to QMenu but might be a boolean which was fixed by a fix(QMenu): Fix updatePosition() logic when target is disabled #6406
Bob Kuivanen reported the issue q-toggle icon appears over q-page-sticky which was fixed by a fix(QToggle): Use z-index on .q-toggle__thumb to prevent the whole block going hight in the z stack #6398
Nicholas Zuccarelli reported the issue QColor - cannot enter a value in input box which was fixed by a fix(QColor): cannot enter a value in input box #6390
Greg Veres reported the issue Why is .vscode in .gitignore? which was fixed by a feat: remove .vscode from gitignore https://github.com/quasarframework/quasar/issues/6389
Denis Mashkov reported the issue Problem with parsing colors which was fixed by a fix(colors/textToRgb): text is wrongly parsed #6388
Haász Sándor reported the issue QUploder removeFile error which was fixed by a fix(QUploader): correct call on abort() on xhr Object #6387
Krzysztof Konopka reported the issue [Bug] Notify - onDismiss is always triggered before action handlers which was fixed by a fix: action handlers in Notify are again triggered before onDismiss (fix #6380)
Diadal reported the issue copyToClipboard not working on iOS which was fixed by a fix(copyToClipboard): enhance compatibility with some versions of iOS #6378
Pratik Patel reported the issue QTable Examples is not working which was fixed by a fix(QTable): Fix height on old Chrome #6370
Joep vd Staaij reported the issue Version 1.9.0 introduces TypeScript issues when building using the vue cli which was fixed by a fix(typescript): move Quasar CLI related typings to @quasar/app
heartbeat reported the issue Reset model after form validation cause validation error which was fixed by a fix(validation): Use null for isDirty on reset to allow starting lazy validation only after focus ##6353
Milad reported the issue QFile clearable doesn’t work which was fixed by a fix(file model): Vue domProps tries to clear old domProps with ‘’ if not present in new #6351
Sonit90 reported the issue QUploader thumbs slows down a webpage, when working with big images, because of base64 encoding which was fixed by a perf(QUploader): Use createObjectUrl to preview images and make noThumbnails reactive #6348
Eldar reported the issue Invalid sass selector in 1.9.0 which was fixed by a fix(QExpansionItem): Add fake animation to make linter happy #6347
duongpc reported the issue Q-select not rendering value correctly from Chrome autofill which was fixed by a feat(QSelect): Autofocus when input is autofilled #6342
Teodorko reported the issue QSelect - displacement “options” in right col which was fixed by a fix(PositionEngine): Do not horizontal reposition QMenu when fit or cover. Reposition on show to catch changes in layout between show request and real show #6328
Alexei Strasser reported 2 issues:

• Scrolling in q-table with virtual-scroll is buggy when expansion row is added which was fixed by a feat(VirtualScroll): Add utility classes .q-virtual-scroll–skip and .q-virtual-scroll–with-prev #6224
• Scrolling in q-table with virtual-scroll is buggy when expansion row is added which was fixed by a feat(VirtualScroll): Add utility classes .q-virtual-scroll–skip and .q-virtual-scroll–with-prev #6224

yev reported the issue [Bug] Dialog not closing on back button on Capacitor build which was fixed by a feat(backButton): Enable backButton behavior for Dialogs on Capacitor apps too #6134
jeancaffou reported the issue Reopening #5987 - quasar build -m pwa failing which was fixed by a break pwa build - https://github.com/quasarframework/quasar/issues/6096
MartinManev reported the issue QCheckbox on IE11: Always shows icon for indeterminate state which was fixed by a fix(ie): Hide indet checkbox SVG (does not support transform) and remove obsolete fix for QToggle #6329
Dario De Paolis reported the issue Q-Select typing text doesn’t work with keyRepeat and option-label as function which was fixed by a fix(docs): Fix custom label example for QSelect #6305
Ejez reported the issue quasar.dev: clicking on an item in the TOC does not update url which was fixed by a feat(docs): Change url hash when clicking on links (without page scrolling) #6294
Ilia Pikulev reported the issue q-time doesn’t behave well when combined with date model which was fixed by a feat(QTime): Add defaultDate prop (defaults to current day) to fill the date part if not present #6279
Emilio Losada reported the issue QPopupProxy does not pass target prop to QMenu component which was fixed by a fix(QPopupProxy): Pass target prop to QMenu #6192
Gerardo reported the issue Post radio and select in dotnecore controller which was fixed by a feat(QSelect,QToggle,QCheckbox,QRadio): Pass attrs to toggles, set native elements for form processing #5963

Submitted PRs

Quasar

Jesús Villanueva Ramos submitted a PR feat(Dialog-plugin): add style properties in prompt
Kerry submitted a PR fix(app): Add missing “types” folder into the package.json files list.
Krzysztof Konopka submitted a PR fix: action handlers in Notify are again triggered before onDismiss (fix #6380)
M4thG33k submitted a PR fix(docs): Update QPopupProxy’s breakpoint prop description
Félix Dion-Robidoux submitted a PR Fixed typo in visibility.md
Paolo Caleffi submitted a PR fix(typescript): move Quasar CLI related typings to @quasar/app, fix: #6360
Andrew Zolotarev submitted a PR Update commands-list.md
Ramsés Moreno submitted a PR feat(docs): Update responsive.md Flex row note
Ryan Delk submitted a PR chore(docs): Fix typos (“it’s” -> “its”)
Mateo Nunez submitted a PR feat(QImg): implements width and height params
Andre-John Mas submitted a PR Added an example for scssLoaderOptions
João Menighin submitted a PR Update QTable docs
Paolo Caleffi submitted a PR feat(typescript): PR #5944 and #5815 already merged
Ejez submitted a PR fix(docs): Fix issue of anchors getting hidden

App Extension Apollo

Ejez submitted a 5 PRs

• fix: Correct boot file path
• chore: Rename AE to ‘quasar-app-extension-apollo’
• feat: Add apollo client config file
• fix: Update project references
• chore: Complete refactoring

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

Repository Activity

Quasar

• rstoenescu - 46
• pdanpdan - 9
• webnoob - 3
• hawkeye64 - 2

App Extension Apollo

• Contributors - 11 (commits by Quasar community)
• smolinari - 13

Quasar Starter Kit

• rstoenescu - 10

Quasar Awesome

• Contributors - 4 (commits by Quasar community)
• valasek - 1

Firebase Sample Apps

• Contributors - 4 (commits by Quasar community)

hawkey64 also contributed to the following repositories:

• QCalendar - 13
• QMarkdown - 4
• ESLint Plugin Quasar - 1
• Quasar Starter Kit UI - 1
• QMediaPlayer - 1

Quasar Awesome Example Applications

msegura created his first Quasar/Drupal website

Mayank Patel shared his Quasar CRM Admin - A free and beautiful Quasar template for CRM needs - github, website

Patrick Monteiro created Quasar 3D Model sample application with a 3D file renderer (.stl, .obj, .json, .dae, .ply, .gltf) - github, demo

Pratik Patel created:

• QGrid - QGrid is a Quasar App Extension. It allows you to filter data for each column, Drag and Drop Rows and also allows you to filter data using header filters.
• QHierarchy - QHierarchy is a Quasar App Extension. It allows you to display data in hierarchy structure on your page.

Ramsés Moreno shared his vuelidate-rules - A Quasar Framework app extension that allows you to use Vuelidate methods as internal Quasar rules in fields of a form

Quasar Releases

As always you can find all latest releases and release notes in the documentation.

Quasar Official App Extension Releases

Staff Pick -New release of our GraphQL app extensions by ejez:

• Apollo - Add the best GraphQL Client to your Quasar Apps now (still in Alpha)!

QCalendar - v1.4.0, v1.3.17
QMarkdown - v1.0.23

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!

Call to action
Please share important or interesting contributions, Quasar community news, tutorials, videos or great goding tips and tricks. Those which you would like to see in the next Quasarians in Actions. Please use Quasar chat preferable in channels #i-made-this, #offtopic or #other AND tag @Stanislav (EN/CZ-eu).

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 Discord.

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

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.

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).

We encourage you, the Quasar community, to organize local meetups. To support you we have created new Discord #conferences channel and pinned the issue https://github.com/quasarframework/quasar/issues/5983 where you can post desired meetup locations which includes the map as well.
Once the meetup is planned, please share the event link, ideally a week or two ahead. We will reach out to the Quasar community and ask Quasar core members to participate as well.

Tips of the Week

When you run quasar dev and it stops somewhere near the end and doesn’t complete, cancel out of that, then run quasar build --debug. Usually, you will get the error displayed at build-time as opposed to the dev run-time.

Tutorials and Articles

Staff Pick of the Week codeguru published How to create responsive UI using quasar framework:

Reported and Fixed Issues

Quasar

Tobias Fuhlroth reported the issue QSelect: using ‘multiple’ together with ‘option-label’, ‘option-value’, ‘map-options’ and ‘emit-value’ results in unwanted behavior which was fixed by a fix(QSelect): Use innerValue instead of value to compare on toggle #6177, released in Quasar v1.8.0
Yusuf Kandemir reported the issue @quasar/extras SVG Material Icons: some icons are missing which was fixed by a feat(docs): Add naming convention & svg import guide #6175
Arjon Jason Castro reported the issue QChip remove icon not visible when text is long which was fixed by a feat(QChip): Truncate long labels with ellipsis #6154, released in Quasar v1.8.0
jeancaffou reported the issue QVirtualScroll snaps to second-to-last item when fast scrolling instead to the end of the list which was fixed by a fix(QVirtualScroll): Do not offset the scroll when it is exactly on the end #6148, released in Quasar v1.8.0
Simon Sinding reported the issue Font Awesome Duotone shifts which was fixed by a fix(QIcon): CSS for Fontawesome duotone #6139, released in Quasar v1.7.5
Luca Ban reported the issue TypeScript: no exported member ‘QUploaderBase’.ts (missing type) which was fixed by a feat(q-uploader): export QUploaderBase, released in Quasar v1.8.0
Shawn Makinson reported the issue .q-btn and align-self: center which was fixed by a feat(QBtn): give up “align-self: auto” and let default browser behavior #6113
eeerrrttty reported the issue Q-icon not loading, loading text instead — almost 0,5% to 2% users affected which was fixed by a feat(QIcon): Avoid Google Translate tampering with Material Icons ligature font #6108, released in Quasar v1.7.3 and Quasar Extras v1.4.1
Valianton reported the issue Qslider does not working in some cases which was fixed by a fix(TouchPan): mouseAllDir ignored on start #6099, released in Quasar v1.7.2

Submitted PRs

Quasar

Paolo Caleffi submitted 2 PRs:

• build(ast): analize components exported as plain objects
• feat(typescript): export QUploaderBase interface, fixes #6137

Nicholas Sidwell submitted a PR fix(docs): Specify gzip object configuration
Stefan van Herwijnen submitted a PR docs: fix uploader nodejs example
Propaganistas submitted a PR Add cursor-pointer class when @click is defined on QTr
Andy Bruère submitted a PR fix(app): deduplicate code when using core-js@3
dasaveliev submitted a PR Update QUploaderBase.js
James submitted a PR This confused me for a half second.

Quasar Starter Kit

Luca Ban submitted 2 PRs:

• Add jsconfig for better code hints in VSCode
• add quasar.variables.sass to /dev

Quasar Starter Kit

nothingismagick submitted a PR chore(security): update engines object in template’s package.json

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

Quasar Awesome Example Applications

Tyler Moore shared his Venues at OTC - SSR build of a Quasar project deployed on DigitalOcean using NGINX and PM2 which is documented thoroughly in README.md | web | github.

The performance was dramatically improved as well.
Before:

After:

João Medeiros shared Api Doc. An open source Crud API documenter:

Stefan van Herwijnen updated his Quasar app extension (AE) auth-token-based to make it more sane (stripped out all unnecessary functionality and it now works by importing instead of rendering the AE into the app. The extension is a token-based authentication using the Vuex store with basic login, registration and password reset pages.

srikanth-k-github created quasar-vuejs-gcp - A sample build and deploy of Quasar Vue.js app using Google Cloud Platform.

Arjon Jason Castro published his Quasar QTable Bottom Pagination.

Quasar Releases

As always you can find all latest releases and release notes in the documentation.

Quasar Official App Extension Releases

QMarkdown - v1.0.20

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!

Call to action
Please share important or interesting contributions, Quasar community news, tutorials, videos or great goding tips and tricks. Those which you would like to see in the next Quasarians in Actions. Please use Quasar chat preferable in channels #i-made-this, #offtopic or #other AND tag @Stanislav (EN/CZ-eu).

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 Discord.

@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

@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

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.

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).

Do not forget to participate or just directly kick-off the first Quasar Development Meetup.

Tips of the Week

Make your qtabs and qbuttons more fluent after a touch. Add a nexttick inside your called method and call it async:

async myMethod () {
      await this.$nextTick()
      // after this your action
},

Pimp up your dialog: add this line to your q-dialog

content-style="backdrop-filter: blur(2px) grayscale(60);"

and see what happens… Works on Chrome and Safari (yes safari … also ios … ) … (firefox only if gfx.webrender enabled)

Do you want to see more? Share yours via Discord and tag @Stanislav (EN/CZ-eu).

Tutorials and Articles

godeguru.io added new videos like How to Host Quasar application on aws in 10 mins using aws-amplify or How to upgrade Quasar application to latest version and vscode setup as a part of the serie Getting started with quasar framework and aws-amplify.

Aleksey Razbakov wrote Vue + Google Firebase Analytics where he describes how to enable Firebase Analytics for his SPA/PWA budgeting app.

Reported and Fixed Issues

Quasar

Valianton reported 2 issues

• Qslider does not working in some cases which was fixed by a fix(TouchPan): mouseAllDir ignored on start #6099, released in Quasar 1.7.2
• QSlider — @input & @change event does not fire by @mousedown.native which was fixed by a fix(TouchPan): mouseAllDir should call handler immediately #6098, released in Quasar 1.7.2

a599155162 reported the issue types error: quasar 1.7.0 types/index.d.ts => LoadingBar.setDefaults which was fixed by a fix(typescript): manage methods rest parameters, released in Quasar 1.7.1
Brandon reported the issue Multiple chunks emit assets to the same filename which was fixed by a fix(app): Multiple chunks could potentially emit assets with the same filename #6071, released in Quasar app 1.5.0
Morten Scheel reported the issue Bug: QField with validation error and no value should only have a floating label if focused. which was fixed by a fix(QField): Do not float label on empty field with error #6065, released in Quasar 1.7.0
Luca Ban reported the issue QDialogOptions interface doesn’t allow any prop to be passed which was fixed by a feat(typescript): manage rest-style props and params typings, released in Quasar 1.7.0
Alex reported the issue QTable not updating properly when connected to server which was fixed by a docs(QTable): Fix glitch in server side QTable example #6053
Dorcílio João de Oliveira Neto reported the issue Custom INPUT using QField alignment bug which was fixed by a chore(QField): Use .q-field__input for custom input in QField and QSelect #6049, released in Quasar 1.7.0
Morten Scheel reported the issue, which has the best reproduction steps we have seen so far, Bug: QSelect can’t add new values in Dialog mode, if the filter function has a delay. which was fixed by a fix(QSelect): Fix check for valid kbd target when in dialog mode and close single select after add new #6048, released in Quasar 1.7.0
Daviz reported the issue Error when switching to grid mode <-> list mode on QTable which was fixed by a fix(QTable): Guard existence of $refs.virtScroll in needsReset watcher #6038, released in Quasar 1.6.2
Marek Kaczkowski reported the issue no-hover not working if q-table element is in slot which was fixed by a fix(QTr/QTd): Fix noHover not beeing respected when props are missing. Fix wrong on in QTr #6035, released in Quasar 1.6.2
jvaca92 reported the issue Issue with QBtn located in toolbar in browser IE11 which was fixed by a fix(ie): IE11 on Win10 requires .q-focus-helper with z-index 1 or else ignores opacity #6004, released in Quasar 1.6.2
Vu Dang Tu reported the issue q-menu transition not working on IOS devices which was fixed by a fix(QMenu/QTooltip): Use margin-left/-top to reposition QMenu/QTooltip on iOS when viewport is zoomed to allow transitions #5955, released in Quasar 1.6.2
Neginegi reported the issue [Windows]Electron process terminated after changing main-process code which was fixed by a fix(app): [Windows] Electron process terminated after changing main-process code #5949, released in Quasar app 1.4.4

Submitted PRs

Quasar

Jesús Villanueva Ramos submitted a PR fix(docs): change link JDK
ibrainventures submitted a PR fix(model-toggle) prevent qdialog input-event emitting on each routechange

Paolo Caleffi submitted 4 PRs:

• fix(typescript): manage methods rest parameters, fix: #6088
• fix(typescript): manage rest-style props and params typings, fix: #6055
• [docs] suggest localhost.run instead of Serveo, fixes #6059
• fix(typescript): change ‘Object’ type with more permissive ‘LooseDictionary’

Andreas Waschinski submitted 2 PRs:

• fix(docs): prettier.eslintIntegration is no longer used
• Documentation fixes: Configure VS Code

Luca Ban submitted 2 PRs:

• fix(docs): comment a comment
• without --ide it won’t open XCode or Android Studio

QCalendar

Jesús Villanueva Ramos submitted a PR perf(timestamp): isBetweenDates with useTime
nothingismagick submitted a PR feat(testing): add and rig jest, first tests

QMarkdown

Jesús Villanueva Ramos submitted a PR fix: code with line numbers can overflow on small displays

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

Quasar Awesome Example Applications

Staff Pick of the Week Luca Ban shared easy-forms. A component to easily generate (Quasar) forms by only defining a “schema” object.

easy-tables. A component to easily generate (Quasar) tables by only defining a “schema” object. (based on the same schema as easy-forms).

erhanturan
| Simulstore | website | Simulstore is an Industrial AppStore. Tools for Engineering Calculations and Digital Twin Applications | v1.5.5 |

Marco Rivadeneyra
system-environment-variables | Loading of system environment variables for deploying on CI environment. |

Voloty is #1 social and business contest platform: Start a contest, the easy way.

Nwotable | github is a PWA to write github-flavored markdown. The design is strongly inspired by the Notable app. Nwotable is built with Vue.js, Quasar Framework and Vuex. It lets you write github-flavored markdown and organize your notes through tags.

Ahmad Ainul Rizki created Jancukers | github which allows users to perform web queries on popular internet search engines and store their query history safely in their Blockstack account. The query can then be repeated on different machines just by switching between them. And although search history data can be accessed by the user (you), it can also be easily deleted at the user’s discretion.

Our goal is to replace the centralized control system by building a bridge between known and new systems. Jancukers is just one piece of the puzzle, and we are proud to add one more method that users can do slowly, but of course, take back control of their digital lives.

Matthew Thomas Donovan created TurboNotes. A mobile checklist app that allows users to manage multiple checklists

RivalQuask | github - An unofficial solo variant by Marek Tupy for The Quacks of Quedlinburg by Wolfgang Warsch implemented by Andreas Waschinski using Quasar Framework.

Quasar Releases

As always you can find all latest releases and release notes in the documentation.

Quasar Official App Extension Releases

QCalendar - v1.3.13, v1.3.12
QMarkdown - v1.0.16

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 Discord.

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

Also I found this: https://github.com/imdanielpiva/vue-quasar-storybook

And if you are interested in testing, see this: https://github.com/quasarframework/quasar-testing

You could ask Denjell, if he can add Storybook support to the list of supported libraries in the App Extension.

Scott