vue-parser

library1.1.6jsnpmunverified

Vue Parser is a utility library designed to parse the contents of Vue Single File Components (.vue files) by leveraging an Abstract Syntax Tree (AST), specifically based on the `parse5` library. It enables developers to extract specific content from `<template>`, `<script>`, or `<style>` tags. A key differentiator is its ability to pad the extracted content with a specified string (defaulting to comments for script/style) to preserve original line numbers, which is particularly beneficial for linting and error reporting tools. The current stable version is 1.1.6, but the package has not seen updates for approximately four years as of April 2026. This lack of recent development suggests the project is abandoned, which may lead to compatibility issues with newer versions of Vue.js (especially Vue 3+), Node.js, or related ecosystem tools.

web-framework testing

npm install vue-parser

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-PARSER

vue-parser

web-frameworkjavascriptv1.1.6

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-parser'

✗ import { vueParser } from 'vue-parser'

The library primarily uses a default export for its main parsing function.

vueParser

✓ const vueParser = require('vue-parser')

✗ const { parse } = require('vue-parser')

CommonJS require style for Node.js environments. The default export is assigned directly.

ParseOptions

✓ import type { ParseOptions } from 'vue-parser'

Type import for configuration options when using TypeScript, assuming `ParseOptions` is an exported type based on typical library patterns.

Demonstrates parsing a Vue SFC to extract content from `<script>`, `<template>`, and `<style>` tags, illustrating how to specify language attributes and showing the resulting padded output for preserving line numbers.

import vueParser from 'vue-parser'; const vueFileContents = ` <template lang="pug"> .hello h1 {{ msg }} </template> <script lang="js"> export default { name: 'Hello', data () { return { msg: 'Hello World!' } } } </script> <style> h1 { font-weight: normal; } </style> `; console.log('--- Extracting Script Content ---'); const myScriptContents = vueParser.parse(vueFileContents, 'script', { lang: ['js', 'jsx'] }); console.log(myScriptContents); console.log('\n--- Extracting Template Content ---'); const myTemplateContents = vueParser.parse(vueFileContents, 'template', { lang: ['pug'] }); console.log(myTemplateContents); console.log('\n--- Extracting Style Content (default CSS) ---'); const myStyleContents = vueParser.parse(vueFileContents, 'style'); console.log(myStyleContents);

Debug

Known issues

breakingThe package has not been updated for approximately four years and is considered abandoned. It is highly likely to have compatibility issues with newer versions of Vue.js (especially Vue 3+) and modern Node.js environments.

fix

For new projects or existing ones targeting Vue 3+, consider using actively maintained alternatives like `@vue/compiler-sfc` or `vue-eslint-parser` which are designed for modern Vue ecosystems.

affects: >=1.1.6

gotchaThe `parse` function, by default, pads the extracted content with `// ` for script/style tags or empty lines for template tags to retain original line numbers. While beneficial for linters, this behavior might be unexpected if raw, unpadded content is desired directly.

fix

To remove padding, you will need to manually strip the leading padding characters after extraction. The documentation mentions a `padding` option for customization, but its exact usage for disabling or specific string configuration needs to be verified.

affects: >=1.0.0

gotchaThe parser's reliance on `parse5` for AST generation means it handles HTML-like structures. However, it may not fully understand advanced Vue-specific template directives or new `<script setup>` syntax introduced in Vue 3, potentially leading to incorrect parsing or incomplete extraction for complex SFCs.

fix

Manually inspect the output for complex Vue components. For robust parsing of modern Vue SFCs, specialized tools like `@vue/compiler-sfc` are recommended as they are integrated with the Vue core.

affects: <=1.1.6

Errors

Common errors & fixes

TypeError: vueParser.parse is not a function

Incorrect import statement or attempting to destructure a default export as a named export when the library provides a default export. This could also happen if the `require` statement is used incorrectly in a CommonJS environment.

fix

Ensure you are using `import vueParser from 'vue-parser'` for ESM or `const vueParser = require('vue-parser')` for CommonJS to correctly access the default exported function.

Cannot find module 'vue-parser'

The package is not installed or incorrectly referenced in your project's `node_modules`.

fix

Run `npm install vue-parser` or `yarn add vue-parser` to ensure the package is installed and accessible to your project.

No content found for tag 'script' with lang 'ts'

The `lang` option in the `parse` function call is too restrictive, or the specified tag/language combination does not exist in the Vue SFC. This can also occur if the parser doesn't correctly identify custom `lang` attributes.

fix

Verify the `lang` attribute in your Vue file's tag (e.g., `<script lang="ts">`) and ensure it's included in the `lang` array option passed to `parse`. For instance, `{ lang: ['ts', 'js'] }` would match both TypeScript and JavaScript scripts.

Upgrade

Version history

1.1.6latest on npm

Audit

Dependencies

parse5requiredCore dependency for AST parsing of HTML-like structures within .vue files.

Agent activity

11 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/prograhammer/vue-parser ↗

packagehttps://www.npmjs.com/package/vue-parser ↗