@vue/repl Documentation

When using @vue/repl in a Vite project, you must exclude it from dependency optimization to ensure it works correctly. Add @vue/repl to the optimizeDeps.exclude array in your vite.config.ts.

// vite.config.ts
import { defineConfig } from 'vite'
export default defineConfig({
  optimizeDeps: {
    exclude: ['@vue/repl'],
  },
  // ...
})

The environment is configured via loadMonacoEnv(store), which sets the global MonacoEnvironment.getWorker function. This allows the editor to spawn a specialized vueWorker when the language label is 'vue'.

When the Vue worker is initialized, it receives a WorkerMessage containing:

• tsVersion: The current TypeScript version.
• tsLocale: The locale for TypeScript.
• pkgDirUrl, pkgFileTextUrl, pkgLatestVersionUrl: Resource links for package management.
• typescriptLib: Path to the TypeScript library.

The REPL allows switching between different Vue versions. When vueVersion is updated, the store automatically fetches the corresponding @vue/compiler-sfc from a CDN (defaulting to jsDelivr) and recompiles all .vue files to ensure compatibility (e.g., for Vapor mode support).

You can also provide resourceLinks to customize how the compiler or TypeScript libraries are fetched.

store.vueVersion = ref('3.5.0');

// Customizing resource resolution
store.resourceLinks = {
  vueCompilerUrl: (version) => `https://my-cdn.com/compiler-sfc@${version}/dist/compiler-sfc.esm-browser.js`
};

The REPL supports different output modes for rendering or processing code. The available modes are:

• 'preview': Standard browser preview.
• 'ssr output': Output specifically for Server-Side Rendering.
• EditorMode values: 'js', 'css', or 'ssr'.

If you only need to display the output (the preview) without providing an editing interface, use the Sandbox component instead of Repl. You still need to initialize a store using useStore to manage the state.

<script setup>
import { ref } from 'vue'
import { Sandbox, useStore } from '@vue/repl'

const query = new URLSearchParams(location.search)

const store = useStore(
  {
    vueVersion: ref(query.get('vue')),
  },
  location.hash,
)
</script>

<template>
  <Sandbox :store="store" />
</template>

For a full-featured IDE experience, use the Monaco editor. This provides Volar support, autocomplete, type inference, and semantic highlighting. This option results in a heavier bundle as it loads .dts files from a CDN and is better suited for standalone applications.

<script setup>
import { Repl } from '@vue/repl'
import Monaco from '@vue/repl/monaco-editor'
// import '@vue/repl/style.css' // no longer needed after 3.0
</script>

<template>
  <Repl :editor="Monaco" />
</template>

For a lightweight editing experience suitable for embedding, use the CodeMirror editor. This version has no intellisense and results in fewer network requests and a smaller bundle size. Note that since version 3.0, importing @vue/repl/style.css is no longer required.

<script setup>
import { Repl } from '@vue/repl'
import CodeMirror from '@vue/repl/codemirror-editor'
// import '@vue/repl/style.css' // no longer needed after 3.0
</script>

<template>
  <Repl :editor="CodeMirror" />
</template>

The compileFile function relies on the Store object to access compiler configurations. You can influence the compilation process by providing options through store.sfcOptions:

• store.sfcOptions.template: Passes options to the Vue template compiler (e.g., compilerOptions).
• store.sfcOptions.script: Passes options to the Vue script compiler (e.g., customElement).
• store.sfcOptions.style: Passes options to the Vue style compiler.

Custom Element Detection: Custom elements can be identified via store.sfcOptions.script.customElement, which accepts:

• A boolean
• A RegExp (to test the filename)
• A function (to test the filename)

If a file is identified as a custom element, styles are compiled into the component object rather than being extracted as a separate CSS string.

The toVisualizer function generates a specialized URL for the evanw.github.io/source-map-visualization tool. It encodes both the source code and the RawSourceMap into a single base64-encoded binary string appended to the URL. This allows developers to instantly visualize how their source maps map back to the original code in an external web-based debugger.

import { toVisualizer } from './sourcemap';

const visualizerUrl = toVisualizer(code, sourceMap);
// Returns a URL like: https://evanw.github.io/source-map-visualization#<base64_data>