vuejs-ai/vue-tui

What it solves

vue-tui is a Vue-native application framework designed to build interactive terminal user interfaces (TUIs). It allows developers to create complex terminal apps using the same component-based architecture and reactive state management found in modern web development, eliminating the need to manually manage terminal escape codes or low-level screen painting.

How it works

The framework provides a custom Vue 3 renderer that translates Vue components into terminal output. It uses the Yoga layout engine (the same one used by React Native) to implement Flexbox layout in the terminal. Developers can write interfaces using Vue Single File Components (SFCs) or JSX/TSX, and the framework handles the rendering, input processing, and focus management through a set of dedicated composables and components.

Who it’s for

It is aimed at Node.js developers who want to build sophisticated terminal applications with a professional development experience, including Hot Module Replacement (HMR) via a Vite plugin and a deterministic testing environment.

Highlights

• Vue-Native Workflow: Support for Vue SFCs, JSX, and TSX for building terminal UIs.
• Flexbox Layout: Integrated Yoga engine for responsive terminal layouts.
• Developer Experience: Experimental HMR support via @vue-tui/vite for instant terminal updates.
• Comprehensive Tooling: Includes a dedicated testing package (@vue-tui/testing) to simulate terminal input and inspect frames.
• Rich Component Library: Provides high-level components like <ScrollBox>, <Spinner>, and <Table>.
• Input Handling: Normalized composables for managing text, paste, and key events.