On July 25th, 2018 we released Quasar 0.17.0 - and since then there have been 12 patch releases. This article will tell you about the very few breaking changes from 0.16, and introduce some new and rather awesome features. The complete changelog is below.

Repo: https://github.com/quasarframework/quasar
Latest Release: v0.17.12
Support our push to v1.0 on Fundition

Cherry Picking some Highlights

Finalized Vetur support – VSCode code autocompletion support through Vetur extension(will get enabled once Vetur makes a new release)
French language pack - first day of week is Monday
Containerized QLayout is out of the “experimental” stage and it’s ready for production usage
[Feature Request] Object as filter in DataTable #1896
QNoSsr component; highly optimized - takes into consideration client takeover so subsequent renders are as fast as possible.
QJumbotron component
QTable as grid
New quasar.conf > framework > config Object

Breaking Changes

Only one, regarding QLayoutDrawer mini-width prop. It is now a Number (instead of String!) defining width in pixels (default: 60).

Good to Know

A minor change that you should be aware of is that we are deprecating the special boot app plugin, and it will be removed in the next version in favor of using the PreFetch Feature in src/App.vue and calling redirect(false) (in case you want to abort the initial app render). For the time being it is still available, but you should migrate as soon as possible. For Vuex users dealing with SSR and the snarky issues around passing login credentials, @kevinmarrec has a helpful reminder for you:

If you are dealing with Quasar SSR, or any other SSR supports to build Universal Vue.js Applications, and you are planning to use Vuex, you should already know that you need your Store declared as a function.

// src/store/index.js
export default function (/* { ssrContext } */) {
  const Store = new Vuex.Store({...})
  return Store
}

But you should be aware that you also need to export all your modules' state as function in appropriate files like :

// src/store/modules/example.js
export const state = () => ({
  counter: 0
})

If you omit exporting them (states) as a function, your SSR server will always serve the same Store to every new Client app, and it will cause unexpected behaviours.

Example: If you are using an auth system which set the logged user in the Store, it will be stored there "forever" (or at least until you restart your server or you force somewhere to reset the Store state which should not be needed..) and every client a.k.a every end user will be automatically logged with the credentials which remained in the server's "unique" store state (unique because it is not exported as a function !)

Sources :

Important New Features

SSR (Server-Side Rendering) Support

The long awaited SSR support is here! Quasar code is now isomorphic. It might be a one-liner, but this is where 90% of the development time was spent for this release. (0.17.0)

Some things worth mentioning, in order to best benefit from Quasar SSR:

Make sure you read the SSR docs in Guide
Use Platform and Cookies Quasar plugins only in their $q.platform and $q.cookies form. Do not use this outside of Vue components when building with SSR mode. This restriction is required because of the singleton problem when dealing with SSR.
The LocalStorage and SessionStorage Quasar plugins cannot be used on server-side. The reasons are obvious since this is a client-side only browser API. DO NOT rely on web storage for your SSR website. You can use Cookies Quasar plugin instead, which does work on server-side too.
Make your QBtns SEO-friendly. Quasar offers this functionality out of the box, but you need to enable it:

(html comment removed:  old way, still works, but not SEO friendly )
<q-btn @click="$router.push({ name: 'special' })" ... />
(html comment removed:  new, equivalent way )
<q-btn :to="{ name: 'special' }" ... />

Quasar Meta plugin

The Meta plugin can change page title, manage meta tags, manage <html> & <body> DOM element attributes, add/remove/change <style> tags in head (useful for CDN stylesheets, for example), or manage <noscript> tags.

The "meta" properties can be dynamic. For example, this is how you can bind to the Vue scope with them. Think of them as a Vue computed property.

export default {
  data () {
    return {
      title: 'Some title' // we define the "title" prop
    }
  },
  meta () {
    return {
      // this accesses the "title" property in your Vue "data";
      // whenever "title" prop changes, your meta will automatically update
      title: this.title
    }
  },
  methods: {
    setAnotherTitle () {
      this.title = 'Another title' // will automatically trigger a Meta update due to the binding
    }
  }
  // ...
}

COMPLETE CHANGELOG

v0.17.12

02c2988

New

QDatetimePicker Mat - 24h on 2 circles (#2502)

Fixes

QDatetime: CSS when on RTL for hour:minute banner on header
QInput - wrong cursor on hover when using float-label #2488
Change q-radial-ripple so that it plays nice with QTable (#2485) -- also solves vertical scroll present in IE
QLayoutDrawer - respect model when not using show-if-above
QLayoutDrawer - fix preventScroll cleanup (#2500)
QDatetimePicker Material: fix keyboard related and clock(hour) click (#2501)

v0.17.11

992b428

New/Improvements

QLayoutDrawer: show-if-above Boolean prop
QTabs: new prop underline-color
Improved animation for horizontal QStepper
QChipsInput & QSelect with QChips -- more compact design
QTable: new prop binary-state-sort (sort will have 2 states -- ascending, descending -- instead of 3 -- ascending, descending, no sort)
QTable: [Request] Ability to get rid completely of rows-per-page-options in QTable. #2429
QDatetime - add animation for hour to minute change #2451
QTree - Ability to specify a different label field than 'label' #2442

Fixes

QSelect show undefined on clear #2479
Form components: blur and emit on destroy if focused (#2486
QInput with icon, visibility issue inside QInnerLoading #2484
Model-Toggle components (QLayoutDrawer, QTooltip, QPopover, ...) - do not change model on destroy
French language pack - first day of week is Monday
Element in QModal doesn't scroll horizontally [#2450]https://github.com/quasarframework/quasar/issues/2450) + Account for horizontal scroll modifiers in preventScroll ([#2458]https://github.com/quasarframework/quasar/pull/2458&sa=D&ust=1535708450063000))
QInput: fix scrollbar on textarea when rows prop generates a higher field than maxHeight #2462
Remove duplicate [@show] and [@hide] emit in QPopover #2474
Error using $q.screen.setSizes() #2469

v0.17.10

739cb82

New

Overall design refinements (focused on subtle design improvements)
QPopupEdit component -- especially useful (but not limited to) for QTable
Swipeable and animated QTab panes
Ability to display HTML strings as labels in QSelect
QDatetime new prop: header-label
Containerized QLayout is out of the "experimental" stage and it's ready for production usage
QInput new event: @paste (triggered when user pastes content)
Improved QPopover & QTooltip animations
QPopover new props: cover (covers parent) and persistent (doesn't gets closed if clicking outside of it)

Fixes

QRating - multiline when it needs to (not enough space for a single line)
QField content clipping

v0.17.9

Fc6d5e1

New

QParallax: Add support for videos
(Experimental) Containerized QLayout; includes ability to use QLayout inside QModal; IE11 not supported (check Layout components page).
Shake Modal/Dialog if not dismissable
[Request] QCollapsible support for routes #937
QSearch | Add type="search"? #2426
QLayoutDrawer new event: 'on-layout(boolean)' -- triggered when Drawer toggles occupying space on Layout
Updated src/css/core.variables.styl - making variables overridable #1912
Remove Tooltip shadow for Material theme (to match Material guidelines)
Feature Request: Ability to disable Hover on timeline component #2205
QUpload "filter" property #1458
[Feature Request] Object as filter in DataTable #1896
[Request] QItem/QItemMain / Add stylus variable that controls the size of the offset the property 'inset' produces #2183
[Enhancement] QTree: add an iconColor property on the Nodes model structure #2203
[Request] Truncate text in QInput #2307
[REQUEST] Adjustable Column Widths for QTables #2248

Fixes

Problems with Min Max DateTime Picker #2362
Wrong icon in fontawesome Quasar icon set #2431
QAutocomplete bad popover positioning unless static data #2427
Safe Area for iOS when QModal in 'maximized' #2421
QTable - rows per page select font
QFab closing animation
Modal maximized leaves class q-maximized-modal on body element even after hidden #2417

v0.17.8

6adf870

VSCode code autocompletion is coming! Will publish an article on our medium.com Quasar blog.

New

Finalized Vetur support -- VSCode code autocompletion support through Vetur extension (will get enabled once Vetur makes a new release)
$tooltip-fontsize Stylus variable

Fixes

QSlideTransition not working correctly after fast toggling when using with v-if #2401
Unable to use QScreen in computed properties due to it being an Object #2399

v0.17.7

e69b1de

When upgrading, please add responsive Boolean prop to QTimeline to maintain previous behaviour. We apologise for this change in a minor release but it is really needed.

New

[Request] QTimeline always one-sided #2324
[Request] QCarousel/QEditor/QTable emit event on fullscreen change #2338
[Request] QCollapsible add style for open item #2375
QTooltip - font-size should be 12px according to Material specs
Do not add left/right padding to Tabs container when not on header/footer.

Fixes

QSlideTransition sometimes doesn't play in Chrome/Firefox on desktop #2384
Fontawesome icons don't fit timeline icons #2386
QItem label letters being cut off
Don't pad hideUnderlined controls #2388
Clearable not working in ChipsInput #2383
Some arabic i18n typos(#2380
Unable to override color of QRouteTab #2394

v0.17.6

6328db2

Features

Various CSS fixes for IE11
Greatly improve QSlideTransition performance (also affecting QCollapsible, QTree, QStepper)

v0.17.5

92db4a6

Features

[Request] Allow shadow color and elevation to be overridable #2357

Fixes

QAutocomplete: fix error with timing when typing immediately after focus #2361
QChat: fix shrinked avatar with long text #2360
QBtn: set type 'button' on buttons by default (else it's going to be 'submit') #2354
Greek translation letter updated #2355
Brazilian portuguese localization updates. #2351
QInput textarea rows - fix css height(#2343
IE11 various CSS fixes

v0.17.4

efef1bf

Fix: [Bug] - QScrollObservable - debounce not working with QSrollArea? #2341

v0.17.3

f094462

Fixes

QScrollArea unable to select text inside #2197
Pinch zoom event not available and q-context-menu identifies it as long press
QAutocomplete: Small adjustments of timing for trigger on focus #2332
Better handling of iPhoneX statusbar padding

v0.17.2

7c972ab

Fix

outline and textarea height (#2328)

v0.17.1

85ff863

Fix

[Bug] .17 - Notify defaults #2322

v0.17.0

fd94b58

v0.17.0

This is big release, introducing SSR support & many new features. Enjoy!

New

QNoSsr component; highly optimized - takes into consideration client takeover so subsequent renders are as fast as possible.
QJumbotron component
QTable as grid
New quasar.conf > framework > config Object
Loading & Notify Quasar plugins now support a new method: setDefaults({...}) -- use this or through quasar.conf > framework > config: { loading: {...}, notify: {...} }
- (NEW) LoadingBar Quasar plugin -- adds a loading bar a-la Youtube; no need to do anything else in your app code
Hook AddressbarColor into cordova-plugin-statusbar when available
QLayoutDrawer
- "mini-width" prop is now a Number (instead of String!) defining width in pixels (default: 60)
- new prop: width defining width in pixels for non-mini mode (default: 300)
- backdrop animation when in mobile mode
Many performance enhancements
- layout header/footer animation
- tweaks to make Vue render Quasar components faster by avoiding some children array normalization
Ability to cancel frameDebounce() from utils (call .cancel() on the debounced function)
QUploader: added upload-factory prop (#2093)
QInput: added prop lower-case (#2117)
New Quasar language packs: Traditional Chinese, Guarani
[Request] Q-Chips-Input: Pass upper-case parameter to underlying q-input #2031
[Request] QUploader - new prop: no-content-type #1974
Q-Page: ability to disable minHeight prop. (#2120)
Allow Dialog and ActionSheet Quasar plugins to receive a resolver token (#1869)
Improve out of the box SEO for QItem, QBreadcrumbs, QRouteTab -- allow bots to follow links
Improve keyboard navigation (#1936)
- QModal
  - fix not emmiting dismiss on ESC
  - focus after show
  - add back noRefocus
- QPopover
  - focus after show
  - refocus after hide (noRefocus prop)
  - allow toggle by keyboard ENTER
- QDialog
  - fix button focus
  - find button by class name (q-btn)
  - add back noRefocus
- QFab - refocus after hide
- QTab / QRouteTab
  - focus with keyboard
  - allow select with keyboard ENTER
- QColor and QDatetime
  - fix tabindex lost on close
  - fix popup not closing on blur
- QColorPicker
  - fix incorrect tabindex on disable
  - allow to select saturation on click on mobile (was working only on drag)
- QDatetimePicker.mat - allow keyboard adjustment of all values
- QActionsheet
  - select option with ENTER/SPACE, navigation with TAB
  - trigger selection on keyup to avoid click on original button
- QAutocomplete - use QPopup with noFocus
- QKnob, QSlider, QRange - keyboard updating (UP|RIGHT +, DOWN|LEFT -, CTRL+... 10*)
- QSelect
  - remove autofocusFilter - always select filter if present
  - move keyboard navigation on QPopover
  - delay popover.reposition on filter to allow resize
- v-back-to-top, v-close-overlay, v-go-back, v-ripple - trigger by keyboard ENTER
- QInput - set model on ENTER
Flex addons -- provide breakpoint aware versions for all flex (and display) related classes -- needs to be enabled from quasar.conf > framework > cssAddon: true
QModal: Auto size based on content, can be customized through CSS with (min|max)(Width|Height) passed in :content-css. It's also applied when using QModalLayout.
Flex: .col has higher grow priority than .col-auto and .col-grow, add .(col|offset)-0
Material ripple - centered on round buttons (as per Material guidelines)
[Request] debounce property in QScrollObservable component #2169
QTabs - desktop state hover
QScrollArea - added hover effect (#2189)
Lots of enhancements to QAjaxBar to best accommodate SSR mode
Use round/rounded focus helper for radio/checkbox (#2200)
QBtnDropdown - popover-anchor & popover-self props (to align its popover) #1665
Enhancements for clearable and clearValue (#2216) #1994
Loading plugin default delay was set to 0
feat: add v-scroll horizontal position #2296
Finalized helper-json files
Set xhr's withCredentials flag in request for QUploader #2305
QTabs new prop: "panes-container-class"

Fixes

QTab's count and alert attributes look bad when QTabs's align is set to justify #2032
[Bug] QSelect throws an error when container block disappears #2071
QInput shouldn't have expanding underline animation on focus in iOS theme #2085
v-scroll-fire get fired when reload the page #2081
Q-Pagination Direction-Links Broken on Cordova #2088
v-model on QLayoutDrawer bug #2094 -- example: having an input component breaks the model of QLayoutDrawer
iPhoneX - avoid toolbar/header top-padding when not in fullscreen #2118
[Regression] Dialog is not blurring input element in v0.15.15/v0.16 #2137
QBtnDropdown Popover does not scroll #2136
QTable: [MS-Edge] Loading indicator not displayed correctly #2122
QSearch: propagate upper-case and lower-case #2124
Force QChip pointing zIndex (when in an already positioned context) #1982
QPullToRefresh causing scroll issues with large tables inside QScrollArea #1884
QColorPicker - process unset value #1887
Error when navigating to other page while select component is opened #1980
Return dismiss function from Notify.create #1913
Fix material ripples on IE 11
QAutocomplete: Fix focus after tab, fix loop in normalizeInterval, fix reposition, select options on keyboard navigation #2149 #2155 close #2157
Override Material Icons CDN default size
Colors utils: Fix guard for color type in luminosity(#2180
Japanese Quasar language pack: 2 words changed for more natural Japanese #2182
Mini layout drawer animates like normal mode when it hides automatically #2080
Infinite scroll delay after resume #2187
animScrollTo util - bug if duration < 16 after recursion (#2192)
Fix dom.ready() util when readyState = "interactive" #2199
QSelect: fix blur when selecting clear #2202
QBreadcrumbs and align mixin - fix align prop value check #2217
className for QSelect, QSearch before|after, QInput focus on marginalia #2215
Screen plugin doesn't updates values after setting new sizes #2221
QRouterTab: fix double tabindex and hide outline #2226
QPopover: only refocus on anchorEl when anchorClick (solves refocusing on split dropdown) #2225
Fix QAutocomplete when not editable and pass readonly to QInputFrame #2227
Fix internal popups.getPosition corner-case #2235
QDatetime: use a +-50 years interval from current, use precomputed mins #2234
QDatetime: format when type is date and formatModel is string #2231
Not caught rejected promises when showing/hiding modals, dialogs, popovers
QTable - sort by non visible column #1886
QInfiniteScroll concurrency issue #2241
QSelect does not show placeholder text when using chips #2003) #2287
Corner case in model-toggle where component gets destroyed & not cleans up history on Cordova

Did you really read this far? Excellent.

Maybe you want to find out more about Quasar, so please consider:

COMPONENTS: https://github.com/quasarframework/quasar
CLI: https://github.com/quasarframework/quasar-cli
THE DOCS: https://quasar-framework.org/
DISCORD: http://chat.quasar-framework.org/
FORUM: https://forum.quasar-framework.org/

Vote Utopian.io for witness!

Support our push to v1.0 on Fundition

Sort:

Trending

[-]

didic (68) 6 years ago

This is a fantastic update. Extensive, eloquent, clear.

Could it use the odd comma where there was none? Sure. For example, "This article will tell you about the very few breaking changes from 0.16 and introduce a some new and rather awesome features" would have been better with a comma before "and."

However, even with such minor issues, this was a great read. I look forward to your next update!

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.

Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

$5.93

11 votes

utopian-io (71) 6 years ago

Thank you for your review, @didic!

So far this week you've reviewed 14 contributions. Keep up the good work!

$0.00

1 vote

quasarframework (64) 6 years ago

Thanks for the feedback, glad you liked it. I fixed the comma (and the extra "a" betwixt introduce and some in the sentence you cited). :)

ecoman1 (30) 6 years ago

very nice post ,,,

ajayyy (65) 6 years ago (edited)

Very detailed progress update. Good luck on reaching v1.0!

Hey, @quasarframework!

Thanks for contributing on Utopian.
Congratulations! Your contribution was Staff Picked to receive a maximum vote for the blog category on Utopian for being of significant value to the project and the open source community.

We’re already looking forward to your next contribution!

Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!