Vue In-Browser Compiler Demi

Common errors

• Error: Cannot find module 'vue-template-compiler'

  cause Attempting to compile a Vue 2 component without `vue-template-compiler` installed, which is a required peer dependency for Vue 2 compilation.
  fix Run `npm install vue-template-compiler` or `yarn add vue-template-compiler`.

• Error: Cannot find module '@vue/compiler-sfc'

  cause Attempting to compile a Vue 3 component without `@vue/compiler-sfc` installed, which is a required peer dependency for Vue 3 compilation.
  fix Run `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

  cause 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.
  fix Ensure 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.

Warnings

• gotcha vue-inbrowser-compiler-demi is primarily an internal dependency for vue-inbrowser-compiler. Direct interaction or import of its modules by end-user applications is generally not intended and may lead to unexpected behavior or API instability.
  Fix: For in-browser Vue compilation, interact directly with the 'vue-inbrowser-compiler' package. Ensure correct peer dependencies are installed for your target Vue version.
• breaking Compatibility with specific Vue minor versions (e.g., Vue 3.3.x) sometimes requires patch updates to vue-inbrowser-compiler-demi or its dependent packages. Incompatibility can lead to compilation failures.
  Fix: Always keep vue-inbrowser-compiler-demi and vue-inbrowser-compiler updated to their latest patch versions to ensure full compatibility with the latest Vue releases.
• gotcha When targeting Vue 2, the `vue-template-compiler` peer dependency must be installed. For Vue 3, `@vue/compiler-sfc` is required. Failing to install the correct compiler for your project's Vue version will result in compilation errors.
  Fix: Ensure your project's `package.json` includes either `vue-template-compiler` (for Vue 2) or `@vue/compiler-sfc` (for Vue 3) as a direct dependency or devDependency, matching the Vue version in use. For mixed environments, both may be needed.

Install

• npm install vue-inbrowser-compiler-demi npm
• yarn add vue-inbrowser-compiler-demi yarn
• pnpm add vue-inbrowser-compiler-demi pnpm

Imports

• 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.

Quickstart

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!');