{"id":10338,"library":"vbuild","title":"vbuild - Vue Single File Component Parser","description":"vbuild is a Python library (v0.8.2) designed to extract HTML, JavaScript, and CSS from Vue.js `.vue` single-file components. Its primary advantage is operating without a Node.js environment, making it suitable for Python-only backends. It supports minification and targets ES2015-compliant JavaScript. The project is currently in active maintenance with infrequent updates.","status":"active","version":"0.8.2","language":"en","source_language":"en","source_url":"https://github.com/manatlan/vbuild","tags":["vuejs","parser","html","javascript","css","sfc","frontend","no-nodejs"],"install":[{"cmd":"pip install vbuild","lang":"bash","label":"Install stable version"}],"dependencies":[{"reason":"Supports Python 2.7 and Python 3.6+ (explicitly excludes 3.0-3.5).","package":"python","optional":false}],"imports":[{"note":"The main VBuild class is nested within its own 'vbuild' submodule.","wrong":"from vbuild import VBuild","symbol":"VBuild","correct":"from vbuild.vbuild import VBuild"}],"quickstart":{"code":"from vbuild.vbuild import VBuild\n\nvue_sfc_content = \"\"\"\n<template>\n  <div id=\"app\">\n    <h1>Hello {{ name }}</h1>\n    <p>Message: {{ msg }}</p>\n  </div>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      name: 'Registry',\n      msg: 'This is a vbuild example'\n    }\n  }\n}\n</script>\n\n<style scoped>\n#app {\n  font-family: Arial, sans-serif;\n  color: #333;\n}\nh1 {\n  color: #007bff;\n}\n</style>\n\"\"\"\n\nvb = VBuild(vue_sfc_content)\n\nprint(\"--- HTML ---\")\nprint(vb.html)\nprint(\"\\n--- Script ---\")\nprint(vb.script)\nprint(\"\\n--- Style ---\")\nprint(vb.style)\n\n# Example with minification\nvb_minified = VBuild(vue_sfc_content, minify=True, minify_js=True)\nprint(\"\\n--- Minified Script (first 100 chars) ---\")\nprint(vb_minified.script[:100])","lang":"python","description":"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."},"warnings":[{"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`.","message":"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.","severity":"gotcha","affected_versions":"All versions"},{"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.","message":"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.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-17T00:00:00.000Z","next_check":"2026-07-16T00:00:00.000Z","problems":[{"fix":"Use `from vbuild.vbuild import VBuild` instead of `from vbuild import VBuild`.","cause":"The VBuild class is located in a nested submodule. Users often try to import directly from the top-level package.","error":"ModuleNotFoundError: No module named 'vbuild.vbuild'"},{"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.","cause":"Users often mistakenly expect `vbuild` to compile or transpile the JavaScript in a Vue SFC. However, `vbuild` only extracts the raw script content.","error":"AttributeError: 'VBuild' object has no attribute 'compiled_js'"},{"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`.","cause":"This often occurs when the regex-based parser encounters complex, deeply nested, or slightly malformed Vue SFC content that it cannot correctly deconstruct.","error":"IndexError: list index out of range (or similar parsing errors during initialization)"}]}