Releases · quasarframework/quasar

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

Breaking Changes

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

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.

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 know how to enable it:

Quasar buttons are usually rendered with a <button> HTML tag. But now they can be rendered with <a> tags too. When you want the user to navigate to another route by clicking a QBtn, you were used to add a @click Vue event handler. Now you can use <router-link>-like props on QBtn too. By doing this, Quasar can make your buttons SEO friendly.

<!-- old way, still works, but not SEO friendly -->
<q-btn @click="$router.push('/some/route')" ... />
<!-- new, equivalent way -->
<q-btn to="/some/route" ... />

<!-- old way, still works, but not SEO friendly -->
<q-btn @click="$router.replace('/some/route')" ... />
<!-- new, equivalent way -->
<q-btn to="/some/route" replace ... />

<!-- old way, still works, but not SEO friendly -->
<q-btn @click="$router.push({ name: 'special' })" ... />
<!-- 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. Note that this is not a full description of what the Meta plugin can do (that will be available in the final release notes).

Installation:

// quasar.conf.js
framework: {
  // ...
  plugins: ['Meta']
}

What this does is that it enables the use of a special property in your Vue components called meta. Example below, with almost all of its features:

// some .vue file

export default {
  // ...
  meta: {
    title: 'Index Page', // sets document title
    titleTemplate: title => `${title} - My Website`, // optional; sets final title as "Index Page - My Website", useful for multiple level meta
    meta: {
      description: { name: 'description', content: 'Page 1' },
      keywords: { name: 'keywords', content: 'Quasar website' },
      equiv: { 'http-equiv': 'Content-Type' content: 'text/html; charset=UTF-8' }
    },
    link: {
      material: { rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons' }
    },
    script: {
      ldJson: {
        type: 'application/ld+json',
        innerHTML: `{ "@context": "http://schema.org" }`
      }
    },
    htmlAttr: {
      'xmlns:cc': 'http://creativecommons.org/ns#' // generates <html xmlns:cc="http://creativecommons.org/ns#">
    },
    bodyAttr: {
      'action-scope': 'xyz', // generates <body action-scope="xyz">
      empty: undefined // generates <body empty>
    },
    noscript: {
      default: 'This is content for browsers with no JS (or disabled JS)'
    }
  }
}

Metas are computed from .vue files in the order they are activated by Vue Router (let's call this a chain for further explanations). Example: App.vue > SomeLayout.vue > IndexPage.vue > ...?

Notice that all properties (except for title and titleTemplate) are Objects; you can override meta props defined in previous Vue components in the chain by using these keys again. Example:

// first loaded Vue component
meta: {
  meta: {
    myKey: { name: 'description', content: 'My Website' }
  }
}

// a subsequent Vue component in the chain;
// this will override the first definition on "myKey"
meta: {
  meta: {
    myKey: { name: 'description', content: 'Page 1' }
  }
}

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
    }
  }
  // ...
}

New

QNoSsr component; highly optimized - takes into consideration client takeover so subsequent renders are as fast as possible.
QJumbotron component
QTable as grid

<q-table
  grid
  hide-header
  :data="data"
  :columns="columns"
  :filter="filter"
  :selection="selection"
  :selected.sync="selected"
  :visible-columns="visibleColumns"
  row-key="name"
>
  <template slot="top-right" slot-scope="props">
    <q-search hide-underline v-model="filter" />
  </template>

  <div
    slot="item"
    slot-scope="props"
    class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 transition-generic"
    :style="props.selected ? 'transform: scale(0.95);' : ''"
  >
    <q-card class="transition-generic" :class="props.selected ? 'bg-grey-2' : ''">
      <q-card-title class="relative-position">
        <q-checkbox v-model="props.selected" :label="props.row.name" />
      </q-card-title>
      <q-card-separator />
      <q-card-main class="q-pa-none">
        <q-list no-border>
          <q-item v-for="col in props.cols.filter(col => col.name !== 'desc')" :key="col.name">
            <q-item-main>
              <q-item-tile label>{{ col.label }}</q-item-tile>
            </q-item-main>
            <q-item-side right>
              <q-item-tile>{{ col.value }}</q-item-tile>
            </q-item-side>
          </q-item>
        </q-list>
      </q-card-main>
    </q-card>
  </div>
</q-table>

New quasar.conf > framework > config Object

framework: {
  // ...
  config: {
    brand: { // this will NOT work on IE 11
      primary: '#e46262',
      // ... or all other brand colors
    },
    notify: {...}, // default set of options for Notify Quasar plugin
    loading: {...}, // default set of options for Loading Quasar plugin
    loadingBar: { ... }, // settings for LoadingBar Quasar plugin
    cordova: {
      iosStatusBarPadding: true/false, // add the dynamic top padding on iOS mobile devices
      backButtonExit: true/false // Quasar handles app exit on mobile phone back button
    }
  }
}

The Quasar UMD version will define the following before including the Quasar script tag:

<script>
  // optional
  window.quasarConfig = { .... }
</script>

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

It will catch all Ajax calls and even hook into asyncData() automatically, but if you have some custom actions, you can programmatically start/stop it by calling this.$q.loadingBar.start() and this.$q.loadingBar.stop() in your Vue components. Outside of Vue components, you can import { LoadingBar } from 'quasar' then call LoadingBar.start()/stop()/increment(val)

LoadingBar is using QAjaxBar component under the covers, so you can configure it using QAjaxBar props like this:
```
// quasar.conf
framework: {
  // ...
  plugins: [
    // ...
    'LoadingBar'
  ],

  config: {
    // optional:
    loadingBar: { ... } // QAjaxBar props
  }
}
```
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 ...

The difference between Quasar v0.15.x and v0.16 is minimal. No big breaking changes as you can see below. The only reason for bumping Quasar's version is to maintain consistency (same major + minor version) with Quasar CLI (which got an important update: webpack 4, babel 7, Workbox, electron-builder support, ionicons v4 and many more).

Upgrading from v0.15.x should be seamless if you are using Quasar CLI -- which will guide you to do some minor changes to your project folder. Note that Ionicons v4 has breaking changes, so if you are using it in your project, then you need to update each such icon to its new name.

Make sure to read the Upgrade Guide.

Breaking Changes

QIcon: removed "mat" & "ios" props for performance reasons (use :name="$q.theme === 'mat' ? val : otherVal" instead)
Removed utils > dom > viewport() method (use window.innerHeight/innerWidth instead)
Updated Quasar ionicons set to Ionicons v4 -- compatible with quasar-extras@2.0

New

[Request] QBtn router handling ("to" and "replace" props) #2058
Improved perf for utils > event by removing legacy IE < 11 code
QFab "icon" prop is now optional

Fixes

LayoutDrawer mini mode: still animating when hidden #2059

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Features

Fixes

Fixes

Breaking Changes

SSR (Server-Side Rendering) Support

Quasar Meta plugin

New

Breaking Changes

New

Fixes

New

Fixes

Releases: quasarframework/quasar

v0.17.5

Features

Fixes

v0.17.4

v0.17.3

Fixes

v0.17.2

v0.17.1

v0.17.0

Breaking Changes

SSR (Server-Side Rendering) Support

Quasar Meta plugin

New

v0.16.0

Breaking Changes

New

Fixes

v0.15.14/15

v0.15.13

New

Fixes

v0.15.12