vbuild - Vue Single File Component Parser

Common errors

• ModuleNotFoundError: No module named 'vbuild.vbuild'

  cause The VBuild class is located in a nested submodule. Users often try to import directly from the top-level package.
  fix Use `from vbuild.vbuild import VBuild` instead of `from vbuild import VBuild`.

• AttributeError: 'VBuild' object has no attribute 'compiled_js'

  cause Users often mistakenly expect `vbuild` to compile or transpile the JavaScript in a Vue SFC. However, `vbuild` only extracts the raw script content.
  fix Access the raw JavaScript content via `vbuild.script`. If further compilation or transpilation is needed, use external tools like Babel, TypeScript, or `esbuild` on the extracted script content.

• IndexError: list index out of range (or similar parsing errors during initialization)

  cause This often occurs when the regex-based parser encounters complex, deeply nested, or slightly malformed Vue SFC content that it cannot correctly deconstruct.
  fix Simplify the structure of your Vue SFC. Ensure all tags are correctly closed and nested. For highly complex or dynamic SFCs, consider a more robust parser like `vuejs-sfc-parser`.

Warnings

• gotcha vbuild relies on a regex-based parser, which is inherently less robust than a full Abstract Syntax Tree (AST) parser. It may struggle with complex, non-standard, or slightly malformed Vue SFC syntax, leading to incomplete extractions or parsing errors that a dedicated VueJS parser would handle.
  Fix: For critical applications requiring highly robust Vue SFC parsing, consider `vuejs-sfc-parser` or Node.js-based tools. Ensure your Vue SFCs strictly adhere to standard syntax when using `vbuild`.
• gotcha vbuild only extracts the raw HTML, JavaScript, and CSS content from a Vue SFC; it does not perform any JavaScript transpilation (e.g., converting ESNext to ES5) or Vue-specific compilation beyond basic extraction. The `script` content provided by `vbuild.script` is raw and may require further processing by external tools if it contains modern JavaScript features or complex Vue logic.
  Fix: Be aware that the extracted `script` content is raw. If you need full JavaScript transpilation or Vue component compilation, you will need to integrate additional tools (e.g., Babel, TypeScript, or a simple `esbuild` subprocess call) into your workflow.

Install

• pip install vbuild Install stable version

Imports

• VBuild
  wrong:

  from vbuild import VBuild

  correct:

  from vbuild.vbuild import VBuild

  The main VBuild class is nested within its own 'vbuild' submodule.

Quickstart

This quickstart demonstrates how to instantiate VBuild with a Vue SFC string and extract its `html`, `script`, and `style` components. It also shows basic minification options.

from vbuild.vbuild import VBuild

vue_sfc_content = """
<template>
  <div id="app">
    <h1>Hello {{ name }}</h1>
    <p>Message: {{ msg }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'Registry',
      msg: 'This is a vbuild example'
    }
  }
}
</script>

<style scoped>
#app {
  font-family: Arial, sans-serif;
  color: #333;
}
h1 {
  color: #007bff;
}
</style>
"""

vb = VBuild(vue_sfc_content)

print("--- HTML ---")
print(vb.html)
print("\n--- Script ---")
print(vb.script)
print("\n--- Style ---")
print(vb.style)

# Example with minification
vb_minified = VBuild(vue_sfc_content, minify=True, minify_js=True)
print("\n--- Minified Script (first 100 chars) ---")
print(vb_minified.script[:100])