vuejs-ai/vue-tui

The Vue framework for terminal UIs. SFC & JSX, Yoga flexbox, HMR, and testing out of the box.

What it solves

vue-tui 讓開發者能使用 Vue.js 建立互動式終端使用者介面（TUI）。它以元件為基礎的架構取代手動處理終端控制序列與版面計算，讓開發者能以與開發網頁相同的體驗，打造複雜的終端應用程式。

How it works

此框架提供一個自訂的 Vue 3 renderer，目標是終端而非 DOM。它使用 Yoga 版面引擎（與 React Native 相同）在終端內實作 Flexbox 版面配置。開發者可以使用 Vue 單檔元件（SFC）或 JSX 撰寫介面，框架則負責渲染、鍵盤輸入、滑鼠事件與焦點管理。

Who it’s for

想要以 Vue.js 的反應式元件模型與工具鏈，打造具互動 UI 的高階命令列工具，而不想直接操作低階終端指令的開發者。

Highlights

Vue-Native Development: 支援 Vue SFC 與 JSX 來構建終端介面。
Flexbox Layout: 以 Yoga 為動力實作彈性版面系統。
Developer Experience: 包含實驗性的 Vite 插件，可在終端直接執行熱模組替換（HMR）。
Comprehensive Tooling: 提供專屬測試工具，用於確定性的元件層級終端測試。
AI Agent Support: 包含視覺開發指南，特別設計協助 AI 程式編寫代理透過檢視渲染畫面來迭代 TUI 版面。