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
# 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@1
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:
- Read the documentation before asking questions on Discord server or forums.
- Prepare a CodePen so staff can help you.
- Dig into the Quasar source code (it’ll help you understand the framework as well as teach you best practices for programming with Vue).
- Don’t use framework components as mixins unless absolutely necessary (wrap them if you need).
- Don’t target inner component stuff with CSS selectors unless absolutely necessary.
- We recommend
yarn
whenever possible because of its speed and efficient use. However, when using globals, we still recommend usingnpm
, especially if you usenvm
(Node Version Manager). - 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. - Use Quasar boot files for any pre-mounting app routines.
- Be very cautious when using other libraries - Quasar can’t ensure they will be fully compatible
- 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:
- 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)
- Remove local
quasar-cli
package
$ yarn remove quasar-cli
Remove folders
.quasar
,node_modules
andpackage-lock.json
oryarn.lock
fileInstall:
quasar
and@quasar/extras
as dependency
$ yarn add quasar @quasar/extras
- Install:
@quasar/app
as development dependency
$ yarn add --dev @quasar/app
- Re-install all the npm packages
$ yarn
- 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'
]
}
Rename the folder
src/plugins
tosrc/boot
In
quasar.conf.js
: rename the key sectionplugins
toboot
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'
]
}
In
quasar.conf.js
: rename the valuefontawesome
tofontawesome-v6
,mdi
to6
andionicons
toionicons-v4
inside theextras
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.In
quasar.conf.js
>framework
>iconSet
do same rename replacements as above to its value (fontawesome
tofontawesome-v6
,mdi
tomdi-v6
andionicons
toionicons-v4
)In
quasar.conf.js
: rename inframework
>i18n
tolang
In
quasar.conf.js
: remove all references toctx.theme
Create the file
quasar.variables.styl
(or .sass, .scss – recommended!) 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 = #1976d2
$secondary = #26A69A
$accent = #9C27B0
$positive = #21BA45
$negative = #C10015
$info = #31CCEC
$warning = #F2C037
In the folder
~/src/css
, remove thethemes
folder.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 (use Yarn or NPM, depending with which you’ve installed it in the first place):
$ yarn global remove quasar-cli
# or (depending on what you've installed it with)
$ npm remove -g quasar-cli
Install global Quasar CLI
$ yarn global add @quasar/cli
# or
$ npm install -g @quasar/cli
TIP
If you are using Yarn, make sure that the Yarn global install location is in your PATH:
# in ~/.bashrc or equivalent
export PATH="$(yarn global bin):$PATH"
- Last, but not least, do a sanity check with
quasar info
:
Global packages
@quasar/cli - 1.0.5
Important local packages
quasar - 1.9.0 -- 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.5.4 -- Quasar Framework App CLI
@quasar/extras - 1.5.1 -- 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
yarn create quasar
ornpm init quasar
instead ofquasar create
orquasar 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 nowquasar 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. 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 tothis.$q.lang
import('quasar-framework/i18n/' + lang)
was changed toimport('quasar/lang/' + lang)
wherelang
would been-us
etc.- The language pack
en-uk
was changed toen-gb
this.$q.icons
was changed tothis.$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 toaccent
. This applies to Brand Colors as well as Color List.
Legacy | v1 |
---|---|
$tertiary | $accent |
.bg-tertiary | .bg-accent |
.text-tertiary | .text-accent |
Style & Identity
Headings
Legacy | v1 | |
---|---|---|
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
Legacy | v1 |
---|---|
.quote |
CSS Helper Classes
Legacy | v1 |
---|---|
.capitalize | .text-capitalize |
.lowercase | .text-lowercase |
.uppercase | .text-uppercase |
CSS Visibility
Legacy | v1 |
---|---|
.highlight-and-fade | |
.mat-only | |
.ios-only | |
.mat-hide | |
.ios-hide |
Mouse Related
Legacy | v1 |
---|---|
.cursor-inherit | |
.cursor-none | |
.cursor-not-allowed |
Border Related
Legacy | v1 |
---|---|
.round-borders | .rounded-borders |
.no-border | |
.no-border-radius | |
.no-box-shadow |
Layout & Grid
Grid Row
Legacy | v1 |
---|---|
.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
Legacy | v1 |
---|---|
.col-auto | |
.col-xs-auto | |
.col-sm-auto | |
.col-md-auto | |
.col-lg-auto | |
.col-xl-auto | |
.col-shrink |
Grid Gutter
Legacy | v1 |
---|---|
.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
- BackToTop was dropped in favor of Page Scroller.
Legacy | v1 |
---|---|
v-close-overlay | v-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
- renamed to Bottom Sheet
Local/Session Storage
The structure looks the same, but some functions have been renamed.
Legacy | v1 |
---|---|
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
- replaced by QBanner
- The properties
type
andcolor
are now managed by a background css class.
QBanner Properties
Legacy | v1 |
---|---|
actions | |
avatar | |
color | |
detail | |
icon | |
message | |
text-color | |
type | |
dense | |
inline-actions | |
rounded |
QBanner Slots
Legacy | v1 |
---|---|
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
Legacy | v1 |
---|---|
color | |
gutter | |
separator-color |
QBreadcrumbsEl
QBreadcrumbsEl Properties
Legacy | v1 |
---|---|
color | |
event |
QBtn
- Type of
align
was changed fromstring
toany
- Type of
tabindex
was changed fromnumber
tonumber|string
QBtn Properties
Legacy | v1 |
---|---|
no-ripple | |
repeat-timeout | |
wait-for-ripple | |
ripple | |
stack | |
stretch | |
unelevated |
QBtnDropdown
- Type of
align
was changed fromstring
toany
- Type of
tabindex
was changed fromnumber
tonumber|string
QBtnDropdown Properties
Legacy | v1 |
---|---|
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
Legacy | v1 |
---|---|
@before-hide(evt) | |
@before-show(evt) | |
@hide(evt) | |
@show(evt) |
QBtnDropdown Methods
Legacy | v1 |
---|---|
hide(evt) | |
show(evt) | |
toggle(evt) |
QBtnGroup
QBtnGroup Properties
Legacy | v1 |
---|---|
glossy | |
stretch | |
unelevated |
QBtnToggle
QBtnToggle Properties
Legacy | v1 |
---|---|
no-ripple | |
wait-for-ripple | |
ripple | |
stack | |
stretch | |
unelevated |
QCard
QCard Properties
Legacy | v1 |
---|---|
color | |
inline | |
text-color | |
bordered |
QCard Slots
Legacy | v1 |
---|---|
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
- removed, use QSeparator
QCarousel
- Type of
thumbnails
was changed fromarray
toboolean
QCarousel Properties
Legacy | v1 |
---|---|
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
Legacy | v1 |
---|---|
@input(index) | @input(value) |
@slide | |
@slide-trigger | |
@before-transition | |
transition |
QCarousel Methods
Legacy | v1 |
---|---|
goToSlide(slideNum) | goTo(panelName) |
QCarousel Slots
Legacy | v1 |
---|---|
control-button | |
control-full | |
control-nav | |
control-progress | |
quick-nav |
QCarouselControl
- Type of
offset
was changed fromarray of 2 numbers
toarray
QCarouselSlide
QCarouselSlide Properties
Legacy | v1 |
---|---|
disable | |
name |
QChatMessage
- Type of
size
was changed fromarray
tostring
- Type of
text
was changed fromarray
tostring
QCheckbox
- Type of
val
was changed fromobject
toany
QCheckbox Properties
Legacy | v1 |
---|---|
checked-icon | |
indeterminate-icon | |
no-focus | |
readonly | |
unchecked-icon | |
dense | |
tabindex |
QCheckbox Methods
Legacy | v1 |
---|---|
toggle() |
QChip
QChip Properties
Legacy | v1 |
---|---|
avatar | |
closable | |
detail | |
floating | |
pointing | |
small | |
tag | |
clickable | |
disable | |
label | |
outline | |
removable | |
ripple | |
selected | |
tabindex |
QChip Events
Legacy | v1 |
---|---|
@hide() | |
@update:selected(state) | |
@remove(state) |
QChipsInput
- removed, built into QSelect
QCollapsible
- replaced by QExpansionItem
QExpansionItem Properties
Legacy | v1 |
---|---|
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
Legacy | v1 |
---|---|
@before-hide(evt) | |
@before-show(evt) | |
@hide(evt) | |
@input(value) | |
@show(evt) |
QExpansionItem Methods
Legacy | v1 |
---|---|
show(evt) | |
toggle(evt) | |
hide(evt) |
QExpansionItem Slots
Legacy | v1 |
---|---|
header |
QColorPicker
- replaced by QColor
- Type of
default-value
was changed fromstring|object
tostring
QColor Properties
Legacy | v1 |
---|---|
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
Legacy | v1 |
---|---|
@clear(clearVal) |
QColor Methods
Legacy | v1 |
---|---|
clear() | |
hide() | |
show() | |
toggle() |
QContextMenu
- removed, use QMenu with
context-menu
prop
QDatePicker
- replaced by QDate
QDate Properties
Legacy | v1 |
---|---|
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
Legacy | v1 |
---|---|
cancel | |
color | |
ok | |
message | |
options | |
prevent-close | persistent |
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
Legacy | v1 |
---|---|
@ok() | |
@cancel() | |
@hide() | |
@show() | |
@before-hide | |
@before-show | |
@shake |
QDialog Methods
Legacy | v1 |
---|---|
hide(evt) | |
show(evt) | |
toggle(evt) |
QDialog Slots
Legacy | v1 |
---|---|
body | |
buttons | |
message | |
title |
QFab (Floating Action Button)
QFab Events
Legacy | v1 |
---|---|
@hide() | |
@show() | |
@before-hide(evt) | |
@before-show(evt) |
QFab Slots
Legacy | v1 |
---|---|
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
Legacy | v1 |
---|---|
left | |
right |
QInfiniteScroll
Replace :handler
with @load
.
QInfiniteScroll Properties
Legacy | v1 |
---|---|
handler | |
inline | |
disable |
QInfiniteScroll Events
Legacy | v1 |
---|---|
@load(index, done) |
QInfiniteScroll Methods
Legacy | v1 |
---|---|
loadMore() | trigger |
updateScrollTarget |
QInfiniteScroll Slots
Legacy | v1 |
---|---|
message | loading |
QInnerLoading
- Type of
size
was changed fromstring|number
tostring
QInnerLoading Properties
Legacy | v1 |
---|---|
visible | |
showing | |
transition-hide | |
transition-show |
QInput
- Type of
stack-label
was changed fromstring
toboolean
- Type of
autofocus
was changed fromboolean|string
toboolean
QInput Properties
Legacy | v1 |
---|---|
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
Legacy | v1 |
---|---|
clear() | |
select() | |
togglePass() | |
resetValidation() | |
validate(value) |
QInput Slots
Legacy | v1 |
---|---|
prepend | |
append | |
before | |
after | |
error | |
hint | |
counter |
QItem
QItem Properties
Legacy | v1 |
---|---|
event | |
highlight | |
inset-separator | |
link | |
multiline | |
separator | |
sparse | |
clickable | |
disabled | |
focused | |
inset-level | |
manual-focus | |
tabindex |
QItem Events
Legacy | v1 |
---|---|
@click(evt) | |
@keyup(evt) |
QItemMain
- removed, use QItemLabel
QItemSeparator
- replaced by QSeparator
QSeparator Properties
Legacy | v1 |
---|---|
color | |
dark | |
inset | |
spaced | |
vertical |
QItemSide
- removed, use QItemSection
QItemTile
- removed, use QItemSection
QItemTile
withlabel
property, use QItemLabel withheader
propertyQItemTile
withsublabel
property, use QItemLabel withcaption
property
QJumbotron
- removed, use QCard
QKnob
QKnob Properties
Legacy | v1 |
---|---|
decimals | |
line-width | |
angle | |
center-color | |
font-size | |
show-value | |
tabindex | |
thickness |
QLayout
QLayout Properties
Legacy | v1 |
---|---|
@resize() | @resize(size) |
@scroll() | @scroll(details) |
@scroll-height() | @scroll-height(height) |
QLayoutDrawer
- renamed to QDrawer
QDrawer Properties
Legacy | v1 |
---|---|
no-hide-on-route-change | |
bordered | |
elevated |
QDrawer Methods
Legacy | v1 |
---|---|
on-layout | |
hide | |
show | |
toggle |
QLayoutHeader & QLayoutFooter
QFooter Properties
Legacy | v1 |
---|---|
bordered | |
elevated | |
reveal |
QHeader Properties
Legacy | v1 |
---|---|
bordered | |
elevated | |
reveal | |
reveal-offset |
QList
QList Properties
Legacy | v1 |
---|---|
highlight | |
inset-separator | |
link | |
no-border | |
sparse | |
striped | |
striped-odd |
QListHeader
- removed, use QItemLabel with
header
property
QModal
- removed, use QDialog
QModalLayout
QOptionGroup
QOptionGroup Properties
Legacy | v1 |
---|---|
no-parent-group | |
readonly | |
dense |
QPagination
QPagination Methods
Legacy | v1 |
---|---|
set(pageNumber) | |
setOffset(offset) |
QParallax
QParallax Events
Legacy | v1 |
---|---|
@scroll(percentage) |
QParallax Slots
Legacy | v1 |
---|---|
loading | |
content |
QPopover
- replaced by QMenu
- Type of
anchor
was changed fromobject
tostring
- Type of
self
was changed fromobject
tostring
- Type of
offset
was changed fromarray of 2 numbers
toarray
QMenu Properties
Legacy | v1 |
---|---|
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
Legacy | v1 |
---|---|
@before-hide(evt) | |
@before-show(evt) | |
@escape-key |
QMenu Methods
Legacy | v1 |
---|---|
hide(evt) | |
show(evt) | |
toggle(evt) | |
updatePosition() |
QPopupEdit
QPopupEdit Properties
Legacy | v1 |
---|---|
keep-on-screen | |
validate |
QPopupEdit Methods
Legacy | v1 |
---|---|
cancel() | |
set() |
QPopupEdit Slots
Legacy | v1 |
---|---|
title |
QProgress
- replaced by QLinearProgress (alternatively, use QCircularProgress)
QLinearProgress Properties
Legacy | v1 |
---|---|
animate | |
height | |
keep-on-percentage | |
dark | |
query | |
reverse | |
rounded | |
track-color |
QPullToRefresh
QPullToRefresh Properties
Legacy | v1 |
---|---|
handler | use refresh event |
distance | |
inline | |
pull-message | |
release-message | |
refresh-icon | |
refresh-message | |
icon | |
no-mouse |
QPullToRefresh Events
Legacy | v1 |
---|---|
@refresh(done) |
QRadio
QRadio Properties
Legacy | v1 |
---|---|
checked-icon | |
no-focus | |
readonly | |
unchecked-icon |
QRange
QRange Properties
Legacy | v1 |
---|---|
decimals | |
error | |
fill-handle-always | |
square | |
warning |
QRating
- Type of
max
was changed fromnumber
tostring|number
QResizeObservable
- renamed to QResizeObserver
QRouteTab
- Type of
name
was changed fromstring
tostring|number
- Type of
alert
was changed fromboolean
toboolean|string
- Type of
label
was changed fromstring
tostring|number
- Type of
to
was changed fromstring|object
toany
- Do not use
slot="title"
on it anymore
QRouteTab Properties
Legacy | v1 |
---|---|
color | |
count | |
hidden | |
hide |
QRouteTab Methods
Legacy | v1 |
---|---|
select() |
QScrollArea
- Type of
delay
was changed fromnumber
tostring|number
QScrollObservable
- renamed to QScrollObserver
QSearch
- removed, use QInput with
debounce
property (and optionally some icons onappend
orprepend
slots)
QSelect
- Type of
stack-label
was changed fromstring
toboolean
- Type of
display-value
was changed fromstring
tostring|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
andmap-options
flags to preserve the behavior of previous versions. 1.0 defaults to emitting the entire object, not just thevalue
property, upon selection.
QSelect Properties
Legacy | v1 |
---|---|
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
Legacy | v1 |
---|---|
prepend | |
append | |
before | |
after | |
error | |
hint | |
counter | |
selected | |
no-option | |
loading | |
selected-item | |
option |
QSlider
QSlider Properties
Legacy | v1 |
---|---|
decimals | |
error | |
fill-handle-always | |
square | |
warning |
QSpinnerMat
- removed, use QSpinner
QStep
- Type of
name
was changed fromstring|number
toany
QStep Properties
Legacy | v1 |
---|---|
default | |
order | |
subtitle |
QStepper
- Type of
done-icon
was changed fromboolean
tostring
- Type of
active-icon
was changed fromboolean
tostring
- Type of
error-icon
was changed fromboolean
tostring
QStepper Properties
Legacy | v1 |
---|---|
color | |
contractable | |
no-header-navigation |
QStepper Slots
Legacy | v1 |
---|---|
navigation |
QTab
- Type of
name
was changed fromstring
tostring|number
- Type of
alert
was changed fromboolean
toboolean|string
- Type of
label
was changed fromstring
tostring|number
- Type of
tabindex
was changed fromnumber
tostring
- Do not use
slot="title"
on it anymore
QTab Properties
Legacy | v1 |
---|---|
color | |
count | |
default | |
hidden | |
hide |
QTab Slots
Legacy | v1 |
---|---|
title |
QTab Methods
Legacy | v1 |
---|---|
select() |
QTable
filter
- type changed from String
to String,Object
QTable Properties
Legacy | v1 |
---|---|
selected-rows-label | |
pagination-label | |
bordered | |
flat | |
wrap-cells |
QTable Events
Legacy | v1 |
---|---|
@fullscreen() | |
@request() | @request(pagination, filter, getCellValue) |
@update:pagination(newPagination) | |
@update:selected(newSelected) |
QTable Methods
Legacy | v1 |
---|---|
clearSelection() | |
isRowSelected(key) | |
nextPage() | |
prevPage() | |
requestServerInteraction(props) | |
setPagination(pagination, forceServerRequest) | |
sort(col) | |
toggleFullscreen() |
QTable Slots
Legacy | v1 |
---|---|
body-cell | |
header-cell |
QTableColumns
- removed, use a
QSelect
with columns as options (see docs for example)
QTabPane
- removed, use QTabPanels and QTabPanel (outside of a QTabs)
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
Legacy | v1 |
---|---|
animated | |
color | |
glossy | |
inverted | |
panes-container-class | |
position | |
swipeable | |
text-color | |
two-lines | |
underline-color | indicator-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
Legacy | v1 |
---|---|
select |
QTabs Methods
Legacy | v1 |
---|---|
go(offset) | |
next() | |
previous() | |
selectTab(name) |
QTimeline
QTimeline Properties
Legacy | v1 |
---|---|
no-hover | |
responsive |
QTimelineEntry
QTimelineEntry Slots
Legacy | v1 |
---|---|
subtitle | |
title |
QTimePicker
- replaced by QTime
QTime Properties
Legacy | v1 |
---|---|
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 fromobject
toany
checked-icon
andindeterminate-icon
were dropped to makeQCheckbox
more compliant with Material Standards. If you still need similar functionality, consider usingQToggle
with icons.
QToggle Properties
Legacy | v1 |
---|---|
no-focus | |
readonly | |
dense | |
tabindex |
QToolbar
QToolbar Properties
Legacy | v1 |
---|---|
color | |
glossy | |
inverted | |
shrink | |
text-color | |
inset |
QToolbar Slots
Legacy | v1 |
---|---|
subtitle |
QTooltip
QTooltip Properties
Legacy | v1 |
---|---|
disabled | |
content-class | |
content-style | |
max-width | |
target | |
transition-hide | |
transition-show |
QTooltip Events
Legacy | v1 |
---|---|
@before-hide(evt) | |
@before-show(evt) | |
@hide(evt) | |
@input(value) | |
@show(evt) |
QTooltip Methods
Legacy | v1 |
---|---|
updatePosition() |
QTree
QTree Properties
Legacy | v1 |
---|---|
selected-color |
QTree Events
Legacy | v1 |
---|---|
@lazy-load(details) | |
@update:expanded(expanded) | |
@update:selected(target) | |
@update:ticked(target) |
QTree Methods
Legacy | v1 |
---|---|
setExpanded(key, state) | |
setTicked(keys, state) |
QUploader
- Type of
headers
was changed fromobject
tofunction|array
- Type of
url
was changed fromstring
tofunction|string
- Type of
method
was changed fromstring
tofunction|string
QUploader Properties
Legacy | v1 |
---|---|
additional-fields | form-fields |
after | |
align | |
auto-expand | |
before | |
clear-value | |
clearable | |
error | |
expand-style | |
extensions | |
float-label | |
hide-underline | |
hide-upload-button | hide-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
Legacy | v1 |
---|---|
@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
Legacy | v1 |
---|---|
add(files) | addFiles(files) |
pick() | pickFiles() |
removeFile(file) | |
removeQueuedFiles() | |
removeUploadedFiles() |
QUploader Slots
Legacy | v1 |
---|---|
header | |
list |
QWindowResizeObservable
- removed, directly use
this.$q.screen.width
andthis.$q.screen.height
(or create a watcher on them)