Vuetify 3

[KaelWD]

trafficstars

Components

• VTabsItems -> VWindow
• VTabItem -> VWindowItem
• VTabsSlider removed - only sliderColor allowed

Props

• color: primary darken-1 -> primary-darken-1
• light -> theme="light"
• dark -> theme="dark"

App Bar

• bottom -> position="bottom"
• dense -> density="compact" **double-check this
• src -> image
• value -> model-value

Avatar

• tile -> rounded="0"

Badge

• value -> model-value
• tile -> rounded="0"
• top -> location="top"
• bottom -> location="bottom"
• left -> location="left"
• right -> location="right"

Banner

• single-line -> lines="one"
• tile -> rounded="0"

Bottom Navigation

• background-color -> bg-color
• shift -> mode="shift"
• horizontal -> mode="horizontal"
• value -> model-value

Btn

• outlined -> variant="outlined"

• plain -> variant="plain"

• text -> variant="text"

• x-small -> size="x-small"

• small -> size="small"

• large -> size="large"

• x-large -> size="x-large"

• absolute -> position="absolute"

• fixed -> position="fixed"

• depressed -> elevation="0"

• ripple - needs to be updated to accept an object

Card

• img -> image

Chip

• x-small -> size="x-small"
• small -> size="small"
• large -> size="large"
• x-large -> size="x-large"
• outlined -> variant="outline"

Expansion Panel

• active-class -> selected-class

Expansion Panels

• accordion -> variant="accordion"
• inset -> variant="inset"
• popout -> variant="popout"

File Input

• background-color -> bg-color
• filled -> variant="filled"
• outlined -> variant="outlined"
• 'underlined', 'outlined', 'filled', 'contained', 'plain'

Footer

• absolute -> position="absolute"
• fixed -> position="fixed"

Icon

• x-small -> size="x-small"
• small -> size="small"
• large -> size="large"
• x-large -> size="x-large"

Input

• dense -> density="compact"
• value -> model-value

Item Group

• value -> model-value

Item

• active-class -> selected-class

List

• three-line -> lines="three"
• two-line -> lines="two"
• color -> bg-color

Radio/checkbox

• onIcon -> trueIcon
• offIcon -> falseIcon

RadioGroup

• row -> inline

Slider

• vertical -> direction="vertical"
• ticks -> show-ticks
  • One-time
• tick-labels -> ticks

Text Field

• filled -> variant="filled"
  • filled is the new default variant
• outlined -> variant="outlined"
• plain -> variant="plain"
• solo -> variant="contained"
• variant="underlined" -> was the v2 default variant

Tabs

• backgroundColor -> bgColor

Slots

Classes

• .primary .darken-1 -> .primary-darken-1
• .text--primary -> .text-high-emphasis
• .text--secondary -> .text-medium-emphasis
• .text--disabled -> .text-disabled

[jd-solanki]

v2 to v3

Updates / Breaking Changes

Components

Alert

• Default margin-bottom is removed

Badge

• location prop top-{left|right} & bottom-{left|right} is now top-{start|end} & bottom-{start|end}.

All left and right have been changed to start and end. https://github.com/vuetifyjs/vuetify/issues/15000

Styles/SCSS

• Default margin-bottom for p tag is removed
• No default styling for code tag
• Setting $color-pack SASS variable to false will not generate class .text-white (there might be more)

Might be in WIP

• [ ] Button: does not have fab floating button.
• [ ] Button: does not have loader feature.
• [ ] Button: does not have speed dial button.
• [ ] Avatar: avatar rounded feature missing
• [ ] Alert: does not support transition prop.
• [ ] List: No flat prop

[KaelWD]

Published 2.0.0-beta.0. Still need to add events and slots, and make sure I didn't miss anything.

[WIStudent]

I tried using the 2.0.0-beta.0 with vuetify 3.0.0 and got the following error:

$ npx eslint

Oops! Something went wrong! :(

ESLint: 8.26.0

Error [ERR_REQUIRE_ESM]: Failed to load plugin 'vuetify' declared in '': require() of ES Module /<redacted>/node_modules/vuetify/lib/framework.mjs not supported.
Instead change the require of /<redacted>/node_modules/vuetify/lib/framework.mjs to a dynamic import() which is available in all CommonJS modules.
Referenced from: 
    at Object.<anonymous> (/<redacted>/node_modules/eslint-plugin-vuetify/lib/rules/grid-unknown-attributes.js:17:5)

grid-unknown-attributes.js requires vuetify

const { components } = require('vuetify')

but I think vuetify 3.0.0 no longer provides a commonJS build. Deleting node_modules/eslint-plugin-vuetify/lib/rules/grid-unknown-attributes.js "fixes" this issue.

[mediafreakch]

v-form: lazy-validation ~~-> validate-on="submit"~~ see below

[KaelWD]

Not really the same. lazy-validation set the model to true unless there was a visible error in the form, v3's form uses true | false | null instead so you can do the same thing by treating null as true (isValid = model !== false). v2 didn't have anything like validate-on, you could set validate-on-blur on individual inputs but there was no way to delay validation of the entire form.

[mediafreakch]

What about absolute prop on v-linear-progress? Docs say it's still supported, but the linter complains...

[messenjer]

I added a small PR https://github.com/vuetifyjs/eslint-plugin-vuetify/pull/47 VSimpleTable -> VTable

[chgad]

Hi since i came across this error while configuring eslint for a new project

Error: Failed to load plugin 'vuetify' declared in '.eslintrc.js': Cannot find module ' <... root ...>/node_modules/vuetify/es5/components/VGrid/VContainer'
Referenced from: <... root ...>/.eslintrc.js

I found no hints whatsoever (since vuetify and eslint-plugin-vuetify is installed) so i wonder if it has to do with vuetify 3.0 and the latest version forgot the grid components?

[KaelWD]

@chgad you have an old version of eslint-plugin-vuetify installed

[chgad]

@chgad you have an old version of eslint-plugin-vuetify installed

I could have sworn i quadruple checked that one, please excuse the inconvenience.

[mtdvlpr]

v-snackbar: :elevation="xx" -> class="elevation-xx"

[pasikonik]

Do you have any progress documentation for that? I want to help, but I don't know what is already done.

[logue]

How can I exclude only v-data-table judgment with the vuetify/no-deprecated-components rule?

As long as it's in labs, I understand that the API will change eventually.

[Skrohk]

Hi,

Do you have a list (like your first comment) of the changes that must be implemented? I'm ready to help.

[KaelWD]

@logue follow #59 for exclusion settings