open-vui

Vue Adapter for OpenTUI.

Adapted from the Solid Adapter.

WIP This is a work in progress, some features may not work as expected.

See the OpenTUI Docs for more details.

Installation

bun install open-vui

Usage

1. Add preload script to bunfig.toml (enables .vue imports):

preload = ["open-vui/preload"]

2. Create an App.vue file with a Vue SFC using OpenTUI tags:

<template>
  <box border :style="{ width: 30, height: 7 }">
    <text>Hello from Vue</text>
  </box>
</template>

3. Render it:

import { render } from "open-vui";
import App from "./App.vue";

await render(App);

4. Run with bun index.ts.

Notes

• Visible text must be inside a <text> element. (Whitespace-only nodes between elements are ignored.)

Table of Contents

• Core Concepts
  • Components
• API Reference
  • render(node, rendererOrConfig?)
  • testRender(node, options?)
  • extend(components)
  • getComponentCatalogue()
  • Hooks
  • Portal
  • Dynamic
• Components
  • Layout & Display
  • Input
  • Code & Diff
  • Text Modifiers

Core Concepts

Components

open-vui exposes Vue template elements that map to OpenTUI renderables:

See the OpenTUI Components documentation for more details.

• Layout & Display: text, box, scrollbox, ascii_font
• Input: input, textarea, select, tab_select
• Code & Diff: code, line_number, diff
• Text Modifiers: span, strong, b, em, i, u, br, a

API Reference

render(node, rendererOrConfig?)

Render a Vue component tree into a CLI renderer. If rendererOrConfig is omitted, a renderer is created with default options.

Parameters:

• node: Vue component.
• rendererOrConfig?: CliRenderer instance or CliRendererConfig.

testRender(node, options?)

Create a test renderer for snapshots and interaction tests.

Create a test renderer for snapshots and interaction tests.

extend(components)

Register custom renderables as template elements.

extend({ customBox: CustomBoxRenderable })

getComponentCatalogue()

Returns the current component catalogue that powers JSX tag lookup.

Hooks

• useRenderer()
• onResize(callback)
• useTerminalDimensions()
• useKeyboard(handler, options?)
• usePaste(handler)
• useSelectionHandler(handler)
• useTimeline(options?)

Components

Layout & Display

• text: styled text container
• box: layout container with borders, padding, and flex settings
• scrollbox: scrollable container
• ascii_font: ASCII art text renderer

Input

• input: single-line text input
• textarea: multi-line text input
• select: list selection
• tab_select: tab-based selection

Code & Diff

• code: syntax-highlighted code blocks
• line_number: line-numbered code display with diff/diagnostic helpers
• diff: unified or split diff viewer

Text Modifiers

These must appear inside a text component:

• span: inline styled text
• strong/b: bold text
• em/i: italic text
• u: underline text
• br: line break
• a: link text with href