Upgrade Guide
This page is incomplete. Please check back later for more information, or submit a PR if you notice something missing. If you have additional questions, reach out to us in Discord
Introduction
This page contains a detailed list of breaking changes and the steps required to upgrade your application to Vuetify 3.0 Many of these changes can be applied automatically by eslint-plugin-vuetify
Setup
- Vuetify class removed, use createVuetify function
Vue.use(Vuetify)
const vuetify = new Vuetify({ ... })
const app = new Vue({
vuetify,
...
})
const app = createVue()
const vuetify = createVuetify({ ... })
app.use(vuetify)
import ... from 'vuetify'
is now a-la-carte, import'vuetify/dist/vuetify.js'
instead to get the complete bundle (not recommended).'vuetify/lib'
should no longer be used, change to'vuetify'
/'vuetify/components'
/'vuetify/directives'
as appropriate.- Only component styles are included, global styles must be imported separately from
'vuetify/styles'
. - vuetify-loader has been renamed to webpack-plugin-vuetify, and we also have a new plugin for vite vite-plugin-vuetify.
Features
Layout
Theme
- Multiple themes are now supported, so
light
/dark
props have been removed from components. Usev-theme-provider
to set the theme for a specific component tree. - Theme colors set their foreground text color automatically, if you were using
light
/dark
to get a different text color you probably don’t need it anymore. - The variant naming scheme has changed slightly, it is now a single word instead of two. For example,
primary darken-1
is nowprimary-darken-1
. - Color classes have been renamed:
- Backgrounds have a
bg-
prefix, for example.primary
is now.bg-primary
. - Text colors have a
text-
prefix, for example.primary--text
is now.text-primary
. - Variants are no longer a separate class, for example
.primary--text.text--darken-1
is now.text-primary-darken-1
.
- Backgrounds have a
- The theme system now uses CSS variables internally, so
customProperties
is no longer required.- If you were using
customProperties
in v2, the naming scheme has changed from--v-primary-base
to--v-theme-primary
. - Custom properties are now also an rgb list instead of hex so
rgb()
orrgba()
must be used to access them, for examplecolor: rgb(var(--v-theme-primary))
instead ofcolor: var(--v-primary-base)
.
- If you were using
Components
General changes
value
prop has been replaced bymodel-value
on components that supportv-model
usage.@input
event has been replaced by@update:model-value
on components that supportv-model
usage.left
andright
have been replaced bystart
andend
respectively. This applies to utility classes too, for example.border-r
is now.border-e
.- Size props
small
/medium
/large
etc. have been combined into a singlesize
prop. absolute
andfixed
props have been combined into a singleposition
prop.top
/bottom
/left
/right
props have been combined into a singlelocation
prop.background-color
prop has been renamed tobg-color
.
Input components
- Affix slots are consistent now:
prepend
andprepend-inner
are the same.append
has been renamed toappend-inner
.append-outer
has been renamed toappend
.
- Variant props
filled
/outlined
/solo
have been combined into a singlevariant
prop.- Allowed values are
'underlined'
,'outlined'
,'filled'
,'solo'
, or'plain'
.
- Allowed values are
success
andsuccess-messages
props have been removed.validate-on-blur
prop has been renamed tovalidate-on="blur"
.
v-alert
border
prop valuesleft
andright
have been renamed tostart
andend
.colored-border
prop has been renamed toborder-color
.dismissable
prop has been renamed toclosable
.outlined
andtext
props have been combined into a singlevariant
prop.- Allowed values are
'elevated'
,'flat'
,'tonal'
,'outlined'
,'text'
, or'plain'
.
- Allowed values are
text
prop has new purpose. It represents the text content of the alert, if default slot is not used.
v-btn
active-class
prop has been renamed toselected-class
.fab
is no longer supported.flat
/outlined
/text
/plain
props have been combined into a singlevariant
prop.depressed
has been renamed tovariant="flat"
.retain-focus-on-click
has been removed, buttons use:focus-visible
instead.
v-checkbox/v-radio/v-switch
input-value
prop has been renamed tomodel-value
.on-icon
andoff-icon
props have been renamed totrue-icon
andfalse-icon
.on-value
andoff-value
props have been renamed totrue-value
andfalse-value
.
v-select/v-combobox/v-autocomplete
- v-model values not present in
items
will now be rendered instead of being ignored. cache-items
prop has been removed, caching should be handled externally.item-text
has been renamed toitem-title
, and now looks up thetitle
property on item objects by default.value
is unchanged.item-disabled
has been removed, anddisabled
,header
,divider
, andavatar
properties are ignored on item objects.- Additional props to pass to
v-list-item
can be specified with theitem-props
prop.item-props
can be a function that takes the item object and returns an object of props, or set to booleantrue
to spread item objects directly as props.
- Additional props to pass to
- The
item
object in slots is now anInternalItem
object, the original item object is available asitem.raw
. - The
item
slot will no longer generate av-list-item
component automatically, instead aprops
object is supplied with the required event listeners and props:
<template #item="{ props }">
<v-list-item v-bind="props"></v-list-item>
</template>
- The
chip
slot should be used instead ofselection
if thechips
prop is set, this will provide some default values to the chips automatically. - Non-
multiple
combobox will now update its model as you type (like a text field) instead of only on blur.
v-slider/v-range-slider
ticks
has been renamed toshow-ticks
.tick-labels
has been renamed toticks
.vertical
has been renamed todirection="vertical"
.
Ready for more?
Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page onGitHub