{"id":12506,"library":"vue-inbrowser-compiler","title":"Vue In-Browser Compiler","description":"The `vue-inbrowser-compiler` package allows for the compilation of Vue Single File Components (SFCs), pseudo-JSX, and plain Vue app definitions directly within the browser environment. It is primarily designed for applications requiring dynamic, user-editable Vue components, such as live code editors, interactive documentation (e.g., Vue Styleguidist), or component playgrounds, eliminating the need for server-side compilation. The current stable version is 4.72.4. Based on its frequent patch and minor updates within the `vue-styleguidist` monorepo, it maintains an active development and release cadence. Its key differentiator is the ability to perform full Vue component compilation dynamically on the client-side, integrating with tools like Buble for JavaScript transpilation, providing a flexible and immediate feedback loop for component development.","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","buble","acorn","typescript"],"install":[{"cmd":"npm install vue-inbrowser-compiler","lang":"bash","label":"npm"},{"cmd":"yarn add vue-inbrowser-compiler","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-inbrowser-compiler","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime peer dependency for rendering compiled Vue components.","package":"vue","optional":false}],"imports":[{"note":"ES Modules are the standard. CommonJS `require` is generally not recommended for browser-based Vue applications or modern Node.js environments.","wrong":"const { compile } = require('vue-inbrowser-compiler')","symbol":"compile","correct":"import { compile } from 'vue-inbrowser-compiler'"},{"note":"This utility function detects if a given string represents a Vue Single File Component by checking for `<template>` or `<script>` tags.","wrong":"const isCodeVueSfc = require('vue-inbrowser-compiler').isCodeVueSfc","symbol":"isCodeVueSfc","correct":"import { isCodeVueSfc } from 'vue-inbrowser-compiler'"},{"note":"Crucial for configuring JSX compilation, it provides the Vue-specific `h` function required by the JSX pragma. It's a named export.","wrong":"import adaptCreateElement from 'vue-inbrowser-compiler/adaptCreateElement'","symbol":"adaptCreateElement","correct":"import { adaptCreateElement } from 'vue-inbrowser-compiler'"},{"note":"Used to manually inject and scope CSS styles compiled from Vue SFCs into the DOM. Often used post-compilation.","wrong":"const { addScopedStyle } = require('vue-inbrowser-compiler')","symbol":"addScopedStyle","correct":"import { addScopedStyle } from 'vue-inbrowser-compiler'"}],"quickstart":{"code":"import { compile, addScopedStyle } from 'vue-inbrowser-compiler';\nimport { createApp } from 'vue'; // Assuming Vue 3 for a modern example\n\nconst sfcCode = `\n<template>\n  <div class=\"hello\" :style=\"{ color: dynamicColor }\">\n    <h1>Compiled Vue Component</h1>\n    <button @click=\"changeColor\">{{ msg }}</button>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        msg: 'Click Me!',\n        dynamicColor: '#900'\n      }\n    },\n    methods: {\n      changeColor() {\n        this.dynamicColor = this.dynamicColor === '#900' ? '#009' : '#900';\n      }\n    }\n  }\n</script>\n\n<style scoped>\n  .hello {\n    text-align: center;\n    font-family: sans-serif;\n  }\n  button {\n    padding: 10px 20px;\n    border: none;\n    border-radius: 5px;\n    background-color: #4CAF50;\n    color: white;\n    cursor: pointer;\n    margin-top: 15px;\n  }\n</style>\n`;\n\nfunction getRunnableComponent(code) {\n  const compiled = compile(code, {\n    target: { ie: 11 } // Buble configuration for transpilation\n  });\n\n  // Add compiled styles to the document with a unique scope\n  // The 'scoped' attribute in the SFC is handled by vue-inbrowser-compiler itself.\n  // addScopedStyle is for when you manually scope or have global styles to add.\n  // For SFCs, compiled.style already contains scoped styles.\n  const styleTag = document.createElement('style');\n  styleTag.textContent = compiled.style;\n  document.head.appendChild(styleTag);\n\n  // Execute the script and return the component definition\n  const func = new Function(compiled.script);\n  return func();\n}\n\n// Mount the compiled component\nconst appDiv = document.createElement('div');\nappDiv.id = 'app';\ndocument.body.appendChild(appDiv);\n\nconst componentDefinition = getRunnableComponent(sfcCode);\nconst app = createApp(componentDefinition);\napp.mount('#app');\n\nconsole.log('Vue component compiled and mounted to #app');\n","lang":"typescript","description":"Demonstrates how to compile a Vue Single File Component (SFC) string dynamically in the browser, inject its styles, and mount it using Vue 3's `createApp`."},"warnings":[{"fix":"Refer to the Buble documentation for supported features and configuration options when compiling JavaScript within Vue components. Avoid using advanced experimental Babel features.","message":"The package uses Buble for JavaScript transpilation, not Babel. Buble's configuration (`BubleConfig`) is less feature-rich than Babel's and may not support the very latest ECMAScript proposals. Users familiar with Babel should note this distinction.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"Upgrade to `vue-inbrowser-compiler@4.72.4` or newer to ensure full compatibility with Vue 3.3.2 and its associated features. Always keep `vue` and `vue-inbrowser-compiler` versions aligned.","message":"Earlier versions of `vue-inbrowser-compiler` (prior to 4.72.4) had compatibility issues with Vue 3.3.2 and potentially newer Vue 3 features, especially regarding `defineEmits` syntax. This could lead to parsing errors or incorrect component behavior.","severity":"breaking","affected_versions":"<4.72.4"},{"fix":"Configure Buble with `{ jsx: '__pragma__(h)' }` and then call the compiled function with `func(adaptCreateElement)` to correctly handle JSX rendering, as shown in the package's documentation.","message":"When using JSX syntax within the compiler, explicit configuration is required. The `jsx` option in `BubleConfig` must be set, and the `adaptCreateElement` helper must be passed to the compiled function.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"For SFCs, the `compiled.style` output should contain the correctly scoped CSS. If injecting additional styles or working with non-SFC CSS, explicitly call `addScopedStyle(cssString, uniqueSuffix)` to ensure proper encapsulation and application.","message":"Styles within a compiled Single File Component (SFC) that use the `scoped` attribute are transformed during compilation. However, if you add raw CSS or need custom scoping, you might need to use `addScopedStyle` manually to inject them into the DOM.","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 that your `compile` call's Buble configuration includes `{ jsx: '__pragma__(h)' }` and that the `new Function()` call for the compiled script is invoked with `func(adaptCreateElement)`.","cause":"This error typically occurs when attempting to compile or render JSX without correctly configuring the JSX pragma or providing the Vue-specific `h` (createElement) function.","error":"TypeError: h is not a function"},{"fix":"Manually move variables intended for reactive use within the component's template into the `data` property of the returned component object. For more complex scenarios, consider using the `new Vue({...})` or full Single File Component syntax.","cause":"When using pseudo-JSX (HTML-like syntax at the top level of the code string), variables declared outside the template are not automatically injected into the component's `data` option.","error":"Vue template compilation error: Property or method \"myVariable\" is not defined on the instance but referenced during render."},{"fix":"Always pass your raw Vue component code through the `compile(code, config)` function first. The `compile` function will return an object containing `script` and `style` strings, where `script` is the valid JavaScript string ready for `new Function()`.","cause":"This error arises when you try to execute a raw Vue template string or an uncompiled Single File Component string directly via `new Function()`. JavaScript's `new Function()` expects valid JavaScript code, not HTML-like templates.","error":"Uncaught SyntaxError: Unexpected token '<' (at line X, column Y)"}],"ecosystem":"npm"}