vue-wterm

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

[!IMPORTANT] Status: Work in Progress

Install

npm install vue-wterm

yarn add vue-wterm

pnpm add vue-wterm

Usage

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

const terminalRef = useTemplateRef('terminalRef')

function handleReady() {
  terminalRef.value?.write('> echo Hello, World!\r\n')
  terminalRef.value?.write('\u001B[1;31mThis is a red message\u001B[0m\r\n')
}
</script>

<template>
  <Terminal
    @ready="handleReady"
    theme="monokai"
    cursor-blink
    :rows="24"
    :cols="96"
    ref="terminalRef"
  />
</template>

Props

• cols?: number default 80
• rows?: number default 24
• wasmUrl?: string
• autoResize?: boolean default false
• cursorBlink?: boolean default false
• theme?: 'default' | 'solarized-dark' | 'monokai' | 'light' | string
• onData?: (data: string) => void
• onTitle?: (title: string) => void
• onResize?: (cols: number, rows: number) => void
• onReady?: (terminal: WTerm) => void
• onError?: (error: unknown) => void

Exposes

The Terminal component exposes:

• write(data)
• resize(cols, rows)
• focus()
• instance

License

MIT License © 2026-PRESENT ntnyq