Quasar v1.0 Upgrade Notes.md

Quasar 1.0 Upgrade Notes

The Quasar team now have their own upgrade notes as well.

Some simple notes of changes I found during migration from v0.17 to v1.0-beta. I used a fresh app directory created using quasar create <folder> -b dev and copied my components/routes/etc to the new folder.

Renamed Folders

For the most part all folders are the same except for src/plugins. This folder has been renamed to src/boot. They currently function in the same way as before however boot plugins can now by asyncronous.

Router Changes

Small change here between old versions and v1.0; The routes.js file now has a constant for the list of routes. Just replace the routes in the constant with your old ones.

Babelrc

The .babelrc file has been replaced with babel.config.js. The old babel file needs to be deleted (if your using the same directory as v0.17) otherwise your app won't compile (Thanks burningTyger). The new config file contains the following:

module.exports = {
  presets: [
    '@quasar/babel-preset-app'
  ]
}

CSS

Gutters

All gutter classes are now prefixed with q- (eg: q-gutter-sm). There are also new gutter classes available (q-col-gutter-*) for use with col classes. eg:

<div class="row q-col-gutter-sm">
  <div class="col-4"></div>
  <div class="col-4"></div>
  <div class="col-4"></div>
</div>

Typography

Fairly big name changes here. Instead of being prefixed with q-, classes are now prefixed with text- (eg q-display-1 => text-h1).

Old Class	New Class
.q-display-4	.text-h1
.q-display-3	.text-h2
.q-display-2	.text-h3
.q-display-1	.text-h4
.q-headline	.text-h5
.q-title	.text-h6
.q-subheading	.text-subtitle1
.q-body-1	.text-body1
.q-body-2	.text-body2
.q-caption	.text-caption
.uppercase	.text-uppercase
.lowercase	.text-lowercase
.capitalize	.text-capitalize

Components Replaced / Renamed:

Old Component	New Component
QLayoutHeader	QHeader
QLayoutFooter	QFooter
QLayoutDrawer	QDrawer
QToolbarTitle.subtitle	Use typography instead
QListHeader	QItemLabel.header
QItemMain	QItemLabel
QItemSide	QItemSection.side
QItemSeparator	QSeparator
QItemTile	QItemSection
QCardTitle	QCardSection
QCardMain	QCardSection
QCardMedia	QCardSection
QCardSeparator	QSeparator
QField	N/A (no longer required)
QChipsInput	QSelect.use-input.use-chips.multiple
QAutocomplete	QSelect
QDatetime	QDate + QTime
QSearch	QInput.type="search"
QTabPane	QTabPanel
QTableColumns	QSelect/QCheckbox/QToggle/etc
QCollapsible	QExpansionItem
QModal	QDialog
QModalLayout	QLayout.container
QPopover	QMenu
QJumbotron	QCard
QAlert	QBanner
QProgress	QLinearProgress
QWindowResizeObservable	QResizeObserver

Directives Replaced / Renamed

Old Directive	New Directive / Component
BackToTop	QPageScroller (Component)
CloseOverlay	CloseDialog / CloseMenu (Directives)

Bugs & Issues

• QSelect: Select inputs with use-input and mutiple can still trigger form submits when pressing enter to add a new item. This has now been fixed
• QInput: Text suffixes on inputs don't work correctly in firefox. This has been reported for older versions already. This has now been fixed
• QBtnGroup: When a button group is inside the card actions component, every button after the first one is given a left margin. This has now been fixed

Eslint config not updating (thanks webnoob & dimitar.nanov on Discord)

Eslint configs are now cached, if you need to make a change to your configuration (.eslintrc.js) then you need to disable caching for your changes to take effect. This can be done by finding the extendWebpack section in quasar.conf.js and changing cache to false fo the eslint-loader rule, like so:

  cfg.module.rules.push({
    enforce: 'pre',
    test: /\.(js|vue)$/,
    loader: 'eslint-loader',
    exclude: /node_modules/,
    options: {
      cache: true
    }
  })

@genuinefafa looks like they removed the gist when they officially released v1. I've updated the link