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
    }
  })

.babelrc -> babel.config.js (if you don't remove babelrc your app won't compile)

QAutocomplete -> QSelect
QToolbarTitle doesn't have a subtitle attribut anymore -> use typographic options in two divs instead
QLayoutDrawer -> QDrawer

thanks @burningTyger, I've updated the gist to include this info.

components
QWindowResizeObservable -> QResizeObserver

directives
CloseOverlay -> CloseDialog

I didn't copy my project to v1 so maybe this clue will be helpful for manual upgrading :D

1. create quasar.variables.styl / remove themes directory from css (you can copy common.variables.styl to quasar.variables.styl)
2. in eslintrc.js in rules 0 means off, 2 means error
   cdn...

Issues with ESLint ignoring options in the config, this in your quasar.confg.js file :

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

Then remove:

options: { cache: true } }

Credit goes to discord @dimitar.nanov

QField is no longer needed. Use equivalent fields on the components themselves to preserve functionality.

Component
q-scroll-observable -> q-scroll-observer

css
.q-layout-page-container -> .q-page-container

Components
QSpinnerMat and QDatetimePicker gone

If you were using $q.dialog asynchronously in v0.17, use the Dialog plugin and substitute .onOk for .then and .onCancel for .catch.

QColorPicker -> QColor

the link for the official upgrade guide is returning 404... maybe it did change with the upgrade? :)

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