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 for v1 to v2.

Vuetify 4 Migration

[!IMPORTANT] We suggest running 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:

// 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:

// 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 and eslint-plugin-vue set up first.

yarn add eslint-plugin-vuetify -D
# OR
npm install eslint-plugin-vuetify --save-dev

// 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:

// .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. I suggest converting your pug templates to HTML with 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)

💪 Supporting Vuetify

📑 License

MIT

Copyright (c) 2016-present Vuetify LLC