vuetifyjs/eslint-plugin-vuetify

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.

Support the maintainer of this plugin:

Kael Watts-Deuchar

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)
• Disallow deprecated MD1 typography classes, with configurable replacements (no-deprecated-typography)

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

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:

• Becoming a sponsor on Github (supports Kael)
• Becoming a backer on OpenCollective (supports the Dev team)
• Become a subscriber on Tidelift
• Make a one-time payment with Paypal
• Book time with John

📑 License

MIT

Copyright (c) 2016-present Vuetify LLC