{"id":15035,"library":"vue-inbrowser-compiler-independent-utils","title":"Vue In-Browser Compiler Independent Utilities","description":"vue-inbrowser-compiler-independent-utils is a utility package designed to provide core functionalities for in-browser Vue compilation without requiring a direct runtime dependency on Vue itself. It serves as a foundational layer for other tools within the `vue-styleguidist` ecosystem, such as `vue-docgen-api` and `vue-inbrowser-compiler-utils`, by encapsulating compiler-related tasks like parsing or transformation. This independence allows it to be used in various contexts where full Vue runtime might not be present or desired. The current stable version is 4.71.1, with its release cadence being tightly coupled to the `vue-styleguidist` monorepo, often seeing patch and minor updates driven by Vue compatibility fixes, new feature support, and general improvements across its related packages. Its key differentiator is its isolated nature, ensuring minimal overhead and suitability for environments that only require compiler-adjacent logic.","status":"active","version":"4.71.1","language":"javascript","source_language":"en","source_url":"https://github.com/vue-styleguidist/vue-styleguidist","tags":["javascript","vue","compile","live","browser","acorn","typescript"],"install":[{"cmd":"npm install vue-inbrowser-compiler-independent-utils","lang":"bash","label":"npm"},{"cmd":"yarn add vue-inbrowser-compiler-independent-utils","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-inbrowser-compiler-independent-utils","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Primarily designed for ESM usage. The `compile` function from this package (or its parent `vue-inbrowser-compiler`) is used to convert Vue code strings into executable JavaScript component options.","wrong":"const { compile } = require('vue-inbrowser-compiler-independent-utils')","symbol":"compile","correct":"import { compile } from 'vue-inbrowser-compiler-independent-utils'"},{"note":"This utility function detects if a given code string represents a Vue Single File Component (SFC) by checking for <template> or <script> tags. It is a named export.","wrong":"import isCodeVueSfc from 'vue-inbrowser-compiler-independent-utils'","symbol":"isCodeVueSfc","correct":"import { isCodeVueSfc } from 'vue-inbrowser-compiler-independent-utils'"},{"note":"Used for processing and adding scoped CSS styles, a common task in Vue component compilation. It's a named export, ensure correct casing.","wrong":"import { AddScopedStyle } from 'vue-inbrowser-compiler-independent-utils'","symbol":"addScopedStyle","correct":"import { addScopedStyle } from 'vue-inbrowser-compiler-independent-utils'"}],"quickstart":{"code":"import { compile, isCodeVueSfc } from 'vue-inbrowser-compiler-independent-utils';\n\n// Example Vue component code as a string\nconst vueComponentCode = `\n<template>\n  <div class=\"message\">\n    <h1>{{ msg }}</h1>\n    <button @click=\"increment\">Count: {{ count }}</button>\n  </div>\n</template>\n\n<script lang=\"ts\">\nexport default {\n  name: 'MyComponent',\n  data() {\n    return {\n      msg: 'Hello from Independent Utils!',\n      count: 0\n    };\n  },\n  methods: {\n    increment() {\n      this.count++;\n    }\n  }\n};\n</script>\n\n<style scoped>\n.message {\n  color: #42b983;\n  font-family: Arial, sans-serif;\n  border: 1px solid #ddd;\n  padding: 20px;\n  border-radius: 8px;\n  text-align: center;\n}\nh1 {\n  margin-bottom: 15px;\n}\nbutton {\n  background-color: #3498db;\n  color: white;\n  padding: 10px 20px;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n  font-size: 16px;\n}\nbutton:hover {\n  background-color: #2980b9;\n}\n</style>\n`;\n\n// Check if it's an SFC\nconst isSFC = isCodeVueSfc(vueComponentCode);\nconsole.log(`Is the code a Vue SFC? ${isSFC}`);\n\nif (isSFC) {\n  // Compile the Vue component code (this will typically return script and style strings)\n  // Note: The 'compile' function in this context usually prepares the code for a runtime Vue environment,\n  // often returning a function body or object that Vue can then instantiate.\n  try {\n    const compiledResult = compile(vueComponentCode, {}); // Pass an empty config or specific BubleConfig if needed\n    console.log('Compiled Script:\\n', compiledResult.script.substring(0, 200) + '...');\n    console.log('Compiled Style:\\n', compiledResult.style.substring(0, 100) + '...');\n\n    // In a real browser environment with Vue loaded, you would then execute 'compiledResult.script'\n    // and dynamically mount the component.\n    // const componentOptions = new Function(compiledResult.script)();\n    // new Vue({ el: '#app', render: h => h(componentOptions) });\n    console.log('Code successfully processed by independent utilities.');\n  } catch (error) {\n    console.error('Error during compilation:', error);\n  }\n} else {\n  console.log('The provided code is not a valid Vue Single File Component.');\n}\n","lang":"typescript","description":"This quickstart demonstrates how to use `isCodeVueSfc` to detect Vue SFCs and `compile` to process Vue component code strings into script and style parts suitable for in-browser compilation."},"warnings":[{"fix":"Consult the `vue-styleguidist` GitHub repository for specific migration guides. Changes in Vue's reactivity system (Vue 2 vs Vue 3) or template compilation can often lead to breakage in tools that parse Vue code.","message":"Major version upgrades of `vue-inbrowser-compiler-independent-utils` may introduce breaking changes, particularly if underlying parsing or compilation logic, or supported Vue versions (e.g., Vue 2 to Vue 3 syntax), are updated. Always review the full changelog for the `vue-styleguidist` monorepo.","severity":"breaking","affected_versions":">=4.0"},{"fix":"Ensure you understand the role of this package within the `vue-styleguidist` toolchain. For full in-browser compilation and execution of Vue components, you typically need `vue-inbrowser-compiler` itself, which leverages these utilities.","message":"This package, despite its name, is designed to work in conjunction with the broader `vue-inbrowser-compiler` ecosystem. While it is 'Vue independent' in its direct runtime dependencies, its utilities are tailored for Vue-specific code processing. Misunderstanding its scope can lead to incorrect usage in non-Vue contexts or expecting it to fully compile Vue components without the `vue-inbrowser-compiler` parent package.","severity":"gotcha","affected_versions":">=4.0"},{"fix":"Provide appropriate configuration to the compiler functions, if available, to match your target Vue version. Test compilation thoroughly against your specific Vue runtime environment. Consider using `@vue/compat` for Vue 2 to Vue 3 migrations.","message":"When using `compile` or other code transformation utilities, be aware that the output might depend on the target Vue version (Vue 2 vs Vue 3) and the internal compiler configuration. Syntax changes between Vue major versions (e.g., `v-model` usage, functional components, render function API) can significantly alter compilation results.","severity":"gotcha","affected_versions":">=4.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Verify that the input `vueComponentCode` is valid and well-formed. Ensure any configuration passed to `compile` (e.g., `BubleConfig`) is correct and compatible with the code. Log the full output of `compile` to inspect the actual return value.","cause":"The `compile` function might have failed or returned an unexpected structure, often due to malformed Vue code input or an incompatible compiler configuration.","error":"TypeError: Cannot read properties of undefined (reading 'script')"},{"fix":"Do not execute raw Vue component strings directly. Use `isCodeVueSfc` to identify Vue code, and then `compile` it into executable JavaScript. The `script` property of the `compile` output should then be used appropriately, often `new Function(compiledResult.script)()` to get component options.","cause":"This usually occurs when trying to directly execute a string containing HTML/Vue template syntax as JavaScript. The browser or Node.js runtime expects pure JavaScript, not template code. This package's `compile` output is JavaScript, but the raw input is not.","error":"SyntaxError: Unexpected token '<'"}],"ecosystem":"npm"}