Registry / testing / vue-eslint-parser

vue-eslint-parser

JSON →
library10.4.0jsnpmunverified

vue-eslint-parser is a custom ESLint parser specifically designed to handle `.vue` Single File Components (SFCs). Its primary function is to enable linting of the `<template>` section of Vue files, which traditional JavaScript parsers cannot process. This allows developers to catch errors in complex directives and expressions within their Vue templates. The package is currently at a stable version, 10.4.0, and maintains an active release cadence with frequent updates for enhancements, bug fixes, and infrastructure improvements, as seen in recent minor releases and patch fixes. A key differentiator is its ability to integrate with other parsers (like `@babel/eslint-parser` or `@typescript-eslint/parser`) for the `<script>` blocks, offering flexible configuration through `parserOptions.parser`. It also provides granular control over parsing features specific to Vue, such as the `parserOptions.vueFeatures` property, further enhancing its adaptability to diverse Vue project setups.

testing
npm install vue-eslint-parser
github ↗package ↗
INSTALL
IMPORT
SIG · VUE-ESLINT-PARSER
V
vue-eslint-parser
testingjavascriptv10.4.0
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

vueParser
✓ import vueParser from 'vue-eslint-parser'
✗ const vueParser = require('vue-eslint-parser')
Primarily used in modern ESLint configuration files (e.g., `eslint.config.js`) which are typically ESM. While CommonJS might technically work in some setups, the recommended approach for `eslint.config.js` is ESM.
AST
✓ import type { AST } from 'vue-eslint-parser'
Type import for working with the Abstract Syntax Tree (AST) generated by the parser, typically for plugin authors or advanced tooling.
Rule
✓ import type { Rule } from 'vue-eslint-parser'
Type import for defining custom ESLint rules that interact with the Vue AST provided by this parser.

This configuration demonstrates how to set up `vue-eslint-parser` in a modern `eslint.config.js` file, enabling linting for `.vue` files and integrating `@typescript-eslint/parser` for `<script lang="ts">` blocks.

import vueParser from 'vue-eslint-parser'; import tsParser from '@typescript-eslint/parser'; export default [ { files: ["*.vue", "**/*.vue"], languageOptions: { parser: vueParser, parserOptions: { ecmaVersion: "latest", sourceType: "module", parser: { // Script parser for `<script lang="ts">` "ts": tsParser, // Script parser for `<script>` without lang attribute or `lang="js"` "js": "espree", // Script parser for Vue directives and interpolations in <template> "<template>": "espree" }, // Optional: For type-aware linting with @typescript-eslint/parser // project: ['./tsconfig.json'] } }, rules: { // Example: Add a rule from eslint-plugin-vue // 'vue/no-unused-vars': 'error', } } ];
Debug
Known issues
breakingVersion 10.0.0 dropped support for older ESLint and Node.js versions. Ensure your environment meets the new requirements (Node.js `>=18.18.0 || ^20.9.0 || >=21.1.0`, ESLint `>=8.57.0 || ^9.0.0 || ^10.0.0`).
fix
Upgrade your Node.js and ESLint installations to compatible versions, or remain on `vue-eslint-parser` v9.x if an upgrade is not feasible.
affects: >=10.0.0
breakingIn v10.0.0, the default behavior for parsing script-fragments within `<template>` changed to use `project: undefined`. This might affect type-aware linting in templates if you previously relied on project inference for `@typescript-eslint/parser`.
fix
If using `@typescript-eslint/parser` and requiring type-aware linting in template expressions, explicitly configure `parserOptions.parser['<template>']` with the `project` option pointing to your `tsconfig.json`.
affects: >=10.0.0
breakingThe default `ecmaVersion` was changed to `'latest'` in v10.0.0. While this generally improves support for modern JavaScript features, it might cause parsing errors with older codebases or specific ESLint rule configurations that assume an older `ecmaVersion`.
fix
If you encounter unexpected parsing errors or rule conflicts, explicitly set `languageOptions.parserOptions.ecmaVersion` to your desired ECMAScript version (e.g., `2015`, `2020`) in your ESLint configuration.
affects: >=10.0.0
gotchaWhen linting Vue SFCs with TypeScript in `<script lang="ts">` blocks, you must configure `parserOptions.parser` to explicitly use `@typescript-eslint/parser`. Without this, TypeScript syntax will not be correctly parsed, leading to numerous linting errors.
fix
Set `parserOptions.parser: { ts: require('@typescript-eslint/parser') }` (or `import tsParser from '@typescript-eslint/parser'` for ESM configs) in your ESLint configuration under the `languageOptions` for `.vue` files.
affects: >=1.0.0
gotchaFor fine-grained control over parsing different sections of a Vue SFC (JavaScript `<script>`, TypeScript `<script lang="ts">`, and template expressions), `parserOptions.parser` can accept an object with keys like `'js'`, `'ts'`, and `'<template>'`. Incorrectly configuring this object can lead to parsing issues or incomplete linting across your Vue components.
fix
Refer to the `vue-eslint-parser` documentation for `parserOptions.parser` for the correct object structure and available keys. Ensure you specify the appropriate parser for each language section you intend to lint within your Vue files.
affects: >=1.0.0
Errors
Common errors & fixes
ESLint: Cannot find module 'vue-eslint-parser'
The `vue-eslint-parser` package is not installed or not resolvable in the current project context.
fix
Run `npm install --save-dev vue-eslint-parser eslint` or `yarn add -D vue-eslint-parser eslint` to install the required packages.
Parsing error: 'import' and 'export' may only appear at the top level
ESLint is attempting to parse `<script lang="ts">` content using the default JavaScript parser (e.g., `espree`) instead of the TypeScript parser (`@typescript-eslint/parser`).
fix
Configure `parserOptions.parser: { ts: '@typescript-eslint/parser' }` within your ESLint configuration's `languageOptions` for `.vue` files to correctly parse TypeScript syntax.
Error: You are using Node.js v16.x. `vue-eslint-parser` v10+ requires Node.js `^18.18.0 || ^20.9.0 || >=21.1.0`.
`vue-eslint-parser` v10.0.0 introduced breaking changes in its Node.js version requirements, dropping support for older Node.js runtimes.
fix
Upgrade your Node.js environment to a compatible version (e.g., Node.js 18.18.0 or 20.9.0) or downgrade `vue-eslint-parser` to a v9.x release to match your current Node.js version.
Error: The 'parser' option must be a string. Received function.
This error can occur in some ESLint environments or configurations when an imported parser function is passed directly instead of its string identifier, or due to incompatibilities with how ESLint resolves parsers in certain setups (e.g., CommonJS vs. ESM contexts).
fix
Ensure you are using ESLint v8.x or later. For `parserOptions.parser` (especially nested parsers like `parserOptions.parser.ts`), try passing the string identifier `'@typescript-eslint/parser'` instead of the imported parser function if you are having issues with resolution.
Upgrade
Version history
10.4.0latest on npm
Audit
Dependencies
eslintrequiredRequired peer dependency for ESLint integration.
Agent activity
15 hits · last 30 days
node
12
Resources
githubhttps://github.com/vuejs/vue-eslint-parser ↗
packagehttps://www.npmjs.com/package/vue-eslint-parser ↗