{"id":12540,"library":"vue-parser","title":"Vue SFC Parser","description":"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.","status":"abandoned","version":"1.1.6","language":"javascript","source_language":"en","source_url":"https://github.com/prograhammer/vue-parser","tags":["javascript","vue","parser","ast","sfc","typescript"],"install":[{"cmd":"npm install vue-parser","lang":"bash","label":"npm"},{"cmd":"yarn add vue-parser","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-parser","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency for AST parsing of HTML-like structures within .vue files.","package":"parse5","optional":false}],"imports":[{"note":"The library primarily uses a default export for its main parsing function.","wrong":"import { vueParser } from 'vue-parser'","symbol":"vueParser","correct":"import vueParser from 'vue-parser'"},{"note":"CommonJS require style for Node.js environments. The default export is assigned directly.","wrong":"const { parse } = require('vue-parser')","symbol":"vueParser","correct":"const vueParser = require('vue-parser')"},{"note":"Type import for configuration options when using TypeScript, assuming `ParseOptions` is an exported type based on typical library patterns.","symbol":"ParseOptions","correct":"import type { ParseOptions } from 'vue-parser'"}],"quickstart":{"code":"import vueParser from 'vue-parser';\n\nconst vueFileContents = `\n<template lang=\"pug\">\n.hello\n  h1 {{ msg }}\n</template>\n\n<script lang=\"js\">\nexport default {\n  name: 'Hello',\n\n  data () {\n    return {\n      msg: 'Hello World!'\n    }\n  }\n\n}\n</script>\n\n<style>\nh1 {\n  font-weight: normal;\n}\n</style>\n`;\n\nconsole.log('--- Extracting Script Content ---');\nconst myScriptContents = vueParser.parse(vueFileContents, 'script', { lang: ['js', 'jsx'] });\nconsole.log(myScriptContents);\n\nconsole.log('\\n--- Extracting Template Content ---');\nconst myTemplateContents = vueParser.parse(vueFileContents, 'template', { lang: ['pug'] });\nconsole.log(myTemplateContents);\n\nconsole.log('\\n--- Extracting Style Content (default CSS) ---');\nconst myStyleContents = vueParser.parse(vueFileContents, 'style');\nconsole.log(myStyleContents);","lang":"typescript","description":"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."},"warnings":[{"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.","message":"The 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.","severity":"breaking","affected_versions":">=1.1.6"},{"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.","message":"The `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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"The 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.","severity":"gotcha","affected_versions":"<=1.1.6"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"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.","error":"TypeError: vueParser.parse is not a function"},{"fix":"Run `npm install vue-parser` or `yarn add vue-parser` to ensure the package is installed and accessible to your project.","cause":"The package is not installed or incorrectly referenced in your project's `node_modules`.","error":"Cannot find module 'vue-parser'"},{"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.","cause":"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.","error":"No content found for tag 'script' with lang 'ts'"}],"ecosystem":"npm"}