{"id":14284,"library":"vue-inbrowser-compiler-sucrase","title":"Vue In-Browser Compiler (Sucrase)","description":"This package provides the capability to compile Vue components, including Single File Components (SFCs), pseudo-JSX, and standard template strings, directly within the browser environment. It is built on Sucrase for fast TypeScript and modern JavaScript transformations. Currently at version 4.72.4, it is actively maintained as a core part of the `vue-styleguidist` project, implying a consistent release cadence aligned with its parent project's needs. Its key differentiator is enabling dynamic, in-browser compilation of Vue code, which is essential for live code playgrounds, documentation generators, and interactive component editors. It abstracts away the complexities of browser-based parsing and transformation of Vue syntax, allowing developers to render components from string inputs without server-side compilation or heavy build tools.","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","sucrase","acorn","typescript"],"install":[{"cmd":"npm install vue-inbrowser-compiler-sucrase","lang":"bash","label":"npm"},{"cmd":"yarn add vue-inbrowser-compiler-sucrase","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-inbrowser-compiler-sucrase","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime dependency for the compiled Vue components to function.","package":"vue","optional":false},{"reason":"Provides utility functions essential for the compiler's operations.","package":"vue-inbrowser-compiler-utils","optional":false}],"imports":[{"note":"The primary function for compiling Vue component strings. Best used with ESM imports in modern browser environments.","wrong":"const compile = require('vue-inbrowser-compiler-sucrase').compile","symbol":"compile","correct":"import { compile } from 'vue-inbrowser-compiler-sucrase'"},{"note":"Utility to detect if a given code string is a Vue Single File Component. Follows standard named import patterns.","wrong":"const { isCodeVueSfc } = require('vue-inbrowser-compiler-sucrase')","symbol":"isCodeVueSfc","correct":"import { isCodeVueSfc } from 'vue-inbrowser-compiler-sucrase'"},{"note":"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.","wrong":"const { adaptCreateElement } = require('vue-inbrowser-compiler-sucrase')","symbol":"adaptCreateElement","correct":"import { adaptCreateElement } from 'vue-inbrowser-compiler-sucrase'"}],"quickstart":{"code":"import { compile } from 'vue-inbrowser-compiler-sucrase';\n\n/**\n * Dynamically compiles a Vue component string into a Vue component options object.\n * This function uses `new Function()` for execution, making it suitable for browser environments.\n * Note: For JSX input that explicitly needs `h`, you would also import `adaptCreateElement`\n * and pass `{ jsx: '__pragma__(h)' }` to `compile`, then invoke the resulting function\n * with `func(adaptCreateElement)`.\n */\nfunction getVueComponentOptions(codeString) {\n  try {\n    const compiledOutput = compile(codeString, {});\n    // The compiled script returns a Vue component options object or an app instance\n    const componentFactory = new Function(compiledOutput.script);\n    return componentFactory();\n  } catch (e) {\n    console.error('Error compiling code:', e);\n    return null;\n  }\n}\n\n// 1. Example: Compile a basic Vue template string with data and methods.\nconst basicTemplateCode = `\n<template>\n  <div>\n    <h1>Hello from Compiler!</h1>\n    <button @click=\"count++\">Clicked {{ count }} times</button>\n  </div>\n</template>\n<script>\nexport default {\n  data() {\n    return { count: 0 };\n  },\n  methods: {\n    // Example method, though direct template expressions are often sufficient\n  }\n}\n</script>\n<style>\n  div { border: 1px solid #ccc; padding: 10px; }\n  h1 { color: #007bff; }\n  button { padding: 8px 15px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }\n  button:hover { background-color: #0056b3; }\n</style>\n`;\n\nconst BasicComponentOptions = getVueComponentOptions(basicTemplateCode);\nconsole.log('Successfully compiled basic template:', BasicComponentOptions);\n\n// 2. Example: Compile a simple pseudo-JSX string (which the compiler transforms into a Vue template).\nconst pseudoJsxCode = `\nlet greeting = 'Browser';\n\n<div>\n  <p>Hello, {{ greeting }}!</p>\n  <input type=\"text\" v-model=\"greeting\" placeholder=\"Enter name\" />\n</div>\n`;\nconst PseudoJsxComponentOptions = getVueComponentOptions(pseudoJsxCode);\nconsole.log('Successfully compiled pseudo-JSX:', PseudoJsxComponentOptions);\n\n// In a real application, you would then mount these options using Vue.createApp (Vue 3) or new Vue() (Vue 2).\n// For instance:\n// import { createApp } from 'vue';\n// if (BasicComponentOptions) {\n//   createApp(BasicComponentOptions).mount('#my-app-element');\n// }\n","lang":"javascript","description":"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."},"warnings":[{"fix":"Refer to Sucrase's documentation for supported syntax and transformations. While `BubleConfig` is accepted, not all historical Buble features may be fully supported or behave identically.","message":"The package `vue-inbrowser-compiler-sucrase` utilizes Sucrase for faster compilation. However, the `compile` function's second argument is often typed as `BubleConfig`, a remnant from previous implementations or a compatibility layer. Developers should be aware that the actual compilation engine is Sucrase, which has specific transform limitations compared to full Babel or TypeScript compilers.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"For server-side Vue compilation, consider `@vue/compiler-sfc` or other build-time tools like Vite or Webpack with Vue loaders.","message":"This package is designed for in-browser compilation and should not be used for server-side compilation with Node.js. Its dependencies and runtime expectations are optimized for browser environments.","severity":"gotcha","affected_versions":"*"},{"fix":"Pass `{ jsx: '__pragma__(h)' }` as the second argument to `compile`, and ensure the resulting function is invoked with `adaptCreateElement`: `const func = new Function('__pragma__', compiledCode.script); return func(adaptCreateElement);`","message":"When compiling JSX inputs that require an `h` function (createElement), you must explicitly configure the `jsx` option in the `compile` function's configuration and provide the `adaptCreateElement` function.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"Verify your project's `vue` version (e.g., in `package.json`) and upgrade if necessary to satisfy the `'>=2'` peer dependency.","message":"Compatibility with Vue versions is governed by the peer dependency `vue: '>=2'`. Ensure your project's Vue version meets this requirement to avoid runtime issues with compiled components.","severity":"gotcha","affected_versions":">=4.0.0"}],"env_vars":null,"search_vec":"'4.72.4':48 'abstract':102 'acorn':139 'activ':51 'align':68 'allow':116 'away':103 'base':109 'browser':4,31,83,108,137 'browser-bas':107 'build':131 'built':35 'cadenc':67 'capabl':11 'code':87,93 'compil':5,13,84,128,135 'complex':105 'compon':15,19,99,120 'consist':65 'core':55 'current':45 'develop':117 'differenti':77 'direct':28 'document':95 'dynam':80 'editor':100 'enabl':79 'environ':32 'essenti':90 'fast':39 'file':18 'generat':96 'heavi':130 'impli':63 'in-brows':2,81 'includ':16 'input':123 'interact':98 'javascript':43,133 'jsx':23 'key':76 'live':92,136 'maintain':52 'modern':42 'need':74 'packag':8 'parent':71 'pars':110 'part':56 'playground':94 'project':62,72 'provid':9 'pseudo':22 'pseudo-jsx':21 'releas':66 'render':119 'server':126 'server-sid':125 'sfcs':20 'side':127 'singl':17 'standard':25 'string':27,122 'styleguidist':61 'sucras':6,37,138 'syntax':115 'templat':26 'tool':132 'transform':44,112 'typescript':40,140 'version':47 'vue':1,14,60,86,114,134 'vue-styleguidist':59 'within':29 'without':124","created_at":"2026-04-20T01:58:54.625065+00:00","updated_at":"2026-04-20T01:58:54.625065+00:00","problems":[{"fix":"If compiling JSX input, ensure `compile` is called with `{ jsx: '__pragma__(h)' }` and the `new Function()`'s result is invoked with `adaptCreateElement` as `func(adaptCreateElement)`.","cause":"Attempting to compile or run JSX output without providing the Vue `createElement` (or `h`) function, or incorrect JSX pragma configuration.","error":"ReferenceError: h is not defined"},{"fix":"Ensure 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.","cause":"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.","error":"SyntaxError: Cannot use import statement outside a module"},{"fix":"Verify 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`.","cause":"The input code string did not result in a valid Vue component options object, or `new Function()` failed to return a value.","error":"TypeError: Cannot read properties of undefined (reading 'template')"},{"fix":"Carefully 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.","cause":"The template section within your input string contains invalid or malformed Vue template syntax that the compiler cannot parse.","error":"Vue template compiler cannot compile template"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":"https://vue-styleguidist.github.io","github":"https://github.com/vue-styleguidist/vue-styleguidist","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vue-inbrowser-compiler-sucrase","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework","serialization"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}