{"id":15034,"library":"vue-inbrowser-compiler-demi","title":"Vue In-Browser Compiler Demi","description":"vue-inbrowser-compiler-demi is a crucial internal compatibility layer designed to enable vue-inbrowser-compiler to function seamlessly across both Vue 2 and Vue 3 environments. It manages the underlying compiler differences between the two major Vue versions, abstracting them away from the primary compiler package. The current stable version is 4.71.1. As part of the larger vue-styleguidist ecosystem, its release cadence is tied to updates within that project, often seeing patch and minor releases to maintain compatibility with new Vue versions and address bug fixes, such as resolving issues with Vue 3.3.2. Its key differentiator is its role in providing a unified compilation experience for in-browser Vue component evaluation, particularly useful for development tools, playgrounds, or live-editing scenarios where direct browser compilation of Vue Single File Components (SFCs) is required without a build step.","status":"active","version":"4.71.1","language":"javascript","source_language":"en","source_url":"https://github.com/vue-styleguidist/vue-styleguidist","tags":["javascript","vue","compile","typescript"],"install":[{"cmd":"npm install vue-inbrowser-compiler-demi","lang":"bash","label":"npm"},{"cmd":"yarn add vue-inbrowser-compiler-demi","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-inbrowser-compiler-demi","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for compiling Vue 3 Single File Components.","package":"@vue/compiler-sfc","optional":false},{"reason":"The core Vue runtime library, required for component functionality across Vue 2 and Vue 3.","package":"vue","optional":false},{"reason":"Required for compiling Vue 2 Single File Components. This is specific to Vue 2.","package":"vue-template-compiler","optional":false}],"imports":[{"note":"While vue-inbrowser-compiler-demi provides the underlying Vue 2/3 compatibility, end-developers typically interact with the `compile` function from `vue-inbrowser-compiler` which leverages demi internally.","symbol":"compile","correct":"import { compile } from 'vue-inbrowser-compiler'"},{"note":"Similar to `compile`, the `run` function from `vue-inbrowser-compiler` is what developers use to execute compiled Vue components in a browser environment, with demi facilitating cross-version compatibility.","symbol":"run","correct":"import { run } from 'vue-inbrowser-compiler'"},{"note":"This represents common type definitions for configuring the in-browser compiler. Although directly from 'vue-inbrowser-compiler', it reflects the compilation context managed by 'demi' behind the scenes for cross-version support.","symbol":"VueInBrowserCompilerOptions","correct":"import type { VueInBrowserCompilerOptions } from 'vue-inbrowser-compiler'"}],"quickstart":{"code":"import { compile, run } from 'vue-inbrowser-compiler';\n\nconst componentCode = `\n<template>\n  <div :style=\"{ color: dynamicColor }\">\n    <h1>Hello, {{ name }}!</h1>\n    <p>This is a Vue {{ vueVersion }} component compiled in-browser.</p>\n    <button @click=\"changeColor\">Change Color</button>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: { \n    name: { type: String, default: 'Developer' },\n    vueVersion: { type: String, default: '?' }\n  },\n  data() {\n    return { dynamicColor: 'blue' };\n  },\n  methods: {\n    changeColor() {\n      this.dynamicColor = this.dynamicColor === 'blue' ? 'red' : 'blue';\n    }\n  }\n}\n</script>\n\n<style scoped>\nh1 { margin-bottom: 5px; }\np { margin-top: 5px; }\n</style>\n`;\n\n// vue-inbrowser-compiler-demi invisibly handles the Vue 2/3 specific compilation logic here.\n// The 'compile' function automatically detects the Vue version based on installed peer dependencies.\nconst compiledComponent = compile(componentCode, {\n  // Optionally pass compiler options, e.g., for Buble (ES2015 transpilation)\n  // buble: { target: { ie: 11 } }\n});\n\n// Create a mount point in the DOM\nconst appRoot = document.createElement('div');\nappRoot.id = 'app';\ndocument.body.appendChild(appRoot);\n\n// Run the compiled component. For a real app, you'd ensure Vue is globally available.\n// Here, we simulate by passing Vue to the context if needed for standalone execution.\n// This example assumes Vue is already loaded in the browser context.\nrun(compiledComponent.code, {\n  mountPoint: appRoot,\n  scope: { \n    name: 'World',\n    vueVersion: '3.x or 2.x (resolved by demi)'\n  }\n});\n\nconsole.log('Vue component compiled and mounted in the browser!');","lang":"typescript","description":"This quickstart demonstrates how to use `vue-inbrowser-compiler` to dynamically compile and run a Vue Single File Component (SFC) in the browser, showing how `vue-inbrowser-compiler-demi` facilitates the underlying Vue 2/3 compatibility without direct user intervention."},"warnings":[{"fix":"For in-browser Vue compilation, interact directly with the 'vue-inbrowser-compiler' package. Ensure correct peer dependencies are installed for your target Vue version.","message":"vue-inbrowser-compiler-demi is primarily an internal dependency for vue-inbrowser-compiler. Direct interaction or import of its modules by end-user applications is generally not intended and may lead to unexpected behavior or API instability.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"Always keep vue-inbrowser-compiler-demi and vue-inbrowser-compiler updated to their latest patch versions to ensure full compatibility with the latest Vue releases.","message":"Compatibility with specific Vue minor versions (e.g., Vue 3.3.x) sometimes requires patch updates to vue-inbrowser-compiler-demi or its dependent packages. Incompatibility can lead to compilation failures.","severity":"breaking","affected_versions":"<4.72.4"},{"fix":"Ensure your project's `package.json` includes either `vue-template-compiler` (for Vue 2) or `@vue/compiler-sfc` (for Vue 3) as a direct dependency or devDependency, matching the Vue version in use. For mixed environments, both may be needed.","message":"When targeting Vue 2, the `vue-template-compiler` peer dependency must be installed. For Vue 3, `@vue/compiler-sfc` is required. Failing to install the correct compiler for your project's Vue version will result in compilation errors.","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":"Run `npm install vue-template-compiler` or `yarn add vue-template-compiler`.","cause":"Attempting to compile a Vue 2 component without `vue-template-compiler` installed, which is a required peer dependency for Vue 2 compilation.","error":"Error: Cannot find module 'vue-template-compiler'"},{"fix":"Run `npm install @vue/compiler-sfc` or `yarn add @vue/compiler-sfc`.","cause":"Attempting to compile a Vue 3 component without `@vue/compiler-sfc` installed, which is a required peer dependency for Vue 3 compilation.","error":"Error: Cannot find module '@vue/compiler-sfc'"},{"fix":"Ensure that Vue itself is loaded and available in the browser's global scope (`window.Vue`) or explicitly passed in the `scope` option of the `run` function provided by `vue-inbrowser-compiler` if executing in an isolated context.","cause":"The in-browser compiler or the compiled component tries to access Vue's global API (e.g., `Vue.config`) but Vue is not properly exposed in the global scope or context where `run` is executed.","error":"TypeError: Cannot read properties of undefined (reading 'config') or similar Vue global API access issues"}],"ecosystem":"npm"}