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 :

• https://quasar-framework.org/guide/ssr-writing-universal-code.html#Avoid-Stateful-Singletons
• https://nuxtjs.org/guide/vuex-store/#modules-mode

See also:

• https://ssr.vuejs.org/guide/structure.html#avoid-stateful-singletons
• https://github.com/nuxt/nuxt.js/issues/2508

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:

<q-btn @click="$router.push({ name: 'special' })" ... />

<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