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.

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.

@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

Quasarians in Action! With the Staff Pick of the Week.

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

Minor Releases

Fresh off the presses:

The new “modern” build mode produces ES6 target builds, which perform better and have smaller app footprints. Check it out!

Quasar v1.12.0 released! Lots and lots of new features and improvement.

Quasar/app v1.9.0 released! Lots of improvements and modern build option

Stay tuned for the next QIA, when we announce our Hack-a-May contest winners.

Tip of the Week

This week we have two tips!

Need a text color or background color selector for QEditor? This codepen shows you the way thanks to community dev bjbk.

Codenamejamez created an example boot file for getting Vuex-Persist working with Quasar.

Tutorials and Articles

Danny Connell has come out with another great video showing the power of Quasar.

https://youtu.be/kWRpEcv2nu8

Staff Pick of the Week! Danny also has brought out a new series of Quasar tutorials. This new series is about how to build a PWA with Quasar. Here is the first video.

https://www.youtube.com/watch?v=aWjqHaz8-rc

Quasar Awesome Example Applications

Mayak Patel brought a new example site, which looks quite professional.
Source code: https://github.com/mayank091193/vue-quasar-company-profile-website
Demo site: https://quasar-company-profile-template.netlify.app/#/

namphth1807043 brought out a working admin UI demo app.
Source code: https://github.com/namphth1807043/ui-admin
Demo site: https://quasar-admin-crm-template.netlify.app/

Reported and Fixed Issues

quasarframework/quasar

Florian Saleur reported the issue QForm - validate method is no longer called which was fixed by a feat(QForm): use “q-validation-component” class in custom components having validation #7112

Patrick Abi Salloum reported the issue this.$q.lang.set(Quasar.lang[‘en-us’]); does not work in 1.11.0 to 1.11.3 which was fixed by a fix(lang): Allow set() method to work without any params #7108

Stefan Vojvodic reported the issue Virtual scroll does not work in Firefox and Safari when using colgroup which was fixed by a fix(VirtualScroll): skip processing size of elements with .q-virtual-scroll–skip in before and after slots #7107

Kevin de Melo reported the issue htmlFileName - @quasar/app-v1.8.x which was fixed by a fix(app): use the htmlFilename as index for dev server in history mode #7078

Brice reported the issue On android, nativ keyboard appears when selecting an item in q-select which was fixed by a fix(QSelect): on mobiles the focus must be moved to a not input element #7061, #7062

yev reported the issue QSelect is pulling up an on-screen keyboard on capacitor Android which was fixed by a fix(QSelect): on mobiles the focus must be moved to a not input element #7061, #7062

dasaveliev reported the issue QUploader: max-total-size and max-files restrictions don’t apply if adding files consequently which was fixed by a fix(QUploader): max-total-size and max-files restrictions don’t apply if adding files consequently #7055

Antonio Kovačević reported the issue Error while closing qTime Popup by calling hide method on mobile which was fixed by a fix(QTime): add some missing checks for component being destroyed #7046

Eugene Granik reported the issue PWA Mode: Unable to exclude html from caching due to navigateFallback change which was fixed by a feat(app): PWA - workbox – Option to disable navigateFallback when using GenerateSW #7043

Yuri Titi reported the issue Backspace on QSelect with hide-selected remove item from model which was fixed by a fix(QSelect): backspace should not remove selected options when hideSelected is used (no visual feedback) #7039

Gordon Blahut reported the issue TypeScript definition for Notify.setDefaults requires ‘message’ which was fixed by a fix(TS/API): Notify.setDefaults() should not mark “message” as required #7027

Riku K reported the issue Background QPageSticky position shifts when QDialog showing which was fixed by a fix(QLayout): only update data on scroll when it’s in container mode or the body is not scroll prevented #7012

chulaiguo reported the issue I can not install @quasar/icongenie which was fixed by a feat(docs): Enhance icongenie installation instructions for Windows #7009

rfox12 reported the issue Typing lost: TS2339: Property ‘$q’ does not exist on type which was fixed by a Fix Index.vue for Typescript projects

hecsalazarf reported the issue Configuring the language pack in SSR sets a wrong HTML ‘lang’ attribute which was fixed by a feat(lang): Rectify usage for SSR on Quasar.lang.set() #6949

Dumitru reported the issue Button dropdown does not show when element in full screen mode which was fixed by a feat(portal): attach the portal to the fullscreen element if there is one #6939

Submitted PRs

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

quasarframework

bebjakub submitted a PR feat(QBtnDropdown): disable rotate dropdown icon
bias-santa submitted a PR docs():Fix typo and change an example in column wrapping
Paolo Caleffi submitted a PR docs: specify preloadChunks is ignored for dev builds
Paul Mohr submitted a PR Fix a typo on the QTable documentation
Ryan Delk submitted a PR chore(docs): Fix typos (“it’s” -> “its”); remove double spaces; normalize class decimals in grid examples
Foxy Lady submitted a PR Massive Rewrite
Guillaume NICOLAS submitted a PR docs: remove # prefix for hex string

quasarframework/quasar-awesome

Custom Automated Systems Pte Ltd submitted a PR Added quasar versions and changed Snap URL
Simon Detheridge submitted a PR Add groovechat.fm to ‘Projects’ section
Custom Automated Systems Pte Ltd submitted a PR Changed version number of KetoShare. Added The COVID-19 Game.
winwin2011 submitted a PR Add an online editor for Hexo blog
ethan submitted a PR user interface for market quant
Mayank Patel submitted a PR Added “Kudos - Company profile template”
v2.0.1
v2.0.0
v1.5.8
v1.5.7

quasarframework/quasar-ui-qiconpicker

yackers submitted a PR Remove schore - no such icon
v1.0.0

quasarframework/quasar-starter-kit

Paolo Caleffi submitted a PR fix(capacitor): avoid linting for generated files
Eloy Ramirez submitted a PR Fix change as to from
rfox12 submitted a PR Fix #6951 Index.vue and Error404.vue for Typescript projects

Quasar Releases

quasar-v1.12.0
@quasar/app-v1.9.0
@quasar/app-v1.8.9/10
@quasar/app-v1.8.8
quasar-v1.11.3
@quasar/app-v1.8.7
quasar-v1.11.2

Quasar Official App Extension Releases

quasarframework/quasar-ui-qmarkdown

v1.0.27
v1.0.26
v1.0.25

quasarframework/quasar-ui-qcalendar

QCalendar v2.0.2 has been released! (this is QCalendar’s 100th release!)
https://github.com/quasarframework/quasar-ui-qcalendar/releases/tag/v2.0.2

• fix(ui): resource view, when prop no-scroll is used gets error
• fix(css): issues with double borders

QCalendar v2.0.3 has been released!
https://github.com/quasarframework/quasar-ui-qcalendar/releases/tag/v2.0.3

• fix(ui): mini-mode shows border between rows of days
• Also added an example for “Advanced Popup” in mini-mode

eslint-plugin-quasar v1.0.0 has been released!
https://github.com/quasarframework/eslint-plugin-quasar/releases/tag/v1.0.0

• no-legacy-plugins rule now works correctly
• check-valid-props rule is deprecated, use no-invalid-props rule instead

Repository Activity

quasarframework/quasar

• Contributors - 3 (commits authored by Quasar community members)
• rstoenescu - 24
• hawkeye64 - 2
• pdanpdan - 1

quasarframework/quasar-starter-kit-ui

• hawkeye64 - 6
• rstoenescu - 1

quasarframework/quasar-ui-qscroller

• hawkeye64 - 11

quasarframework/quasar-awesome

• Contributors - 6 (commits authored by Quasar community members)

quasarframework/quasar-ui-qcalendar

• hawkeye64 - 30

quasarframework/quasar-ui-qiconpicker

• Contributors - 1 (commits authored by Quasar community members)
• hawkeye64 - 12

quasarframework/eslint-plugin-quasar

• hawkeye64 - 10

quasarframework/quasar-starter-kit

• Contributors - 4 (commits authored by Quasar community members)
• rstoenescu - 5
• hawkeye64 - 1

quasarframework/quasar-ui-qmarkdown

• hawkeye64 - 25

quasarframework/quasar-ui-qmediaplayer

• hawkeye64 - 16

quasarframework/quasar-ui-qoverlay

• hawkeye64 - 8

quasarframework/app-extension-wizard

• rstoenescu - 2

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.

So, like the UMD mode. i.e. not needing compilation?

If yes, you’ll learn this is a terrible way to develop Vue projects over time.

Scott

I’m still not getting what the timezone has to do with an epoch date (in days or milliseconds). What is in this.itemWhen? If a user enters “2020-05-26” that is a date with no time zone offset info, right?

Scott

I’m not sure what the epoch time has to do with displaying a date proper to local time taking into account time zones. At least I’m not understanding your use or thinking with it. Epoch time is only about timestamps, meaning, if you use timestamps, they are a difference of milliseconds of the user’s local time to the epoch. The epoch should have no relation to your calculation as you’d still only need to calculate the UTC and save the user’s time zone and calculate any other times from that. You have to decide if you store the date/times as timestamps or iso date values. That doesn’t change the calculation, only the means to get to it.

Scott

This isn’t about QList, but more about your page layout. You would put two lists inside two columns, set in a row. See the docs about flexbox.

Scott

The question is, does Vue-ApexCharts (which I am assuming you are using) make its chartOptions reactive or allow for it. This seems to be an answer to that question.

https://github.com/apexcharts/vue-apexcharts/issues/87

Scott

In terms of time offsets, UTC and GMT are basically the same time. It’s just that UTC isn’t a time zone. It is a standard. And GMT is a timezone. For instance, the UK is on GMT in the winter and British Summer Time (BST) in the summer (UTC/ GMT+1)

I’m not sure of the problem, but to calculate time zone times, you need the time reverted to UTC/ GMT in your data and then it would be hours, not days you’d be adding or subtracting based on the user’s time zone. Also, time zone values aren’t fixed. Depending on the time the Date/Time value is taken, the value of the timezone offset may vary as the rules change from country to country. I just read a really interesting article on the subject. In it the author suggested, you should always store the local time of the event, store the converted UTC value and the value of the timezone offset (in hours). If you want to get really picky, to be sure the time for users, who are not in the same time zone, is depicted properly, you’d need to make sure you are following the offsets for the time zone rule set available at that time the time is depicted/ displayed.

All in all, a quite complex subject for something seemingly so simple.

Scott

To me, you are defeating the whole purpose of SFCs by separating the HTML and the JS code (and the CSS code). You say you’d like to have this but don’t mention the motivation. What is the motivation behind wanting to separate the HTML from the JS code?

Scott

Yup. I read that too.

It’s also important to note that performance is only one part of the pie. I think developer experience (also known as DX) is important too.

Although Svelte follows the similar path of SFC’s like Vue, and I truly believe this format for setting up your code is easier to reason about overall (so good for DX) than mixing JS with HTML, there are situations where going down to render function level is also necessary and that is where Svelte, I believe, misses out. Its @html directive is nothing like what is needed from what I can tell. I can only imagine such “html in JS” code will look mofugly and even harder to reason about than some of the bad React JSX code out there.

Anyone whose used Svelte at any kind of advanced level, please do chime in and correct me, if I am wrong.

Scott

Awesome @walfin. What do you see, when you follow this link? https://chat.quasar.dev

Scott