Registry /
web-framework / vue-inbrowser-compiler-sucrase
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-sucrase'
✗ const compile = require('vue-inbrowser-compiler-sucrase').compile
The primary function for compiling Vue component strings. Best used with ESM imports in modern browser environments.
isCodeVueSfc
✓ import { isCodeVueSfc } from 'vue-inbrowser-compiler-sucrase'
✗ const { isCodeVueSfc } = require('vue-inbrowser-compiler-sucrase')
Utility to detect if a given code string is a Vue Single File Component. Follows standard named import patterns.
adaptCreateElement
✓ import { adaptCreateElement } from 'vue-inbrowser-compiler-sucrase'
✗ const { adaptCreateElement } = require('vue-inbrowser-compiler-sucrase')
Required when configuring the compiler to output JSX that uses a custom pragma and needs Vue's `h` function. Ensure this is passed to the compiled function.
Demonstrates how to compile various string formats (Vue SFC, pseudo-JSX, standard template) into runnable Vue component options objects using `compile` for in-browser dynamic component creation.
import { compile } from 'vue-inbrowser-compiler-sucrase';
/**
* Dynamically compiles a Vue component string into a Vue component options object.
* This function uses `new Function()` for execution, making it suitable for browser environments.
* Note: For JSX input that explicitly needs `h`, you would also import `adaptCreateElement`
* and pass `{ jsx: '__pragma__(h)' }` to `compile`, then invoke the resulting function
* with `func(adaptCreateElement)`.
*/
function getVueComponentOptions(codeString) {
try {
const compiledOutput = compile(codeString, {});
// The compiled script returns a Vue component options object or an app instance
const componentFactory = new Function(compiledOutput.script);
return componentFactory();
} catch (e) {
console.error('Error compiling code:', e);
return null;
}
}
// 1. Example: Compile a basic Vue template string with data and methods.
const basicTemplateCode = `
<template>
<div>
<h1>Hello from Compiler!</h1>
<button @click="count++">Clicked {{ count }} times</button>
</div>
</template>
<script>
export default {
data() {
return { count: 0 };
},
methods: {
// Example method, though direct template expressions are often sufficient
}
}
</script>
<style>
div { border: 1px solid #ccc; padding: 10px; }
h1 { color: #007bff; }
button { padding: 8px 15px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
button:hover { background-color: #0056b3; }
</style>
`;
const BasicComponentOptions = getVueComponentOptions(basicTemplateCode);
console.log('Successfully compiled basic template:', BasicComponentOptions);
// 2. Example: Compile a simple pseudo-JSX string (which the compiler transforms into a Vue template).
const pseudoJsxCode = `
let greeting = 'Browser';
<div>
<p>Hello, {{ greeting }}!</p>
<input type="text" v-model="greeting" placeholder="Enter name" />
</div>
`;
const PseudoJsxComponentOptions = getVueComponentOptions(pseudoJsxCode);
console.log('Successfully compiled pseudo-JSX:', PseudoJsxComponentOptions);
// In a real application, you would then mount these options using Vue.createApp (Vue 3) or new Vue() (Vue 2).
// For instance:
// import { createApp } from 'vue';
// if (BasicComponentOptions) {
// createApp(BasicComponentOptions).mount('#my-app-element');
// }
Errors
Common errors & fixes
ReferenceError: h is not defined
Attempting to compile or run JSX output without providing the Vue `createElement` (or `h`) function, or incorrect JSX pragma configuration.
fixIf compiling JSX input, ensure `compile` is called with `{ jsx: '__pragma__(h)' }` and the `new Function()`'s result is invoked with `adaptCreateElement` as `func(adaptCreateElement)`. SyntaxError: Cannot use import statement outside a module
The compiled script (`compiledCode.script`) might contain ES module syntax (`import`/`export`) which `new Function()` cannot directly execute in a non-module browser context, or bundler issues.
fixEnsure the compilation configuration (if available) targets an appropriate ES version for `new Function()`. If using a bundler, ensure it correctly handles the compiled output. Consider using a `script type="module"` if executing the output directly in a browser HTML file.
TypeError: Cannot read properties of undefined (reading 'template')
The input code string did not result in a valid Vue component options object, or `new Function()` failed to return a value.
fixVerify that your input string is a well-formed Vue component (SFC, pseudo-JSX resulting in template+data, or `new Vue({...})` structure). Check console for other compilation errors before this `TypeError`. Vue template compiler cannot compile template
The template section within your input string contains invalid or malformed Vue template syntax that the compiler cannot parse.
fixCarefully review the `<template>` content or the template portion of your pseudo-JSX/Vue app code for typos, unclosed tags, incorrect directives, or other syntax errors.
Audit
Dependencies
vuerequiredRuntime dependency for the compiled Vue components to function.
vue-inbrowser-compiler-utilsrequiredProvides utility functions essential for the compiler's operations.