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 allows developers to build interactive terminal user interfaces (TUIs) using Vue.js. It replaces the manual handling of terminal control sequences and layout calculations with a component-based architecture, enabling the creation of complex terminal apps with the same developer experience as building for the web.
How it works
The framework provides a custom Vue 3 renderer that targets the terminal instead of the DOM. It uses the Yoga layout engine (the same one used by React Native) to implement Flexbox layouts within the terminal. Developers can write interfaces using Vue Single File Components (SFCs) or JSX, and the framework handles the rendering, keyboard input, mouse events, and focus management.
Who it’s for
Developers who want to build sophisticated command-line tools with interactive UIs but prefer the reactive component model and tooling of Vue.js over low-level terminal manipulation.
Highlights
- Vue-Native Development: Supports Vue SFCs and JSX for building terminal interfaces.
- Flexbox Layout: Implements a responsive layout system powered by Yoga.
- Developer Experience: Includes an experimental Vite plugin for Hot Module Replacement (HMR) directly in the terminal.
- Comprehensive Tooling: Provides a dedicated testing harness for deterministic component-level terminal testing.
- AI Agent Support: Includes a visual development guide specifically designed to help AI coding agents iterate on TUI layouts by inspecting rendered screens.