icon-factory

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

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:

Quasar Meta plugin

The Meta plugin can change page title, manage meta tags, manage & DOM element attributes, add/remove/change