跪拜 Guibai
← All articles
Vue.js

Vue-tui 0.1 Brings Vue to the Terminal, Challenging React Ink's CLI Monopoly

By Forever7_ ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Vue-tui breaks React Ink's long-standing monopoly on interactive terminal UIs, giving the Vue ecosystem its own first-class CLI tooling. For any team that standardizes on Vue, this removes a major friction point — no more context-switching to React just to build a terminal app.

Summary

For years, building interactive terminal interfaces meant one thing: React Ink. Vue developers who needed to create CLI tools, scaffolding, or terminal dashboards had to switch mental models and syntax entirely. Vue-tui 0.1, shared by Vue creator Evan You, changes that by providing a native terminal UI framework built on Vue 3's Composition API and SFCs.

The framework supports hot module replacement (HMR) in the terminal, component-level testing, and a Flexbox-based layout engine (Yoga) shared with React Native. Developers can use `useInput` for keyboard events, `Box` and `Text` for layout, and the standard `createApp` pattern for mounting — all without leaving the Vue ecosystem.

Vue-tui also includes built-in focus management, paste event handling, window resize adaptation, and frame animation support. The project is officially maintained under the Vue umbrella, with a stable core API already in place.

Takeaways
— Vue-tui is an official terminal UI framework for Vue 3, using native Vue syntax (Composition API, SFCs, reactive state).
— It supports HMR in the terminal — code changes refresh the UI without restarting the process.
— The layout engine is Yoga, the same one used by React Ink and React Native, providing Flexbox-based layout.
— Built-in testing utilities allow component-level terminal tests with simulated keyboard input.
— Keyboard input, focus management, paste events, window resize, and frame animations are all handled out of the box.
— The project is officially maintained by the Vue team and its core API is considered stable.
Conclusions

Vue-tui's release signals that the Vue ecosystem is maturing beyond the browser, directly competing with React in the CLI space.

The use of Yoga for layout means Vue-tui and React Ink share a common rendering foundation, making performance and capabilities roughly comparable.

By eliminating the need to learn React for terminal work, Vue-tui lowers the barrier for Vue developers to build developer tools, which could accelerate the creation of Vue-native CLI frameworks and scaffolding.

The inclusion of HMR and testing from day one shows a focus on developer experience that matches what Vue developers expect from web development.

Evan You's public endorsement (retweeting the release) adds significant credibility and signals long-term investment in the project.

Concepts & terms
React Ink
A React-based library for building interactive command-line interfaces using component-based architecture. It was previously the dominant solution for terminal UIs in the JavaScript ecosystem.
Yoga Layout Engine
A cross-platform layout engine that implements Flexbox. It is used by React Native, React Ink, and now Vue-tui to handle positioning and sizing of UI elements in non-browser environments.
HMR (Hot Module Replacement)
A development feature that updates modules in a running application without a full reload. In Vue-tui, it means terminal UI changes appear instantly as code is edited.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗