Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?

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

This comment has been minimized.

Copy link

@burningTyger burningTyger commented Feb 11, 2019

.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

@smcassar

This comment has been minimized.

Copy link
Owner Author

@smcassar smcassar commented Feb 11, 2019

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

@codenamezjames

This comment has been minimized.

Copy link

@codenamezjames codenamezjames commented Feb 11, 2019

components
QWindowResizeObservable -> QResizeObserver

directives
CloseOverlay -> CloseDialog

@B4RteQPl

This comment has been minimized.

Copy link

@B4RteQPl B4RteQPl commented Feb 11, 2019

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...
@webnoob

This comment has been minimized.

Copy link

@webnoob webnoob commented Feb 11, 2019

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

@sskwrl

This comment has been minimized.

Copy link

@sskwrl sskwrl commented Feb 11, 2019

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

@johnnyperkins

This comment has been minimized.

Copy link

@johnnyperkins johnnyperkins commented Feb 12, 2019

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

@johnnyperkins

This comment has been minimized.

Copy link

@johnnyperkins johnnyperkins commented Feb 12, 2019

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

@B4RteQPl

This comment has been minimized.

Copy link

@B4RteQPl B4RteQPl commented Feb 15, 2019

Components
QSpinnerMat and QDatetimePicker gone

@birchb

This comment has been minimized.

Copy link

@birchb birchb commented Feb 17, 2019

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

@kevingermain

This comment has been minimized.

Copy link

@kevingermain kevingermain commented Feb 18, 2019

QColorPicker -> QColor

@genuinefafa

This comment has been minimized.

Copy link

@genuinefafa genuinefafa commented Aug 19, 2019

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

@smcassar

This comment has been minimized.

Copy link
Owner Author

@smcassar smcassar commented Aug 19, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.