vue-tui

Public beta — the @vue-tui/runtime API is stabilizing toward 1.0; dev-mode HMR is still experimental. Bug reports welcome.

vue-tui is a Vue-native application framework for interactive terminal UIs. Build with components, develop with HMR, test with confidence.

• Vue SFC & JSX — write terminal interfaces with <template>, TSX, or both
• Flexbox layout — powered by Yoga, the same engine behind React Native
• Dev toolkit (experimental) — HMR in the terminal via the @vue-tui/vite plugin (npm run dev)
• Input & focus — keyboard handling, focus management, Tab navigation, Kitty keyboard protocol
• Testing harness — out-of-the-box component-level terminal testing — render, simulate input, assert frames
• Coding-agent visual development guide — a version-matched method for running the real app, inspecting the screen after terminal control sequences are applied, operating it, and iterating from what the agent sees (guide)

Quick Start

There are two ways to use vue-tui — scaffold a full project, or drop the runtime into an existing one.

1. Scaffold a project (recommended)

A ready-to-develop setup: Vue SFCs and a terminal HMR dev server via the @vue-tui/vite plugin.

npx tiged vuejs-ai/vue-tui-starter/vite my-app
cd my-app
npm install
npm run dev      # in-process terminal dev server with HMR

Edit src/app.vue and watch the terminal update instantly.

2. Use the runtime standalone

@vue-tui/runtime is a standalone Vue renderer, independent of the @vue-tui/vite plugin. Author components as SFCs and mount them with createApp, using your own build:

<!-- app.vue -->
<script setup lang="ts">
import { shallowRef } from "vue";
import { Box, Text, useInput } from "@vue-tui/runtime";

const count = shallowRef(0);

useInput((input) => {
  // "+" is Shift+"=" on most keyboards, so accept the bare "=" too.
  if (input === "+" || input === "=") count.value++;
  if (input === "-") count.value--;
});
</script>

<template>
  <Box>
    <Text>Count: </Text>
    <Text bold color="green">{{ count }}</Text>
    <Text dimColor> (+/= and - to change)</Text>
  </Box>
</template>

// main.ts
import { createApp } from "@vue-tui/runtime";
import App from "./app.vue";

createApp(App).mount();

• Compile the SFCs with @vitejs/plugin-vue, or use JSX with @vitejs/plugin-vue-jsx.
• For hot-reload (HMR) support while developing, add the @vue-tui/vite plugin: plugins: [vue(), vueTui()].

Table of Contents

• Quick Start
• Packages
• Examples
• Components
• High-level Components
• Composables (Hooks)
• Testing
• Visual development with coding agents
• Development
• Contributing
• Credits
• License

Packages

Examples

Components

<Box> and <Text> also support targeted @mousedown, @mouseup, @click, and @wheel handlers in full-screen mode.

High-level Components

The @vue-tui/components package adds higher-level components composed from the runtime primitives — published separately from the core.

Composables (Hooks)