CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-vue--repl

Vue component for editing Vue components with interactive REPL functionality.

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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;
}
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@vue/repl@4.7.x
Publish Source
CLI
Badge
tessl/npm-vue--repl badge