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

In the News!

Icon Genie Version 2 is released! It is now a standalone CLI. More info | What’s new in v2.

The first ever Qausar Hack-a-May hackathon has been started. Interested in learning about how to do a BEX or an AE (or are even wondering what those acronyms are)? Then please have a look!

We started a poll to ask the community about their requirement to support Internet Explorer 11. Please vote, if you haven’t already!

Tutorials and Articles

codeguru has started with his course on severless auth in depth using aws-amplify and Quasar.

Quasar Awesome Example Applications

Mayank Patel has added some more features to his admin template.

altezzalab created another Covid-19 tracker. This one specific to China.

Staff Pick - Roberto Langerica created a handy App Extension which wraps up some handy features for an api client implementation. Some of the feature are:

• Vuex integration
• Massive Requests
• Concurrent requests
• Homogeneous responses
• Global access for any component

mekery created a great WYSIWYG app extension that includes the awesome tiptap editor made for Vue.

Silvio Gustavo created an app that posts anonymous geolocated messages. You can see what your neighbors are posting and how they are feeling. The messages stay for 24 hours and then disappear.

gpenner created an app that is a bot for a browser game to automate repetitive tasks and manage the game.

Reported and Fixed Issues

qyloxe reported the issue bug: q-carousel-slide - some characters in img-src attribute are breaking the component which was fixed by a fix(QCarouselSlide): Properly enclose background image url in quotes #6898
Dragomir Denev reported the issue @quasar/dev (implicitly) prohibits upgrading node to v14 which was fixed by a feat(app): Upgrade deps (not all) #6884
Pedro Henrique reported the issue Error css in chips on QSelect which was fixed by a feat(QSelect): Add ellipsis class on chip content to prevent overflow #6866
Veesh Goldman reported the issue [docs] Document argument types for @add and @remove in QSelect which was fixed by a fix(QSelect): @remove should send the value as the second parameter instead of array #6852
qyloxe reported the issue [BEX] content-script.js - improper declaration [SOLUTION] which was fixed by a fix(docs): Clarify script for hook code #6820
nothinghappens reported the issue [vue-cli-plugin] Vue Router nested route not working with Vue Class Component which was fixed by a fix(typescript): allow auto-import when using TS Class API
Kevin de Melo reported the issue QStepper - DoneColor which was fixed by a Fix for #6801 - “QStepper: done-color is not respected”
Medhyena reported the issue QEditor selected text cannot be changed style in IE11 which was fixed by a fix(QEditor): fix broken isChildOf function #6769
J reported the issue Unable to build with capacitor which was fixed by a fix(#6768): Removed double quotes to allow resolving of Android Studio path when opening IDE.
Nikolay Georgiev reported the issue quasar dev cannot find multiple core-js/modules/es6 dependencies (Electron, Linux) which was fixed by a feat(docs): Update minimum nodejs version #6741 #6745

Submitted PRs

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

Isaac Smith submitted a PR Case typo fix
Sergey Shumov submitted a PR fix mistakes in screen class names
hamiltoes submitted a PR fix(typescript): add debounced.cancel() method to return type
Steve Clarke submitted a PR doc tweaks
Steve Clarke submitted a PR review Icon Genie v2 docs
Steve Clarke submitted a PR Update app-icons-list.md
Paolo Caleffi submitted a PR fix(typescript): allow ‘Promise<void>’ return type, add ‘preFetch’ wrapper to type ‘store’ parameter
Arcange submitted a PR Typo fixed
Lev Khruschev submitted a PR Update commands-list.md
Lev Khruschev submitted a PR Fixed proxy in quasar-serve
Dragomir Denev submitted a PR fix: QStepper done-color is not respected (fix #6801)
Patrick Monteiro submitted a PR Add BEX to the documentation

Quasar Releases

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

@quasar/app-v1.7.4
@quasar/app-v1.7.3
@quasar/icongenie-v2.0.1
@quasar/icongenie-v2.0.0
quasar-v1.9.16
@quasar/app-v1.7.2
@quasar/cli-v1.0.7
quasar-v1.9.15
@quasar/app-v1.7.1

Additions to quasarframework/quasar-awesome

Carlos Fernando Tovar Ceron submitted a PR Add github-method app
sv2 submitted a PR Adding Dashblocks Template
Roberto Langarica submitted a PR Update README.md with an npm package
Roberto Langarica submitted a PR Update README.md with an api client extension

quasarframework/vue-cli-plugin-quasar

Paolo Caleffi submitted a PR fix(typescript): allow auto-import when using TS Class API, fix: #6803
v1.5.6
v1.5.5
v1.5.4

quasarframework/quasar-starter-kit

Paolo Caleffi submitted a PR fix(linter): make vue rulesets valid when uncommented
Paolo Caleffi submitted a PR fix(typescript): set compilation target to ES5 if IE support is enabled, fix: #6856
Paolo Caleffi submitted a PR fix(typescript): fix “Object API” typo
v1.0.1

quasarframework/quasar-ui-qoverlay

Volker Nauruhn submitted a PR added background-color behavior property
v1.0.3
v1.0.1

Thank 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!

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

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.

Hi everyone,

In 31 days we are going to have a conference! Online, but nonetheless a get-together of the Quasar Community for some tech fun with the team, a couple of guest speakers and you!

Please have a read about the details…

Looking forward to everyone’s participation!

p.s. If you have a question you’d like Razvan to answer, please go to this thread.

Scott

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

1. Change to the docs directory.

2. Run yarn or npm install.

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

You need to put your v-for on the QRouteTabs in the QTabs. Right now, your "v-for"ing the whole footer tab component.

Scott

Next comments to come that aren’t a simple “get well soon” for Razvan will be deleted.

You can take the OSS discussion to another thread.

Scott

Um, but dialogs are supposed to “float” over everything. The parent property is there, so you can get a context to work with i.e. so you can use things like Vuex. It doesn’t mean, however, it will “perform” along with the parent component creating the dialog. It isn’t a “child” component per se.

Can you explain your use case better?

Scott

@Ben-Hayat - I sort of understand what you are saying and my comments are obviously with the current situation in mind. We also know “the business model” needs to change to be more commercialized and thus, have better potential to raise revenues. If and when we get to that point, then it is no longer “leaps of faith” needed, but rather, we can offer value adding products and services (with and above and beyond Quasar) to generate revenue.

Scott

It’s sort of a chicken and egg dilemma, isn’t it? And to overcome that dilemma, there needs to be a bit of a leap of faith on your part. No matter what, devoting resources (money or time) in anything always holds some sort of risk. We definitely don’t want that your resources go to waste. So, you can trust us, the Quasar team, to do our best to make your leap of faith have the best results.

Scott

What are you doing with the dialog?

Scott

What is the div with the row class doing?

Scott

If you have only “col”, the div takes up the whole 12 sections of the row, so all of the space. Your two components probably have some sort of width limiting css. If they didn’t, then they too would spread across the screen.

The whole layout system in Quasar is based on Flexbox. Once you get it, (and it aint that easy to get), then it is easy.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Scott

Is that the issue? Getting a token stored and persisted to bridge browser sessions?

Scott

If you work inside the default function of the boot file, the store is injected and you can use it. It should be your instantiated store.

https://quasar.dev/quasar-cli/boot-files#Introduction
https://quasar.dev/quasar-cli/boot-files#Quasar-App-Flow

Scott