0
# REPL Component
1

2
The main REPL component provides a complete code editing and preview experience with configurable layout, themes, and editor options. It orchestrates the editor panels and preview output with real-time compilation.
3

4
## Capabilities
5

6
### Repl Component
7

8
Main Vue component that provides the complete REPL interface with editor and output panels.
9

10
```typescript { .api }
11
/**
12
 * Main REPL component providing editor and preview functionality
13
 * @param props - Configuration options for the REPL
14
 */
15
interface ReplProps {
16
  /** UI theme for the REPL interface */
17
  theme?: 'dark' | 'light';
18
  /** Whether preview iframe should inherit the theme */
19
  previewTheme?: boolean;
20
  /** Editor component to use (required) - CodeMirror or Monaco */
21
  editor: EditorComponentType;
22
  /** Custom store instance, defaults to new store */
23
  store?: Store;
24
  /** Whether panels should auto-resize */
25
  autoResize?: boolean;
26
  /** Show compilation output tab in preview */
27
  showCompileOutput?: boolean;
28
  /** Show source map visualization option */
29
  showOpenSourceMap?: boolean;
30
  /** Show import map editor tab */
31
  showImportMap?: boolean;
32
  /** Show SSR output tab */
33
  showSsrOutput?: boolean;
34
  /** Show TypeScript config editor tab */
35
  showTsConfig?: boolean;
36
  /** Clear console on file changes */
37
  clearConsole?: boolean;
38
  /** Panel layout orientation */
39
  layout?: 'horizontal' | 'vertical';
40
  /** Reverse the position of editor and preview panels */
41
  layoutReverse?: boolean;
42
  /** Enable server-side rendering mode */
43
  ssr?: boolean;
44
  /** Preview iframe customization options */
45
  previewOptions?: PreviewOptions;
46
  /** Editor-specific configuration options */
47
  editorOptions?: EditorOptions;
48
  /** Split pane UI customization options */
49
  splitPaneOptions?: SplitPaneOptions;
50
}
51

52
interface PreviewOptions {
53
  /** Custom HTML to inject into preview iframe head */
54
  headHTML?: string;
55
  /** Custom HTML to inject into preview iframe body */
56
  bodyHTML?: string;
57
  /** HTML to show when preview is loading */
58
  placeholderHTML?: string;
59
  /** Custom code injection for advanced use cases */
60
  customCode?: {
61
    /** Custom import statements to add to preview */
62
    importCode?: string;
63
    /** Custom code to execute in preview context */
64
    useCode?: string;
65
  };
66
  /** Whether to display runtime errors in preview */
67
  showRuntimeError?: boolean;
68
  /** Whether to display runtime warnings in preview */
69
  showRuntimeWarning?: boolean;
70
}
71

72
interface EditorOptions {
73
  /** Custom error display text, or false to hide */
74
  showErrorText?: string | false;
75
  /** Custom auto-save indicator text, or false to hide */
76
  autoSaveText?: string | false;
77
  /** Monaco editor specific configuration options */
78
  monacoOptions?: monaco.editor.IStandaloneEditorConstructionOptions;
79
}
80

81
interface SplitPaneOptions {
82
  /** Text for code panel toggle button */
83
  codeTogglerText?: string;
84
  /** Text for output panel toggle button */
85
  outputTogglerText?: string;
86
}
87
```
88

89
**Usage Examples:**
90

91
```typescript
92
import { Repl } from "@vue/repl";
93
import Monaco from "@vue/repl/monaco-editor";
94

95
// Basic usage with Monaco editor
96
<template>
97
  <Repl :editor="Monaco" />
98
</template>
99

100
// Advanced configuration
101
<template>
102
  <Repl 
103
    :editor="Monaco"
104
    theme="dark"
105
    :previewTheme="true"
106
    layout="vertical"
107
    :showCompileOutput="true"
108
    :showImportMap="true"
109
    :previewOptions="{
110
      headHTML: '<meta name=\"viewport\" content=\"width=device-width\">',
111
      showRuntimeError: true
112
    }"
113
    :editorOptions="{
114
      monacoOptions: {
115
        fontSize: 14,
116
        minimap: { enabled: false }
117
      }
118
    }"
119
  />
120
</template>
121
```
122

123
### Repl Methods
124

125
Methods exposed by the Repl component for programmatic control.
126

127
```typescript { .api }
128
/**
129
 * Reload the preview iframe, useful for clearing runtime state
130
 */
131
function reload(): void;
132
```
133

134
**Usage Example:**
135

136
```typescript
137
<template>
138
  <Repl ref="repl" :editor="Monaco" />
139
  <button @click="$refs.repl.reload()">Reload Preview</button>
140
</template>
141
```
142

143
### Auto-Save Model
144

145
The Repl component supports v-model for auto-save functionality.
146

147
```typescript { .api }
148
/**
149
 * Auto-save model value - whether files are automatically saved
150
 */
151
const autoSave: ModelRef<boolean>;
152
```
153

154
**Usage Example:**
155

156
```typescript
157
<template>
158
  <Repl 
159
    v-model:autoSave="autoSaveEnabled"
160
    :editor="Monaco" 
161
  />
162
  <label>
163
    <input type="checkbox" v-model="autoSaveEnabled" />
164
    Enable Auto-save
165
  </label>
166
</template>
167

168
<script setup>
169
import { ref } from 'vue';
170
const autoSaveEnabled = ref(true);
171
</script>
172
```
173

174
## Default Values
175

176
The Repl component provides sensible defaults for all optional props:
177

178
- `theme`: 'light'
179
- `previewTheme`: false
180
- `autoResize`: true
181
- `showCompileOutput`: true
182
- `showOpenSourceMap`: false
183
- `showImportMap`: true
184
- `showSsrOutput`: false
185
- `showTsConfig`: true
186
- `clearConsole`: true
187
- `layoutReverse`: false
188
- `ssr`: false
189
- `layout`: 'horizontal'
190
- All option objects default to empty objects: `{}`
191

192
## Error Handling
193

194
The Repl component includes built-in error handling:
195

196
- **Editor prop validation**: Throws error if editor prop is not provided
197
- **Compilation errors**: Displayed in the errors panel and compilation output
198
- **Runtime errors**: Captured and displayed in preview when `previewOptions.showRuntimeError` is true
199
- **Import resolution errors**: Shown in compilation output with helpful messages