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

smc13/Quasar v1.0 Upgrade Notes.md