README.md

@wterm/vue

Vue component for wterm — a terminal emulator for the web.

Install

npm install @wterm/dom @wterm/vue

Usage

<script setup lang="ts">
import { Terminal } from "@wterm/vue";
import "@wterm/vue/css";
</script>

<template>
  <Terminal />
</template>

By default, typed input is echoed back to the terminal. Listen to the data event when you need control over input:

<script setup lang="ts">
import { useTemplateRef } from "vue";
import { Terminal } from "@wterm/vue";
import "@wterm/vue/css";

const term = useTemplateRef("term");

function onData(chunk: string) {
  socket.send(chunk);
}
</script>

<template>
  <Terminal ref="term" @data="onData" />
</template>

The WASM binary is embedded in the package — no extra setup required. To serve it separately instead, pass wasmUrl.

<Terminal> Props

Prop	Type	Default	Description
cols	number	80	Initial column count
rows	number	24	Initial row count
wasmUrl	string	—	Optional URL to serve the WASM binary separately (embedded by default)
theme	string	—	Theme name (e.g. "solarized-dark", "monokai", "light")
autoResize	boolean	false	Auto-resize based on container dimensions
cursorBlink	boolean	false	Enable cursor blinking animation
debug	boolean	false	Enable debug mode. Exposes a DebugAdapter on the underlying WTerm instance for inspecting escape sequences, cell data, render performance, and unhandled CSI sequences.

Standard DOM attributes (class, style, id, ARIA props, etc.) are forwarded to the root <div> via inheritAttrs.

Events

Event	Payload	Description
data	(data: string)	Emitted when the terminal produces data (user input or host response). When no listener is attached, input is echoed back automatically.
title	(title: string)	Emitted when the terminal title changes via an escape sequence.
resize	(cols: number, rows: number)	Emitted after the terminal is resized.
ready	(wt: WTerm)	Emitted once after WTerm.init() resolves, carrying the underlying WTerm instance.
error	(err: unknown)	Emitted if WASM loading or initialization fails.

Template Ref

Access imperative methods via a template ref:

<script setup lang="ts">
import { useTemplateRef } from "vue";
import { Terminal, type WTerm } from "@wterm/vue";

const term = useTemplateRef("term");

function onReady(wt: WTerm) {
  wt.write("hello\r\n");
  term.value?.resize(120, 40);
}
</script>

<template>
  <Terminal ref="term" @ready="onReady" />
</template>

Member	Type	Description
write	(data: string | Uint8Array) => void	Write data to the terminal
resize	(cols: number, rows: number) => void	Resize the terminal
focus	() => void	Focus the terminal
instance	WTerm | null	Underlying WTerm instance (null before mount)

Themes

Import the stylesheet to get the default theme and all built-in themes:

<script setup lang="ts">
import "@wterm/vue/css";
</script>

Switch themes via the theme prop:

<Terminal theme="monokai" />

Built-in: solarized-dark, monokai, light. Define custom themes with CSS custom properties.

License

Apache-2.0