# eslint-plugin-vuetify
This package helps migrate between Vuetify major versions. It includes rules for **v2 → v3** and **v3 → v4** migrations.
Use [eslint-plugin-vuetify@vuetify-2](https://www.npmjs.com/package/eslint-plugin-vuetify/v/vuetify-2) for v1 to v2.
Support the maintainer of this plugin:
Kael Watts-Deuchar
## Vuetify 4 Migration
> [!IMPORTANT]
> We suggest running [vuetify-codemods](https://www.npmjs.com/package/vuetify-codemods) first to automatically apply most migration fixes
This plugin includes four new rules for migrating from Vuetify v3 to v4:
- **`no-deprecated-typography`** — replaces MD2 typography classes (`text-h1`) with MD3 equivalents (`text-display-large`)
- **`no-legacy-grid-props`** — converts removed `VRow`/`VCol` props (`align`, `justify`, `dense`) to utility classes or renamed props
- **`no-elevation-overflow`** — flags elevation classes and props above the MD3 maximum of 5
- **`no-deprecated-snackbar`** — fixes renamed `VSnackbarQueue` slots and replaced `VSnackbar` props
### Using the recommended-v4 preset
Enable all v4 migration rules at once:
```js
// eslint.config.js
import vue from 'eslint-plugin-vue'
import vuetify from 'eslint-plugin-vuetify'
export default [
...vue.configs['flat/base'],
...vuetify.configs['flat/recommended-v4'],
]
```
### Selecting individual rules
You can also enable rules selectively instead of using the preset:
```js
// eslint.config.js
import vue from 'eslint-plugin-vue'
import vuetify from 'eslint-plugin-vuetify'
export default [
...vue.configs['flat/base'],
...vuetify.configs['flat/base'],
{
rules: {
'vuetify/no-deprecated-typography': 'error',
'vuetify/no-legacy-grid-props': 'error',
'vuetify/no-elevation-overflow': 'error',
'vuetify/no-deprecated-snackbar': 'error',
}
}
]
```
## 💿 Install
You should have [`eslint`](https://eslint.org/docs/latest/use/getting-started) and [`eslint-plugin-vue`](https://eslint.vuejs.org/user-guide/#installation) set up first.
```bash
yarn add eslint-plugin-vuetify -D
# OR
npm install eslint-plugin-vuetify --save-dev
```
```js
// eslint.config.js
import vue from 'eslint-plugin-vue'
import vuetify from 'eslint-plugin-vuetify'
export default [
...vue.configs['flat/base'],
...vuetify.configs['flat/base'],
]
```
ESLint 8 can alternatively use the older configuration format:
```js
// .eslintrc.js
module.exports = {
extends: [
'plugin:vue/base',
'plugin:vuetify/base'
]
}
```
This plugin supports ESLint 8, 9, and 10. ESLint 10 only supports the flat config format (use `configs['flat/base']` or `configs['flat/recommended']`).
**NOTE** This plugin does not affect _**pug**_ templates due to [a limitation in vue-eslint-parser](https://github.com/vuejs/vue-eslint-parser/issues/29). I suggest converting your pug templates to HTML with [pug-to-html](https://github.com/leo-buneev/pug-to-html) in order to use this plugin.
## Rules
### Deprecations
These rules will help you avoid deprecated components, props, and classes. They are included in the `base` preset.
- Prevent the use of components that have been removed from Vuetify ([`no-deprecated-components`])
- Prevent the use of props that have been removed from Vuetify ([`no-deprecated-props`])
- Prevent the use of events that have been removed from Vuetify ([`no-deprecated-events`])
- Prevent the use of classes that have been removed from Vuetify ([`no-deprecated-classes`])
- Prevent the use of the old theme class syntax ([`no-deprecated-colors`])
- Prevent the use of slots that have been removed from Vuetify ([`no-deprecated-slots`])
- Prevent the use of deprecated import paths ([`no-deprecated-imports`])
Additional rule (not included in presets):
- Ensure icon buttons have a variant defined ([`icon-button-variant`])
### Grid system
These rules are designed to help migrate to the new grid system in Vuetify v3. They are included in the `recommended` preset.
- Warn about unknown attributes not being converted to classes on new grid components ([`grid-unknown-attributes`])
### Vuetify 4
These rules help migrate from Vuetify v3 to v4. They are included in the `recommended-v4` preset.
- Disallow deprecated MD2 typography classes ([`no-deprecated-typography`])
- Prevent the use of removed grid props ([`no-legacy-grid-props`])
- Disallow elevation classes above the MD3 maximum ([`no-elevation-overflow`])
- Disallow deprecated props and slots on snackbar components ([`no-deprecated-snackbar`])
### Custom deprecations
User-configurable rules for deprecating components, props, events, and slots - helpful to enforce standardization.
- Disallow usage of specified components, with optional replacements ([`custom-deprecated-components`])
- Disallow usage of specified component props ([`custom-deprecated-props`])
- Disallow usage of specified component events ([`custom-deprecated-events`])
- Disallow usage of specified component slots ([`custom-deprecated-slots`])
[`grid-unknown-attributes`]: ./docs/rules/grid-unknown-attributes.md
[`no-deprecated-components`]: ./docs/rules/no-deprecated-components.md
[`no-deprecated-props`]: ./docs/rules/no-deprecated-props.md
[`no-deprecated-events`]: ./docs/rules/no-deprecated-events.md
[`no-deprecated-classes`]: ./docs/rules/no-deprecated-classes.md
[`no-deprecated-colors`]: ./docs/rules/no-deprecated-colors.md
[`no-deprecated-slots`]: ./docs/rules/no-deprecated-slots.md
[`no-deprecated-imports`]: ./docs/rules/no-deprecated-imports.md
[`icon-button-variant`]: ./docs/rules/icon-button-variant.md
[`custom-deprecated-components`]: ./docs/rules/custom-deprecated-components.md
[`custom-deprecated-props`]: ./docs/rules/custom-deprecated-props.md
[`custom-deprecated-events`]: ./docs/rules/custom-deprecated-events.md
[`custom-deprecated-slots`]: ./docs/rules/custom-deprecated-slots.md
[`no-deprecated-typography`]: ./docs/rules/no-deprecated-typography.md
[`no-legacy-grid-props`]: ./docs/rules/no-legacy-grid-props.md
[`no-elevation-overflow`]: ./docs/rules/no-elevation-overflow.md
## 💪 Supporting Vuetify
Vuetify is an open source MIT project that has been made possible due to the generous contributions by community backers. If you are interested in supporting this project, please consider:
### 📑 License
[MIT](http://opensource.org/licenses/MIT)
Copyright (c) 2016-present Vuetify LLC
