Vue SFC Parser

Common errors

• TypeError: vueParser.parse is not a 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.
  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'

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

  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.
  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.

Warnings

• breaking 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.
  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.
• gotcha 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.
  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.
• gotcha 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.
  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.

Install

• npm install vue-parser npm
• yarn add vue-parser yarn
• pnpm add vue-parser pnpm

Imports

• vueParser
  wrong:

  import { vueParser } from 'vue-parser'

  correct:

  import vueParser from 'vue-parser'

  The library primarily uses a default export for its main parsing function.
• vueParser
  wrong:

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

  correct:

  const vueParser = 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.

Quickstart

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);