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

이 프레임워크는 DOM 대신 터미널을 대상으로 하는 커스텀 Vue 3 렌더러를 제공합니다. React Native와 동일한 Yoga 레이아웃 엔진을 사용해 터미널 내에서 Flexbox 레이아웃을 구현합니다. 개발자는 Vue Single File Components(SFC) 또는 JSX로 인터페이스를 작성하고, 프레임워크가 렌더링, 키보드 입력, 마우스 이벤트 및 포커스 관리를 처리합니다.

Who it’s for

인터랙티브 UI가 포함된 고급 명령줄 도구를 만들고 싶지만, 저수준 터미널 조작보다 Vue.js의 반응형 컴포넌트 모델과 툴링을 선호하는 개발자를 위한 것입니다.

Highlights

Vue-Native Development: 터미널 인터페이스 구축을 위해 Vue SFC와 JSX를 지원합니다.
Flexbox Layout: Yoga 기반의 반응형 레이아웃 시스템을 구현합니다.
Developer Experience: 터미널에서 직접 Hot Module Replacement(HMR)를 수행하는 실험적인 Vite 플러그인을 포함합니다.
Comprehensive Tooling: 결정론적인 컴포넌트 수준 터미널 테스트를 위한 전용 테스트 하니스 제공.
AI Agent Support: 렌더링된 화면을 검사하여 AI 코딩 에이전트가 TUI 레이아웃을 반복하도록 돕는 시각적 개발 가이드를 포함합니다.