Vue 终端开发桌面 vue-tui

JavaScript 写一个像 Claude Code、Gemini CLI 那样的终端应用，绕不开的名字通常是 React Ink

vue-tui 安装运行时

npm install @vue-tui/runtime vue

<script setup lang="ts"> import { shallowRef } from "vue" import { Box, Text, useInput } from "@vue-tui/runtime" const count = shallowRef(0) useInput((input) => { if (input === "+") count.value++ if (input === "-") count.value-- }) </script> <template> <Box> <Text>Count: </Text> <Text bold color="green">{{ count }}</Text> <Text dimColor> (+/- to change)</Text> </Box> </template>

项目同时支持 Vue SFC 和 JSX。喜欢模板语法的开发者可以继续写<template>，

vue-tui 使用 Yoga 计算布局，也就是 React Native 和 Ink 背后的 Flexbox 引擎。核心组件<Box>负责方向、对齐、间距、边框和背景，<Text>负责文字样式、截断和换行。

这意味着前端开发者熟悉的flexDirection、justifyContent、alignItems等布局思路，可以继续沿用。

它不是用 CSS 画终端，而是把 Flexbox 的布局模型映射到字符网格。这一步很关键，因为复杂 TUI 真正难维护的部分，通常就是布局系统

vue-tui 0.1 一组偏完整的交互能力：

• 键盘与焦点管理：支持按键监听、Tab 导航和组件级焦点控制

• 现代终端输入：支持 Kitty keyboard protocol 和 bracketed paste

• 动画能力：提供基于帧的动画驱动

• 窗口响应式：终端尺寸变化后可以重新计算界面

• 无障碍支持：能够检测屏幕阅读器，并提供线性化输出

• 组件测试：在隔离的模拟终端中渲染组件、输入按键、逐帧断言结果

@vue-tui/testing。开发者可以渲染组件，模拟用户按下+、-或方向键，再检查最后一帧输出是否符合预期

vue-tui 提供了实验性的 CLI，执行vue-tui dev后，可以通过 Vite 驱动终端里的 HMR。修改app.vue，界面会立即更新。

vue-tui 大量参考了 React Ink 的成熟设计，包括组件模型、Yoga 布局、焦点系统和渲染管线。

参考：

Tui

Vue TermUI | The Modern Terminal UI Framework

GitHub - vuejs-ai/vue-tui: The Vue framework for terminal UIs. SFC & JSX, Yoga flexbox, HMR, and testing out of the box. · GitHub

GitHub - Simon-He95/vue-tui: Vue 3 terminal UI toolkit for browser DOM and CLI stdout: components, ANSI rendering, markdown transcripts, log views, and agent consoles. · GitHub