Registry /
web-framework / vue-inbrowser-compiler-utils
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.
parseComponent
✓ import { parseComponent } from 'vue-inbrowser-compiler-utils';
✗ const { parseComponent } = require('vue-inbrowser-compiler-utils');
Primarily an ESM module. CommonJS require() is generally not recommended and might require specific transpilation for older Node.js versions.
cleanVueSrc
✓ import { cleanVueSrc } from 'vue-inbrowser-compiler-utils';
✗ import cleanVueSrc from 'vue-inbrowser-compiler-utils/cleanVueSrc';
CleanVueSrc is a named export. Direct path imports for specific utilities are not the standard approach for this package.
evaluate
✓ import { evaluate } from 'vue-inbrowser-compiler-utils';
✗ import { runCode } from 'vue-inbrowser-compiler-utils';
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.
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.
import { parseComponent, evaluate } from 'vue-inbrowser-compiler-utils';
import { compile } from 'vue-inbrowser-compiler'; // vue-inbrowser-compiler is a companion package
// Simulate a Vue component string, potentially with JSX in the render function
const vueComponentSrc = `
<template>
<div>Hello from {{ name }}!</div>
</template>
<script setup>
import { ref } from 'vue';
const name = ref('Quickstart');
// Example of JSX usage in a render function (requires compilation configuration)
const render = () => (<div class="jsx-example">JSX says Hi!</div>);
</nscript>
<style scoped>
.jsx-example { color: blue; }
</style>
`;
// Step 1: Parse the Vue component using vue-inbrowser-compiler-utils
const parsed = parseComponent(vueComponentSrc);
console.log('Parsed Component Script:', parsed.script);
console.log('Parsed Component Template:', parsed.template);
// Step 2: (Optional, if you want to clean up the source further)
// const cleanedScript = cleanVueSrc(parsed.script);
// Step 3: Compile the parsed component (this step uses vue-inbrowser-compiler)
// In a real browser environment, 'Vue' must be globally available or injected.
const compiledCode = compile(parsed.script, parsed.template, {
is : parsed.scriptLang === 'ts' ? 'ts' : 'js',
templateLang: parsed.templateLang,
// Ensure buble is configured for JSX if needed, e.g., via compilerOptions
compilerOptions: {
isTS: parsed.scriptLang === 'ts',
// other options for buble/jsx compilation
}
});
console.log('Compiled Code:', compiledCode.script);
// Step 4: Evaluate the compiled code in a browser-like environment
// This is typically done in the browser; for Node.js, it simulates.
// In a browser, you would typically mount this result.
try {
const componentInstance = evaluate(compiledCode.script, compiledCode.template, {
// context for the evaluation, e.g., global Vue instance
Vue: typeof Vue !== 'undefined' ? Vue : {} // Provide Vue if available
});
console.log('Component evaluation successful (check browser for full effect).');
// In a real browser app, you would now mount componentInstance
} catch (e) {
console.error('Error during evaluation:', e);
}
Errors
Common errors & fixes
ReferenceError: Vue is not defined
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).
fixEnsure 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`.
TypeError: Cannot read properties of undefined (reading 'script') (or similar for 'template')
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.
fixVerify 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.
SyntaxError: Unexpected token '<' (or 'JSX element 'div' has no corresponding closing tag')
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.
fixEnsure 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.
Audit
Dependencies
vuerequiredPeer dependency for runtime compatibility with Vue components being processed.