Upgrade Guide

TIP

Quasar’s v1 version is now on a stable API.

Upgrading from older v1 to latest v1

With UMD

Simply replace the version string in all the CSS and JS tags that refer to Quasar to the newer version.

With Quasar CLI

# run these commands inside
# of a Quasar v1 project
# (need global @quasar/cli to be >= 1.0.0-beta.3)

# check for upgradable packages
$ quasar upgrade

# do the actual upgrade
$ quasar upgrade --install

Note for code editor terminals

If you’re using a code editor terminal instead of the real one, you run quasar upgrade and get an error Command not found or @quasar/cli version appears to be undefined, you will need to go to the settings of your code editor terminal and untick the option (or its equivalent) Add ‘node_modules/.bin’ from the project root to %PATH% then restart your code editor.

With Vue CLI

$ yarn upgrade quasar@latest

You may also want to make sure you have the latest of @quasar/extras package too:

$ yarn add @quasar/extras@latest

Upgrading from 0.x to v1

Before you start down this journey of upgrading Quasar Legacy to Quasar v1 you should know a few things:

  1. Read the documentation before asking questions on Discord server or forums.
  2. Prepare a CodePen so staff can help you.
  3. Dig into the Quasar source code (it’ll help you understand the framework as well as teach you best practices for programming with Vue).
  4. Don’t use framework components as mixins unless absolutely necessary (wrap them if you need).
  5. Don’t target inner component stuff with CSS selectors unless absolutely necessary.
  6. We recommend yarn whenever possible because of its speed and efficient use. However, when using globals, we still recommend using npm, especially if you use nvm (Node Version Manager).
  7. Use git for repository management and make regular commits, it is like taking notes on the process and lets you revert to a previous state in case you get stuck.
  8. Use Quasar boot files for any pre-mounting app routines.
  9. Be very cautious when using other libraries - Quasar can’t ensure they will be fully compatible
  10. Finally, become a backer/sponsor and get access to the special Discord support chat room for priority support.

Introduction to Upgrading

While upgrading Legacy Quasar projects appears like a reasonable choice, it may not always present itself as the best solution. Just be aware that there are alternative measures that may be faster and more efficient. For instance, sometimes it is best to create a new project and port your old project. In this manner, if you do it slowly and methodologically you can see issues and resolve them quickly. This is the opposite of upgrading a project in-place, which can break everything simultaneously. Should you go with the upgrade, we have assembled the steps needed below. However, you will still need to update any Quasar components that went through a revision to get to v1.

In either case, when you build out your project as you go through this process, you may get a build error that gives no valid information and you will have no idea what might be causing it. Should this happen to you, we recommend running quasar build instead of quasar dev as the production build will sometimes give different information (from webpack) than the dev build.

If you get stuck, check out the forums and visit Discord server for help. Not just from staff, but from the community as well.

Whichever path you take, good luck!

Info

It should be noted that we have tried our hardest to make sure everything in the Upgrade documentation is correct. However, because this has been a manual process there are likely errors. If you find any, don’t be afraid to make a PR and propose a change to that which needs to be corrected.

Initial Steps

The best way to start upgrading your project is to follow these steps:

  1. First, verify your current info with quasar info:
Global packages
  quasar-cli                    0.17.23

Important local packages
  quasar-cli                    0.17.23 (Quasar Framework CLI)
  quasar-framework              0.17.19 (Build responsive SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase)
  quasar-extras                 2.0.9   (Quasar Framework fonts, icons and animations)

This shows the Legacy Quasar versions (we’ll do this again at end of the steps to verify upgrade)

  1. Remove local quasar-cli package
$ yarn remove quasar-cli
  1. Remove folders .quasar, node_modules and package-lock.json or yarn.lock file

  2. Install: quasar and @quasar/extras as dependency

$ yarn add quasar @quasar/extras
  1. Install: @quasar/app as development dependency
$ yarn add --dev @quasar/app
  1. Re-install all the npm packages
$ yarn
  1. Babel Upgrade

Start by removing the old .babelrc and creating a new babel.config.js

Then update your babel.config.js to

module.exports = {
  presets: [
    '@quasar/babel-preset-app'
  ]
}
  1. Rename the folder src/plugins to src/boot

  2. In quasar.conf.js: rename the key section plugins to boot

module.exports = function (ctx) {
  return {
    // app plugins (/src/plugins)
    plugins: [
    ],

should look like this:

module.exports = function (ctx) {
  return {
    // app boot (/src/boot)
    boot: [
    ],

Do not get the Quasar plugins mixed up. Do not change this:

// Quasar plugins
framework: {
  plugins: [ // do NOT edit here
    'Notify'
  ]
}
  1. In quasar.conf.js: rename the value fontawesome to fontawesome-v5, mdi to mdi-v3 and ionicons to ionicons-v4 inside the extras section, if you use them. Even if you don’t use them it is still good practice to rename them in case you do use them in the future.

  2. In quasar.conf.js > framework > iconSet do same rename replacements as above to its value (fontawesome to fontawesome-v5, mdi to mdi-v3 and ionicons to ionicons-v4)

  3. In quasar.conf.js: rename in framework > i18n to lang

  4. In quasar.conf.js: remove all references to ctx.theme

  5. Create the file quasar.variables.styl in the folder ~/src/css, if does not already exist. Add the following to it (or move the contents from ~/src/css/themes/common.variables.styl):

// Quasar Stylus Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Stylus variables found in Quasar's source Stylus files.

// Check documentation for full list of Quasar variables

// It's highly recommended to change the default colors
// to match your app's branding.
// Tip: Use the "Theme Builder" on Quasar's documentation website.

$primary   = #027BE3
$secondary = #26A69A
$accent    = #9C27B0

$positive  = #21BA45
$negative  = #C10015
$info      = #31CCEC
$warning   = #F2C037
  1. In the folder ~/src/css, remove the themes folder.

  2. Remove the global Legacy Quasar quasar-cli and install the new @quasar/cli. (You will still be able to run legacy 0.17 projects with it)

Remove global Quasar CLI

$ npm remove -g quasar-cli

Install global Quasar CLI

$ npm install -g @quasar/cli
  1. Last, but not least, do a sanity check with quasar info:
Global packages
  @quasar/cli - 1.0.0-beta.0

Important local packages
  quasar - 1.0.0-beta.3 -- High performance, Material Design 2, full front end stack with Vue.js -- build SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase
  @quasar/app - 1.0.0-beta.5 -- Quasar Framework App CLI
  @quasar/extras - 1.0.0 -- Quasar Framework fonts, icons and animations

Notice the versions that are different from step 1.


All that remains now, is fixing your pages and components for correctness. The information below can be used as a reference.

Build Themes

The iOS theme is no longer available, BUT as you will see, it’s also not necessary anymore:

  • There are examples in the docs of how to make different components look and feel like iOS
  • You can hook into $q.platform.is.ios to help you in setting component props differently
  • The new components are very easy to customize (much easier than in Legacy Quasar)

Quasar CLI

  • To create a new project use quasar create instead of quasar init
  • The --theme, -t option is no longer available as a build option.
  • quasar describe was added for command-line help with Quasar components, etc.
  • quasar inspect is a new option to see generated Webpack config.
  • quasar ext is a new option for management of Quasar App Extensions.
  • quasar new plugin ... is now quasar new boot ...

Build Output

The dist folder now strips out the -mat and -ios suffixes because there’s only one theme now. As a result, dist/spa-mat, dist/electron-ios, dist/pwa-mat etc now become dist/spa, dist/electron, dist/pwa.

Animation

  • The JS and CSS animations were removed for v1. However, they will be offered as a separate Quasar package when v1 fully releases. Until then, if you need them, you can add them manually to your quasar project by pulling them directly out of the v0.17 repository and adding them to your project.
  • motion.styl
  • animate.js

Misc

  • this.$q.i18n was changed to this.$q.lang
  • import(`quasar-framework/i18n/${lang}`) was changed to import(`quasar/lang/${lang}`) where ${lang} would be en-us etc.
  • this.$q.icons was changed to this.$q.iconSet
  • In previous versions you would access an imported language packs isoName with:
 import(`quasar/lang/${locale}`).then(lang => {
   // Access the isoName with - lang.default.lang
 })

This now needs changing to

 import(`quasar/lang/${locale}`).then(lang => {
   // Access the isoName with - lang.default.isoName
 })

Color Palette

The colors faded, dark, light were removed. If you need those, re-add them in a new Stylus file.

// Variables
$light = #bdbdbd
$dark = #424242
$faded = #777

// CSS3 Root Variables
:root
  --q-color-light $light
  --q-color-light-d darken($light, 10%)
  --q-color-faded $faded
  --q-color-dark $dark

// CSS Classes
.text-faded
  color $faded !important
  color var(--q-color-faded) !important
.bg-faded
  background $faded !important
  background var(--q-color-faded) !important

.text-light
  color $light !important
  color var(--q-color-light) !important
.bg-light
  background $light !important
  background var(--q-color-light) !important

.text-dark
  color $dark !important
  color var(--q-color-dark) !important
.bg-dark
  background $dark !important
  background var(--q-color-dark) !important

.text-faded
  color $faded !important
  color var(--q-color-faded) !important
.bg-faded
  background $faded !important
  background var(--q-color-faded) !important

CSS

Color

  • The tertiary color was renamed to accent. This applies to Brand Colors as well as Color List.
Legacyv1
$tertiary$accent
.bg-tertiary.bg-accent
.text-tertiary.text-accent

Style & Identity

Headings

Legacyv1
h1.q-display-4.text-h1
h2.q-display-3.text-h2
h3.q-display-2.text-h3
h4.q-display-1.text-h4
h5.q-headline.text-h5
h6.q-title.text-h6
.q-subheading.text-subtitle1 or .text-subtitle2
.q-body-1.text-body1
.q-body-2.text-body2
.q-caption.text-caption
.text-overline

Text Types

Legacyv1
.quote

CSS Helper Classes

Legacyv1
.capitalize.text-capitalize
.lowercase.text-lowercase
.uppercase.text-uppercase

CSS Visibility

Legacyv1
.highlight-and-fade
.mat-only
.ios-only
.mat-hide
.ios-hide
Legacyv1
.cursor-inherit
.cursor-none
.cursor-not-allowed
Legacyv1
.round-borders.rounded-borders
.no-border
.no-border-radius
.no-box-shadow

Layout & Grid

Grid Row

Legacyv1
.order-first
.order-none
.order-last
.offset-<size>-<columns>

size is one of xs, sm, md, lg or xl.
columns is 1 through 12

Grid Column

Legacyv1
.col-auto
.col-xs-auto
.col-sm-auto
.col-md-auto
.col-lg-auto
.col-xl-auto
.col-shrink

Grid Gutter

Legacyv1
.gutter-xs.q-gutter-xs
.gutter-sm.q-gutter-sm
.gutter-md.q-gutter-md
.gutter-lg.q-gutter-lg
.gutter-xl.q-gutter-xl
.q-gutter-none
.q-col-gutter-xs
.q-col-gutter-sm
.q-col-gutter-md
.q-col-gutter-lg
.q-col-gutter-xl

Directives

Legacyv1
v-close-overlayv-close-popup
v-back-to-top

If you are using the new QMenu component, you can alternatively use the auto-close property.

Plugins

Action Sheet

Local/Session Storage

The structure looks the same, but some functions have been renamed.

Legacyv1
LocalStorage.get.item(key)LocalStorage.getItem(key)
SessionStorage.get.item(key)SessionStorage.getItem(key)
this.$q.localStorage.get.item(key)this.$q.localStorage.getItem(key)
this.$q.sessionStorage.get.item(key)this.$q.sessionStorage.getItem(key)

Components

  • The components below are in alphabetical order for easier access.

QActionSheet

  • was dropped in favor of BottomSheet (from code) or using a QDialog with position="bottom" (from the template).

QAlert

QBanner Properties

Legacyv1
actions
avatar
color
detail
icon
message
text-color
type
dense
inline-actions
rounded

QBanner Slots

Legacyv1
default
avatar
action

QAutocomplete

  • removed, built into QSelect, which is far more powerfull and offers a lot more options for your autocomplete needs; make sure you get accustomed to all the features of QSelect

QBreadcrumbs

QBreadcrumbs Properties

Legacyv1
color
gutter
separator-color

QBreadcrumbsEl

QBreadcrumbsEl Properties

Legacyv1
color
event

QBtn

  • Type of align was changed from string to any
  • Type of tabindex was changed from number to number|string

QBtn Properties

Legacyv1
no-ripple
repeat-timeout
wait-for-ripple
ripple
stack
stretch
unelevated

QBtnDropdown

  • Type of align was changed from string to any
  • Type of tabindex was changed from number to number|string

QBtnDropdown Properties

Legacyv1
dark-percentage
no-ripple
percentage
popover-anchor
popover-self
repeat-timeout
wait-for-ripple
auto-close
cover
menu-anchor
menu-self
persistent
ripple
stack
stretch
unelevated

QBtnDropdown Events

Legacyv1
@before-hide(evt)
@before-show(evt)
@hide(evt)
@show(evt)

QBtnDropdown Methods

Legacyv1
hide(evt)
show(evt)
toggle(evt)

QBtnGroup

QBtnGroup Properties

Legacyv1
glossy
stretch
unelevated

QBtnToggle

QBtnToggle Properties

Legacyv1
no-ripple
wait-for-ripple
ripple
stack
stretch
unelevated

QCard

QCard Properties

Legacyv1
color
inline
text-color
bordered

QCard Slots

Legacyv1
overlay

QCardTitle

  • removed, use QCardSection of QCard

QCardMain

  • removed, use QCardSection of QCard

QCardMedia

  • removed, use QCardSection of QCard or directly place an <img> or QParallax.

QCardSeparator

QCarousel

  • Type of thumbnails was changed from array to boolean

QCarousel Properties

Legacyv1
animation
color
easing
handle-arrow-keys
no-swipe
quick-nav
quick-nav-icon
quick-nav-position
swipe-easing
thumbnails-horizontal
thumbnails-icon
animated
control-color
navigation
navigation-icon
next-icon
padding
prev-icon
swipeable
transition-next
transition-prev

QCarousel Events

Legacyv1
@input(index)@input(value)
@slide
@slide-trigger
@before-transition
transition

QCarousel Methods

Legacyv1
goToSlide(slideNum)goTo(panelName)

QCarousel Slots

Legacyv1
control-button
control-full
control-nav
control-progress
quick-nav

QCarouselControl

  • Type of offset was changed from array of 2 numbers to array

QCarouselSlide

QCarouselSlide Properties

Legacyv1
disable
name

QChatMessage

  • Type of size was changed from array to string
  • Type of text was changed from array to string

QCheckbox

  • Type of val was changed from object to any

QCheckbox Properties

Legacyv1
checked-icon
indeterminate-icon
no-focus
readonly
unchecked-icon
dense
tabindex

QCheckbox Methods

Legacyv1
toggle()

QChip

QChip Properties

Legacyv1
avatar
closable
detail
floating
pointing
small
tag
clickable
disable
label
outline
removable
ripple
selected
tabindex

QChip Events

Legacyv1
@hide()
@update:selected(state)
@remove(state)

QChipsInput

QCollapsible

QExpansionItem Properties

Legacyv1
active-class
append
caption
content-inset-level
dark
default-opened
dense
dense-toggle
disable
duration
exact
exact-active-class
expand-icon
expand-icon-class
expand-icon-toggle
expand-separator
group
header-class
header-inset-level
header-style
icon
label
popup
switch-toggle-side
to
replace

QExpansionItem Events

Legacyv1
@before-hide(evt)
@before-show(evt)
@hide(evt)
@input(value)
@show(evt)

QExpansionItem Methods

Legacyv1
show(evt)
toggle(evt)
hide(evt)

QExpansionItem Slots

Legacyv1
header

QColorPicker

  • replaced by QColor
  • Type of default-value was changed from string|object to string

QColor Properties

Legacyv1
after
align
before
cancel-label
clear-value
clearable
color
display-value
error
float-label
hide-underline
inverted
inverted-light
modal
no-parent-value
ok-label
placeholder
popover
prefix
stack-label
suffix
warning

QColor Events

Legacyv1
@clear(clearVal)

QColor Methods

Legacyv1
clear()
hide()
show()
toggle()

QContextMenu

  • removed, use QMenu with context-menu prop

QDatePicker

QDate Properties

Legacyv1
color
dark
disable
disable-year-month
event-color
events
first-day-of-week
landscape
minimal
options
readonly
text-color
today-btn

QDatetime

QDatetimePicker

QDialog

QDialog Properties

Legacyv1
cancel
color
ok
message
options
prevent-closepersistent
prompt
stack-buttons
title
content-class
content-style
full-height
full-width
maximized
seamless
no-refocus
no-focus
auto-close
transition-hide
transition-show

QDialog Events

Legacyv1
@ok()
@cancel()
@hide()
@show()
@before-hide
@before-show
@shake

QDialog Methods

Legacyv1
hide(evt)
show(evt)
toggle(evt)

QDialog

Legacyv1
body
buttons
message
title

QFab (Floating Action Button)

QFab Events

Legacyv1
@hide()
@show()
@before-hide(evt)
@before-show(evt)

QFab Slots

Legacyv1
tooltip

QFabAction

QField

  • updated, completely new
  • Do NOT use to wrap QInput or QSelect; the functionality of QField is now built into QInput and QSelect.

If you use it to wrap Input, just move all attributes from QField to QInput. If you use error and error-label, enable bottom-slots on QInput and change error-label to error-message.

QIcon

QIcon Properties

Legacyv1
left
right

QInfiniteScroll

Replace :handler with @load.

QInfiniteScroll Properties

Legacyv1
handler
inline
disable

QInfiniteScroll Events

Legacyv1
@load(index, done)

QInfiniteScroll Methods

Legacyv1
loadMore()trigger
updateScrollTarget

QInfiniteScroll Slots

Legacyv1
messageloading

QInnerLoading

  • Type of size was changed from string|number to string

QInnerLoading Properties

Legacyv1
visible
showing
transition-hide
transition-show

QInput

  • Type of stack-label was changed from string to boolean
  • Type of autofocus was changed from boolean|string to boolean

QInput Properties

Legacyv1
after
align
before
clear-value
decimals
float-label
hide-underline
initial-show-password
inverted
inverted-light
lower-case
max-height
no-parent-field
no-pass-toggle
numeric-keyboard-toggle
step
upper-case
warning
autogrow
bg-color
borderless
bottom-slots
counter
debounce
dense
error-message
fill-mask
filled
hide-hint
hint
input-class
input-style
items-aligned
label
lazy-rules
mask
maxlength
outlined
rounded
rules
square
standout
unmasked-value

QInput Methods

Legacyv1
clear()
select()
togglePass()
resetValidation()
validate(value)

QInput Slots

Legacyv1
prepend
append
before
after
error
hint
counter

QItem

QItem Properties

Legacyv1
event
highlight
inset-separator
link
multiline
separator
sparse
clickable
disabled
focused
inset-level
manual-focus
tabindex

QItem Events

Legacyv1
@click(evt)
@keyup(evt)

QItemMain

QItemSeparator

QSeparator Properties

Legacyv1
color
dark
inset
spaced
vertical

QItemSide

QItemTile

  • removed, use QItemSection
  • QItemTile with label property, use QItemLabel with header property
  • QItemTile with sublabel property, use QItemLabel with caption property

QJumbotron

QKnob

QKnob Properties

Legacyv1
decimals
line-width
angle
center-color
font-size
show-value
tabindex
thickness

QLayout

QLayout Properties

Legacyv1
@resize()@resize(size)
@scroll()@scroll(details)
@scrollHeight()@scroll-height(height)

QLayoutDrawer

  • renamed to QDrawer

QDrawer Properties

Legacyv1
no-hide-on-route-change
bordered
elevated

QDrawer Methods

Legacyv1
on-layout
hide
show
toggle

QLayoutHeader & QLayoutFooter

QFooter Properties

Legacyv1
bordered
elevated
reveal

QHeader Properties

Legacyv1
bordered
elevated
reveal
reveal-offset

QList

QList Properties

Legacyv1
highlight
inset-separator
link
no-border
sparse
striped
striped-odd

QListHeader

QModal

QModalLayout

QOptionGroup

QOptionGroup Properties

Legacyv1
no-parent-group
readonly
dense

QPagination

QPagination Methods

Legacyv1
set(pageNumber)
setOffset(offset)

QParallax

QParallax Events

Legacyv1
@scroll(percentage)

QParallax Slots

Legacyv1
loading
content

QPopover

  • replaced by QMenu
  • Type of anchor was changed from object to string
  • Type of self was changed from object to string
  • Type of offset was changed from array of 2 numbers to array

QMenu Properties

Legacyv1
anchor-click
disabled
keep-on-screen
auto-close
context-class
context-menu
context-style
max-width
no-parent-event
target
transition-hide
transition-show

QMenu Events

Legacyv1
@before-hide(evt)
@before-show(evt)
@escape-key

QMenu Methods

Legacyv1
hide(evt)
show(evt)
toggle(evt)
updatePosition()

QPopupEdit

QPopupEdit Properties

Legacyv1
keep-on-screen
validate

QPopupEdit Methods

Legacyv1
cancel()
set()

QPopupEdit Slots

Legacyv1
title

QProgress

QLinearProgress Properties

Legacyv1
animate
height
keep-on-percentage
dark
query
reverse
rounded
track-color

QPullToRefresh

QPullToRefresh Properties

Legacyv1
handleruse refresh event
distance
inline
pull-message
release-message
refresh-icon
refresh-message
icon
no-mouse

QPullToRefresh Events

Legacyv1
@refresh(done)

QRadio

QRadio Properties

Legacyv1
checked-icon
no-focus
readonly
unchecked-icon

QRange

QRange Properties

Legacyv1
decimals
error
fill-handle-always
square
warning

QRating

  • Type of max was changed from number to string|number

QResizeObservable

QRouteTab

  • Type of name was changed from string to string|number
  • Type of alert was changed from boolean to boolean|string
  • Type of label was changed from string to string|number
  • Type of to was changed from string|object to any
  • Do not use slot="title" on it anymore

QRouteTab Properties

Legacyv1
color
count
hidden
hide

QRouteTab Methods

Legacyv1
select()

QScrollArea

  • Type of delay was changed from number to string|number

QScrollObservable

QSearch

  • removed, use QInput with debounce property (and optionally some icons on append or prepend slots)

QSelect

  • Type of stack-label was changed from string to boolean
  • Type of display-value was changed from string to string|number
  • When the option list is an array of objects (as opposed to simple strings or numbers), upgraders may want to turn on the emit-value and map-options flags to preserve the behavior of previous versions. 1.0 defaults to emitting the entire object, not just the value property, upon selection.

QSelect Properties

Legacyv1
after
before
chips
chips-bg-color
chips-color
clear-value
filter
filter-placeholder
float-label
hide-underline
inverted
inverted-light
no-parent-field
popup-cover
popup-max-height
radio
separator
toggle
warning

QSelect Slots

Legacyv1
prepend
append
before
after
error
hint
counter
selected
no-option
loading
selected-item
option

QSlider

QSlider Properties

Legacyv1
decimals
error
fill-handle-always
square
warning

QSpinnerMat

QStep

  • Type of name was changed from string|number to any

QStep Properties

Legacyv1
default
order
subtitle

QStepper

  • Type of done-icon was changed from boolean to string
  • Type of active-icon was changed from boolean to string
  • Type of error-icon was changed from boolean to string

QStepper Properties

Legacyv1
color
contractable
no-header-navigation

QStepper Slots

Legacyv1
navigation

QTab

  • Type of name was changed from string to string|number
  • Type of alert was changed from boolean to boolean|string
  • Type of label was changed from string to string|number
  • Type of tabindex was changed from number to string
  • Do not use slot="title" on it anymore

QTab Properties

Legacyv1
color
count
default
hidden
hide

QTab Slots

Legacyv1
title

QTab Methods

Legacyv1
select()

QTable

filter - type changed from String to String,Object

QTable Properties

Legacyv1
selected-rows-label
pagination-label
bordered
flat
wrap-cells

QTable Events

Legacyv1
@fullscreen()
@request()@request(pagination, filter, getCellValue)
@update:pagination(newPagination)
@update:selected(newSelected)

QTable Methods

Legacyv1
clearSelection()
isRowSelected(key)
nextPage()
prevPage()
requestServerInteraction(props)
setPagination(pagination, forceServerRequest)
sort(col)
toggleFullscreen()

QTable Slots

Legacyv1
body-cell
header-cell

QTableColumns

  • removed, use a QSelect with columns as options (see docs for example)

QTabPane

QTabs

Remove slot="title" from all tabs. It’s not needed anymore. If you use QTabs with QTabPanes, remove them from the QTab container and put them into separate QTabPanel container. Put v-model on both containers and point it to the same variable. If you have default on some tab, put its name as default value of the model.

QTabs Properties

Legacyv1
animated
color
glossy
inverted
panes-container-class
position
swipeable
text-color
two-lines
underline-colorindicator-color
no-pane-border
breakpoint
active-color
active-bg-color
indicator-color
left-icon
right-icon
switch-indicator
narrow-indicator
inline-label
no-caps
dense

QTab Events

Legacyv1
select

QTabs Methods

Legacyv1
go(offset)
next()
previous()
selectTab(name)

QTimeline

QTimeline Properties

Legacyv1
no-hover
responsive

QTimelineEntry

QTimelineEntry Slots

Legacyv1
subtitle
title

QTimePicker

QTime Properties

Legacyv1
color
dark
disable
format24h
hour-options
landscape
minute-options
now-btn
options
readonly
second-options
text-color
with-seconds

QToggle

  • Type of val was changed from object to any
  • checked-icon and indeterminate-icon were dropped to make QCheckbox more compliant with Material Standards. If you still need similar functionality, consider using QToggle with icons.

QToggle Properties

Legacyv1
no-focus
readonly
dense
tabindex

QToolbar

QToolbar Properties

Legacyv1
color
glossy
inverted
shrink
text-color
inset

QToolbar Slots

Legacyv1
subtitle

QTooltip

QTooltip Properties

Legacyv1
disabled
content-class
content-style
max-width
target
transition-hide
transition-show

QTooltip Events

Legacyv1
@before-hide(evt)
@before-show(evt)
@hide(evt)
@input(value)
@show(evt)

QTooltip Methods

Legacyv1
updatePosition()

QTree

QTree Properties

Legacyv1
selected-color

QTree Events

Legacyv1
@lazy-load(details)
@update:expanded(expanded)
@update:selected(target)
@update:ticked(target)

QTree Methods

Legacyv1
setExpanded(key, state)
setTicked(keys, state)

QUploader

  • Type of headers was changed from object to function|array
  • Type of url was changed from string to function|string
  • Type of method was changed from string to function|string

QUploader Properties

Legacyv1
additional-fieldsform-fields
after
align
auto-expand
before
clear-value
clearable
error
expand-style
extensions
float-label
hide-underline
hide-upload-buttonhide-upload-btn
hide-upload-progress
inverted
inverted-light
name
no-content-type
no-parent-field
placeholder
prefix
stack-label
suffix
upload-factory
url-factory
warning
accept
auto-upload
factory
batch
bordered
field-name
label
flat
max-file-size
max-total-size
square
text-color

QUploader Events

Legacyv1
@fail(file, xhr)@failed({ files, xhr })
@remove:abort(file)
@remove:cancel(file)
@remove:done(file)
@uploaded(file, xhr)@uploaded({ files, xhr })
@uploading({ files, xhr })

QUploader Methods

Legacyv1
add(files)addFiles(files)
pick()pickFiles()
removeFile(file)
removeQueuedFiles()
removeUploadedFiles()

QUploader Slots

Legacyv1
header
list

QWindowResizeObservable

  • removed, directly use this.$q.screen.width and this.$q.screen.height (or create a watcher on them)