Releases: quasarframework/quasar
v0.17.3
v0.17.2
v0.17.1
v0.17.0
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.platformand$q.cookiesform. 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@clickVue 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 >
configObjectframework: { // ... 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()andthis.$q.loadingBar.stop()in your Vue components. Outside of Vue components, you canimport { LoadingBar } from 'quasar'then callLoadingBar.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:
widthdefining 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-factoryprop (#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
minHeightprop. (#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 ...
- QModal
v0.16.0
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 [email protected]
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
v0.15.14/15
Fixed a jsFiddle compliancy issue and repackaged.
v0.15.13
v0.15.12
v0.15.11
Many thanks to all contributors!
Small breaking change:
Should you wish to use QBtn inside of a <form> tag, you should know about the difference between (type="button", which is now implicit, and type="submit"):
<form>
...
<q-btn label="I do not submit form" />
<q-btn type="submit" label="I do submit the form" />
...
</form>New
- QLayoutDrawer "mini" mode
- QCarousel "thumbnail" prop
- Screen Quasar plugin
- QChipsInput: add QAutocomplete support #1932
- New Quasar i18n language pack: Czech
- [Request] Event on QKnob with current dragging value #2004
- Improved Dialog & Action Sheet performance
- [Request] More QField slots ("label", "error-label", "warning-label", "helper") #1962
- [wish] make QAlert detail property also available as a slot #1964
- Notify - define action as non-dismissing by prop #1847
- Make QBtn type="button" by default #1846
- Notify: set onDismiss handler #1841
Fixes
- QResizeObservable: start immediately instead debounce pause #2038
- QTable: Possible loop on datatable with server-side interaction #1834
- Can't close the app using Android phone #1897
- Infinite scroll initial "load more" delay #1990
- q-spinner-mat is not working properly in RTL mode #2012
- Zh-hans Quasar i18n language pack fix for QTree
- Fontawesome Pro icon set name
- Guard el.__qbacktotop in BackToTop directive #1989
- There is no RTL boolean in Arabic i18n #1981
- [QStepper] QStepperNavigation breaks on small screens due to fixed height #1985
- Correction for "en-us" & "en-uk" Quasar i18n language pack for QTable #1968
- QChipsInput - use slice of external model to allow @change #1952
- QEditor not emitting after ENTER in certain scenarios #1949
- QDialog and QModal: refocus original element after hide #1941
- QEditor @input event on IE #1945
- Datetime input, default-view bug #1946
- QUploader: set
uploadingto false when abort upload #1944 - QBtn: repeat on keypress and QPagination btn key #1935
- Fix QSelect blur behaviour #1928
- QKnob & QToggle: Don't use touch-... directives when element is not editable #1927
- Correction on "cancel" label for Japanese Quasar i18n language pack
- Use expandClass and expandStyle for QUploader files list #1895
- Loading, Notify: Change name to PascalCase #1893
- refactor QDatetime and QColor model #1885
- QDatetime: Change default date separator to "/" instead of "-" for fixing the way Safari interprets Date
- fix disabled look for controls, fix QSelect clear icon #1881
- QContextMenu does not close when another QContextMenu is opened #1852
- respect documented show interface for QContextMenu #1861
- QCarousel with animations breaks on ios8 #1859
- QListHeader bad padding inside popover #1856
- QInput: account for negative zero #1857
- iOS cordova: no layout header padding
- QPopover hide condition in reposition #2045
Enjoy!
v0.15.10
Repackage of 0.15.9 with a few stop-ship fixes:
- Notify broken in jsFiddle
- Padding for header on iOS under Cordova