{"id":12505,"library":"vue-inbrowser-compiler-utils","title":"Vue In-Browser Compiler Utilities","description":"vue-inbrowser-compiler-utils is a utility library, currently at stable version 4.72.4, designed to facilitate in-browser compilation of Vue components, particularly those incorporating JSX syntax. It functions as a foundational component within the broader vue-styleguidist ecosystem and receives consistent patch updates, typically synchronized with vue-styleguidist releases. This package offers essential functionalities such as parsing Vue Single File Components (SFCs), cleaning source code, and identifying if a given code string represents an SFC. Its primary differentiation lies in enabling live, client-side compilation of Vue components, including support for JSX, which is invaluable for interactive code playgrounds, documentation platforms (like Vue Styleguidist itself), and dynamic rendering environments where server-side compilation is impractical. It also conveniently re-exports select utilities from related packages within the ecosystem.","status":"active","version":"4.72.4","language":"javascript","source_language":"en","source_url":"https://github.com/vue-styleguidist/vue-styleguidist","tags":["javascript","vue","compile","live","browser","acorn","typescript"],"install":[{"cmd":"npm install vue-inbrowser-compiler-utils","lang":"bash","label":"npm"},{"cmd":"yarn add vue-inbrowser-compiler-utils","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-inbrowser-compiler-utils","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for runtime compatibility with Vue components being processed.","package":"vue","optional":false}],"imports":[{"note":"Primarily an ESM module. CommonJS require() is generally not recommended and might require specific transpilation for older Node.js versions.","wrong":"const { parseComponent } = require('vue-inbrowser-compiler-utils');","symbol":"parseComponent","correct":"import { parseComponent } from 'vue-inbrowser-compiler-utils';"},{"note":"CleanVueSrc is a named export. Direct path imports for specific utilities are not the standard approach for this package.","wrong":"import cleanVueSrc from 'vue-inbrowser-compiler-utils/cleanVueSrc';","symbol":"cleanVueSrc","correct":"import { cleanVueSrc } from 'vue-inbrowser-compiler-utils';"},{"note":"The `evaluate` function, while re-exported from `vue-inbrowser-compiler-eval-utils`, is a key utility for running compiled code in a browser context. Ensure the global `Vue` object or a specific `Vue` instance is available in the evaluation context.","wrong":"import { runCode } from 'vue-inbrowser-compiler-utils';","symbol":"evaluate","correct":"import { evaluate } from 'vue-inbrowser-compiler-utils';"}],"quickstart":{"code":"import { parseComponent, evaluate } from 'vue-inbrowser-compiler-utils';\nimport { compile } from 'vue-inbrowser-compiler'; // vue-inbrowser-compiler is a companion package\n\n// Simulate a Vue component string, potentially with JSX in the render function\nconst vueComponentSrc = `\n<template>\n  <div>Hello from {{ name }}!</div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\n\nconst name = ref('Quickstart');\n\n// Example of JSX usage in a render function (requires compilation configuration)\nconst render = () => (<div class=\"jsx-example\">JSX says Hi!</div>);\n</nscript>\n\n<style scoped>\n.jsx-example { color: blue; }\n</style>\n`;\n\n// Step 1: Parse the Vue component using vue-inbrowser-compiler-utils\nconst parsed = parseComponent(vueComponentSrc);\n\nconsole.log('Parsed Component Script:', parsed.script);\nconsole.log('Parsed Component Template:', parsed.template);\n\n// Step 2: (Optional, if you want to clean up the source further)\n// const cleanedScript = cleanVueSrc(parsed.script);\n\n// Step 3: Compile the parsed component (this step uses vue-inbrowser-compiler)\n// In a real browser environment, 'Vue' must be globally available or injected.\nconst compiledCode = compile(parsed.script, parsed.template, { \n  is         : parsed.scriptLang === 'ts' ? 'ts' : 'js',\n  templateLang: parsed.templateLang,\n  // Ensure buble is configured for JSX if needed, e.g., via compilerOptions\n  compilerOptions: {\n    isTS: parsed.scriptLang === 'ts',\n    // other options for buble/jsx compilation\n  }\n});\n\nconsole.log('Compiled Code:', compiledCode.script);\n\n// Step 4: Evaluate the compiled code in a browser-like environment\n// This is typically done in the browser; for Node.js, it simulates.\n// In a browser, you would typically mount this result.\ntry {\n  const componentInstance = evaluate(compiledCode.script, compiledCode.template, { \n    // context for the evaluation, e.g., global Vue instance\n    Vue: typeof Vue !== 'undefined' ? Vue : {} // Provide Vue if available\n  });\n  console.log('Component evaluation successful (check browser for full effect).');\n  // In a real browser app, you would now mount componentInstance\n} catch (e) {\n  console.error('Error during evaluation:', e);\n}\n","lang":"typescript","description":"This quickstart demonstrates how to parse a Vue SFC string (potentially with JSX) using `parseComponent` from `vue-inbrowser-compiler-utils` and then compile it with `vue-inbrowser-compiler` for in-browser evaluation."},"warnings":[{"fix":"Ensure `vue-inbrowser-compiler` is also installed and correctly configured when using this package for its intended purpose of in-browser compilation.","message":"This package is tightly coupled with `vue-inbrowser-compiler` and the broader `vue-styleguidist` ecosystem. While it provides utilities, its core function is to support the in-browser compilation process, and it's not typically used in isolation for general Vue development.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"Always use the latest patch version of `vue-inbrowser-compiler-utils` and its companion `vue-inbrowser-compiler`. Verify compatibility with your specific Vue version, especially when encountering unexpected runtime errors.","message":"Compatibility with Vue 3.x is maintained, with explicit fixes for `vue@3.3.2` and later versions. However, users employing older Vue 3 releases or specific edge cases in Vue 2 might encounter subtle compatibility issues.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"Review `buble` documentation for supported JSX features. For complex JSX needs, consider alternative compilation strategies or adjust your JSX usage to fit `buble`'s capabilities.","message":"JSX compilation is handled via `buble` within the `vue-inbrowser-compiler`. This means it supports a specific flavor of JSX (Buble's JSX transform), which may have differences or limitations compared to Babel's JSX or Vue's official compiler transforms. Advanced JSX features or specific Babel plugins might not be supported out-of-the-box.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"When calling `evaluate`, ensure that `Vue` (or the necessary `createApp` function for Vue 3) is correctly provided in the `context` object to allow the component to initialize and render.","message":"The `evaluate` function requires a runtime Vue instance in its context to properly render components. In a browser environment, this typically means `Vue` must be globally available. In server-side rendering or isolated environments, `Vue` must be explicitly passed into the context object.","severity":"gotcha","affected_versions":">=4.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure Vue is loaded in the global scope (e.g., via a `<script>` tag before your compiled code) or explicitly pass the `Vue` instance into the context object when using `evaluate`.","cause":"The compiled Vue component code is trying to access a global `Vue` object or specific Vue APIs, but they are not available in the current execution context (e.g., in a `script` tag without Vue loaded, or within `evaluate` without `Vue` passed in).","error":"ReferenceError: Vue is not defined"},{"fix":"Verify that the input string passed to `parseComponent` is a well-formed Vue SFC, including `<template>` and `<script>` tags, and that there are no syntax errors preventing basic parsing.","cause":"The `parseComponent` function received an invalid or malformed string that could not be parsed as a Vue Single File Component (SFC), resulting in an incomplete `parsed` object.","error":"TypeError: Cannot read properties of undefined (reading 'script') (or similar for 'template')"},{"fix":"Ensure your `vue-inbrowser-compiler` configuration correctly enables JSX processing via `buble`. If using a build tool, confirm that `vue-inbrowser-compiler`'s internal JSX handling is active and not being overridden by another preprocessor.","cause":"JSX syntax within your component's `<script>` or render function is not being correctly transpiled by `buble` (the underlying JSX compiler used by `vue-inbrowser-compiler`). This often indicates a missing or misconfigured JSX compilation step.","error":"SyntaxError: Unexpected token '<' (or 'JSX element 'div' has no corresponding closing tag')"}],"ecosystem":"npm"}