Registry /
web-framework / vue-inbrowser-compiler-demi
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
compile
✓ import { compile } from 'vue-inbrowser-compiler'
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.
run
✓ import { run } from 'vue-inbrowser-compiler'
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.
VueInBrowserCompilerOptions
✓ import type { VueInBrowserCompilerOptions } from 'vue-inbrowser-compiler'
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.
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.
import { compile, run } from 'vue-inbrowser-compiler';
const componentCode = `
<template>
<div :style="{ color: dynamicColor }">
<h1>Hello, {{ name }}!</h1>
<p>This is a Vue {{ vueVersion }} component compiled in-browser.</p>
<button @click="changeColor">Change Color</button>
</div>
</template>
<script>
export default {
props: {
name: { type: String, default: 'Developer' },
vueVersion: { type: String, default: '?' }
},
data() {
return { dynamicColor: 'blue' };
},
methods: {
changeColor() {
this.dynamicColor = this.dynamicColor === 'blue' ? 'red' : 'blue';
}
}
}
</script>
<style scoped>
h1 { margin-bottom: 5px; }
p { margin-top: 5px; }
</style>
`;
// vue-inbrowser-compiler-demi invisibly handles the Vue 2/3 specific compilation logic here.
// The 'compile' function automatically detects the Vue version based on installed peer dependencies.
const compiledComponent = compile(componentCode, {
// Optionally pass compiler options, e.g., for Buble (ES2015 transpilation)
// buble: { target: { ie: 11 } }
});
// Create a mount point in the DOM
const appRoot = document.createElement('div');
appRoot.id = 'app';
document.body.appendChild(appRoot);
// Run the compiled component. For a real app, you'd ensure Vue is globally available.
// Here, we simulate by passing Vue to the context if needed for standalone execution.
// This example assumes Vue is already loaded in the browser context.
run(compiledComponent.code, {
mountPoint: appRoot,
scope: {
name: 'World',
vueVersion: '3.x or 2.x (resolved by demi)'
}
});
console.log('Vue component compiled and mounted in the browser!');
Errors
Common errors & fixes
Error: Cannot find module 'vue-template-compiler'
Attempting to compile a Vue 2 component without `vue-template-compiler` installed, which is a required peer dependency for Vue 2 compilation.
fixRun `npm install vue-template-compiler` or `yarn add vue-template-compiler`.
Error: Cannot find module '@vue/compiler-sfc'
Attempting to compile a Vue 3 component without `@vue/compiler-sfc` installed, which is a required peer dependency for Vue 3 compilation.
fixRun `npm install @vue/compiler-sfc` or `yarn add @vue/compiler-sfc`.
TypeError: Cannot read properties of undefined (reading 'config') or similar Vue global API access issues
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.
fixEnsure 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.
Audit
Dependencies
@vue/compiler-sfcrequiredRequired for compiling Vue 3 Single File Components.
vuerequiredThe core Vue runtime library, required for component functionality across Vue 2 and Vue 3.
vue-template-compilerrequiredRequired for compiling Vue 2 Single File Components. This is specific to Vue 2.