eslint-plugin-vue

10.9.0 verified Sat Apr 25 auth: no javascript

Official ESLint plugin for Vue.js providing over 100 rules for Vue 2 and Vue 3 single-file components (SFC). Current stable version is 10.9.0, released monthly with minor updates that may add new rules and default config changes (not strictly semver-major). It requires vue-eslint-parser, optional @typescript-eslint/parser for TypeScript, and @stylistic/eslint-plugin for stylistic rules. Over 100 rules cover template syntax, script setup, component options, and best practices. The plugin ships sharable configs (recommended, strongly-recommended) and supports both legacy eslintrc and flat config (ESLint v9+).

Common errors

error Error: Failed to load plugin 'vue' declared in 'plugins': Cannot find module 'eslint-plugin-vue' ↓

cause The plugin is not installed or not in the project's node_modules.

fix

Run npm install --save-dev eslint-plugin-vue (and required peer deps vue-eslint-parser, etc.).

error Error: Failed to load parser 'vue-eslint-parser' declared in 'languageOptions.parser' ↓

cause vue-eslint-parser is missing or using wrong parser path in flat config.

fix

Install vue-eslint-parser and import it: import parser from 'vue-eslint-parser'; then set languageOptions: { parser }.

error Parsing error: The keyword 'import' is reserved ↓

cause Using ESM import syntax in a CommonJS config file (e.g., .js file with no type: module).

fix

Rename file to .mjs or add 'type': 'module' to package.json, or use require() syntax.

error TypeError: pluginVue.configs is not iterable ↓

cause Using pluginVue.configs['flat/recommended'] in an array without spreading the config object correctly.

fix

Ensure you spread the config: export default [ ...pluginVue.configs['flat/recommended'], { ... } ] or use pluginVue.configs['flat/recommended'] as a single entry in the array.

Warnings

breaking ESLint v10 support requires vue-eslint-parser >=10.3.0 and eslint-plugin-vue >=10.8.0. Using older versions will fail with 'Failed to load plugin vue'. ↓

fix Upgrade eslint-plugin-vue to >=10.8.0 and vue-eslint-parser to >=10.3.0.

breaking Flat config (ESLint 9+) replaces the legacy extends format. Configs are now accessed via pluginVue.configs['flat/recommended'] instead of 'plugin:vue/vue3-recommended'. ↓

fix Use flat config syntax: import pluginVue from 'eslint-plugin-vue'; export default [pluginVue.configs['flat/recommended']];

breaking vue-eslint-parser v10 drops CommonJS support; require() may fail if not handled correctly. ↓

fix Use import or dynamic import; if using CommonJS, use require('vue-eslint-parser') (no .default).

deprecated Legacy eslintrc configuration (extends: 'plugin:vue/recommended') is deprecated in favor of flat config. The plugin will remove legacy support in a future major version. ↓

fix Switch to flat config format (ESLint 9+).

gotcha Minor releases may introduce new rules that cause additional lint errors. The plugin does not follow ESLint's semantic versioning policy for configs. ↓

fix Use tilde range (e.g., ^9.0.0) in package.json to limit minor updates, or pin exact version.

gotcha When using TypeScript, you must install @typescript-eslint/parser and use parser: '@typescript-eslint/parser' for .ts files, while vue-eslint-parser remains the primary parser for .vue files. ↓

fix Set parser: 'vue-eslint-parser' globally and use parserOptions.parser: '@typescript-eslint/parser'.

Install

npm install eslint-plugin-vue

yarn add eslint-plugin-vue

pnpm add eslint-plugin-vue

Imports

flat config

wrong

module.exports = { extends: ['plugin:vue/vue3-recommended'] }

correct

import pluginVue from 'eslint-plugin-vue'
export default [pluginVue.configs['flat/recommended']]

Flat config (ESLint >=9) uses plugin's configs['flat/...'] object; legacy eslintrc uses string extends. Since v10, flat config is preferred.

plugin
wrong
```
const eslintPluginVue = require('eslint-plugin-vue').default
```
correct
```
const { rules } = require('eslint-plugin-vue')
```
CommonJS require returns the plugin object directly, without .default. TypeScript users can import * as pluginVue from 'eslint-plugin-vue'.
vue-eslint-parser
wrong
```
const parser = require('vue-eslint-parser').default
```
correct
```
import parser from 'vue-eslint-parser'
export default [{ ... }, { languageOptions: { parser } }]
```
vue-eslint-parser is ESM-only since v10; use import or require('vue-eslint-parser') (no .default). It must be set as the parser in ESLint configuration.

Quickstart

Flat ESLint configuration using eslint-plugin-vue's recommended rules and vue-eslint-parser for a Vue 3 project.

// eslint.config.js (flat config, ESLint 9+)
import pluginVue from 'eslint-plugin-vue'
import parser from 'vue-eslint-parser'

export default [
  pluginVue.configs['flat/recommended'],
  {
    rules: {
      'vue/multi-word-component-names': 'warn',
    },
    languageOptions: {
      parser,
    },
  },
]