or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

editor-components.mdfile-system.mdimport-map-management.mdindex.mdpreview-system.mdrepl-component.mdstore-management.md
tile.json

tessl/npm-vue--repl

Vue component for editing Vue components with interactive REPL functionality.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@vue/repl@4.7.x

To install, run

npx @tessl/cli install tessl/npm-vue--repl@4.7.0

index.mddocs/

Vue REPL

Vue REPL provides a Vue 3 Single File Component (SFC) REPL (Read-Eval-Print Loop) that enables developers to create interactive Vue.js code editors and playgrounds. It offers two editor options: CodeMirror for lightweight editing experiences and Monaco Editor with full Volar language service support including autocomplete, type inference, and semantic highlighting.

Package Information

  • Package Name: @vue/repl
  • Package Type: npm
  • Language: TypeScript/Vue
  • Installation: npm install @vue/repl

Core Imports

import { Repl } from "@vue/repl";
import CodeMirror from "@vue/repl/codemirror-editor";
import Monaco from "@vue/repl/monaco-editor";

For core utilities:

import { useStore, File, useVueImportMap } from "@vue/repl/core";

For standalone preview:

import { Sandbox } from "@vue/repl";

Basic Usage

CodeMirror Editor (Lightweight)

import { Repl } from "@vue/repl";
import CodeMirror from "@vue/repl/codemirror-editor";

// In your Vue component template
<template>
  <Repl :editor="CodeMirror" />
</template>

Monaco Editor (Full Language Service)

import { Repl } from "@vue/repl";
import Monaco from "@vue/repl/monaco-editor";

// In your Vue component template
<template>
  <Repl :editor="Monaco" :showCompileOutput="true" />
</template>

Advanced Store Configuration

import { Repl, useStore, useVueImportMap } from "@vue/repl";
import Monaco from "@vue/repl/monaco-editor";

const { importMap, vueVersion } = useVueImportMap({
  runtimeDev: 'custom-vue-runtime-url',
  vueVersion: '3.4.0'
});

const store = useStore({
  builtinImportMap: importMap,
  vueVersion,
  showOutput: ref(true),
  outputMode: ref('preview')
}, location.hash);

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

Architecture

Vue REPL is built around several key components:

  • REPL Component: Main interface orchestrating editor and preview panels
  • Store System: Reactive state management for files, compilation, and configuration
  • Editor Abstraction: Pluggable editor system supporting CodeMirror and Monaco
  • Compilation Engine: Real-time Vue SFC compilation with error reporting
  • Preview System: Sandboxed iframe execution environment with runtime error handling
  • Import Map Management: Dynamic module resolution and Vue version switching

Capabilities

REPL Component

Main REPL interface component that provides a complete code editing and preview experience with configurable layout, themes, and features.

interface ReplProps {
  theme?: 'dark' | 'light';
  previewTheme?: boolean;
  editor: EditorComponentType;
  store?: Store;
  autoResize?: boolean; 
  showCompileOutput?: boolean;
  showOpenSourceMap?: boolean;
  showImportMap?: boolean;
  showSsrOutput?: boolean;
  showTsConfig?: boolean;
  clearConsole?: boolean;
  layout?: 'horizontal' | 'vertical';
  layoutReverse?: boolean;
  ssr?: boolean;
  previewOptions?: PreviewOptions;
  editorOptions?: EditorOptions;
  splitPaneOptions?: SplitPaneOptions;
}

interface PreviewOptions {
  headHTML?: string;
  bodyHTML?: string;
  placeholderHTML?: string;
  customCode?: {
    importCode?: string;
    useCode?: string;
  };
  showRuntimeError?: boolean;
  showRuntimeWarning?: boolean;
}

interface EditorOptions {
  showErrorText?: string | false;
  autoSaveText?: string | false;
  monacoOptions?: monaco.editor.IStandaloneEditorConstructionOptions;
}

interface SplitPaneOptions {
  codeTogglerText?: string;
  outputTogglerText?: string;
}

REPL Component

Store Management

Reactive store system for managing files, compilation state, and REPL configuration with serialization support for URL persistence.

function useStore(
  state?: Partial<StoreState>,
  serializedState?: string
): ReplStore;

interface ReplStore {
  // File management
  files: Record<string, File>;
  activeFile: File;
  activeFilename: string;
  mainFile: string;
  
  // Compilation state
  errors: (string | Error)[];
  compiler: typeof defaultCompiler;
  loading: boolean;
  
  // Methods
  init(): void;
  setActive(filename: string): void;
  addFile(filename: string | File): void;
  deleteFile(filename: string): void;
  renameFile(oldFilename: string, newFilename: string): void;
  serialize(): string;
  deserialize(serializedState: string): void;
  getFiles(): Record<string, string>;
  setFiles(newFiles: Record<string, string>, mainFile?: string): Promise<void>;
}

Store Management

Preview System

Standalone preview and sandbox components for displaying compiled Vue components with runtime error handling and theme support.

interface SandboxProps {
  store: Store;
  show?: boolean;
  ssr?: boolean;
  clearConsole?: boolean;
  theme?: 'dark' | 'light';
  previewOptions?: PreviewOptions;
  autoStoreInit?: boolean;
}

Preview System

File System

File model and utilities for managing code files with compilation results and editor state persistence.

class File {
  filename: string;
  code: string;
  hidden: boolean;
  compiled: {
    js: string;
    css: string;
    ssr: string;
    clientMap: string;
    ssrMap: string;
  };
  editorViewState: editor.ICodeEditorViewState | null;
  readonly language: string;
  
  constructor(filename: string, code?: string, hidden?: boolean);
}

function compileFile(store: Store, file: File): Promise<(string | Error)[]>;

File System

Import Map Management

Vue-specific import map utilities for managing CDN URLs, version switching, and module resolution in the browser environment.

function useVueImportMap(defaults?: {
  runtimeDev?: string | (() => string);
  runtimeProd?: string | (() => string);
  serverRenderer?: string | (() => string);
  vueVersion?: string | null;
}): {
  productionMode: Ref<boolean>;
  importMap: ComputedRef<ImportMap>;
  vueVersion: Ref<string | null>;
  defaultVersion: string;
};

interface ImportMap {
  imports?: Record<string, string | undefined>;
  scopes?: Record<string, Record<string, string>>;
}

function mergeImportMap(a: ImportMap, b: ImportMap): ImportMap;

Import Map Management

Editor Components

Pluggable editor system with CodeMirror and Monaco implementations, both conforming to a standard interface for seamless switching.

interface EditorProps {
  value: string;
  filename: string;
  readonly?: boolean;
  mode?: EditorMode;
}

interface EditorEmits {
  (e: 'change', code: string): void;
}

type EditorComponentType = Component<EditorProps>;
type EditorMode = 'js' | 'css' | 'ssr';

Editor Components

Constants

/** Version of Vue language service used for Monaco editor integration */
const languageToolsVersion: string;

Types

type OutputModes = 'preview' | 'ssr output' | EditorMode;

interface SFCOptions {
  script?: Partial<SFCScriptCompileOptions>;
  style?: Partial<SFCAsyncStyleCompileOptions>;
  template?: Partial<SFCTemplateCompileOptions>;
}

interface StoreState {
  files: Record<string, File>;
  activeFilename: string;
  mainFile: string;
  template: {
    welcomeSFC?: string;
    newSFC?: string;
  };
  builtinImportMap: ImportMap;
  errors: (string | Error)[];
  showOutput: boolean;
  outputMode: OutputModes;
  sfcOptions: SFCOptions;
  ssrOutput: {
    html: string;
    context: unknown;
  };
  compiler: typeof defaultCompiler;
  vueVersion: string | null;
  locale: string | undefined;
  typescriptVersion: string;
  dependencyVersion: Record<string, string>;
  reloadLanguageTools?: (() => void) | undefined;
}