Evan You Shared: Vue-tui 0.1 Released! Vue Finally Enters the Terminal!

Frontend developers who have worked on terminal CLIs and command-line interaction tools should know this: before, if you wanted to create a good-looking, interactive terminal interface, you basically had to use React Ink.

Vue developers have always been at a disadvantage: you could build your entire website with Vue, but when it came to terminal tools, you had to switch to React syntax.

Now vue-tui is here, an official native terminal UI framework for Vue, completely solving this pain point.

No React Needed, Exclusive Advantages for Vue Developers

' fill='%23FFFFFF'%3E%3Crect x='249' y='126' width='1' height='1'%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)

Previously, developing interactive terminal interfaces relied solely on React Ink, forcing Vue developers to switch tech stacks at a high cost. Vue-tui perfectly fits the Vue tech stack, with maximum advantages:

1. Seamless Tech Stack Unification Natively supports Vue3, setup syntax, SFC single-file components, and the reactive API. Vue syntax used in daily development can be directly reused, with no need to learn React-related knowledge.

2. Ultimate Development Experience Supports terminal HMR (Hot Module Replacement). Code changes refresh the interface in real-time without restarting the service, greatly improving CLI development efficiency.

3. Built-in Engineering Capabilities Comes with official testing tools that support component-level terminal testing, eliminating the need to manually encapsulate complex terminal simulation logic.

4. Aligns with Vue Development Thinking Manages terminal input, focus, and window state through the Composition API, consistent with web development logic, with no learning disconnect.

Minimalist and Practical Code Examples

Entirely native Vue syntax, simple and easy to get started, covering core interaction, mounting, and testing scenarios.

Basic Interactive Counter (SFC Full Version)

<script setup lang="ts">import { shallowRef } from "vue";import { Box, Text, useInput } from "@vue-tui/runtime";// Pure Vue reactive stateconst count = shallowRef(0);// Listen for terminal keyboard inputuseInput((input) => {  if (input === "+") count.value++;  if (input === "-") count.value--;});</script><template>  <Box gap={2}>    <Text>Count: </Text>    <Text bold color="green">{{ count }}</Text>    <Text dimColor>Press +/- to adjust value</Text>  </Box></template>

Project Entry File

import { createApp } from "@vue-tui/runtime";import App from "./app.vue";// Mount directly to the terminalcreateApp(App).mount();

Component Unit Test Example

Comes with a built-in testing library for one-click simulation of keyboard input and verification of terminal output:

import { test, expect } from"vitest";import { render } from"@vue-tui/testing";import Counter from"./app.vue";test("Counter responds correctly to key presses", async () => {const { lastFrame, stdin } = await render(Counter);  expect(lastFrame()).toContain("Count: 0");// Simulate pressing the + keyawait stdin.write("+");  expect(lastFrame()).toContain("Count: 1");});

Terminal Layout and Styling: Minimalist Flex Approach

Based on the Yoga layout engine (same origin as React Ink and React Native), it abandons cumbersome character layout and directly uses the common frontend Flex layout, with zero learning cost.

Box Layout Container The core terminal container, supporting horizontal/vertical arrangement, spacing, margins, alignment, borders, and backgrounds. Properties are basically the same as CSS Flex.

Text Text Styling Supports bold, color change, dimming, underline, and text truncation, quickly achieving various terminal text styles.

Spacer Auto-fill Placeholder Automatically fills remaining space, easily achieving justified alignment and evenly distributed layouts.

Simple Layout Example (Justified Status Bar)

<template>  <Box direction="row" justifyContent="space-between" gap={3}>    <Text color="blue">Terminal Tool v1.0</Text>    <Spacer />    <Text dimColor>Running</Text>  </Box></template>

Comprehensive Terminal Interaction Capabilities

' fill='%23FFFFFF'%3E%3Crect x='249' y='126' width='1' height='1'%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)The framework encapsulates the underlying terminal logic, eliminating the need to manually manipulate read/write streams, providing all interaction capabilities out of the box:

• Keyboard Listening: Captures all keys, arrow keys, and modifier keys for quick interactive commands.
• Focus Management: Supports Tab key focus switching and manual focusing, suitable for terminal forms.
• Paste Events: Fully captures batch pasted text, suitable for AI conversations and batch input scenarios.
• Window Adaptation: Listens to terminal width and height in real-time, automatically adapting to window resizing.
• Animation Capabilities: Built-in frame animation for developing terminal mini-games and dynamic progress interfaces.
• Non-Interactive Output: Supports string rendering, suitable for CI logs and pipeline snapshots.

Should Vue Developers Jump In?

Conclusion first: Very much worth it.

As long as you need to build Node scaffolding, CLI tools, terminal panels, local AI terminal clients, or operation and maintenance monitoring interfaces, vue-tui is the optimal solution.

Core Reasons to Jump In

1. No need to switch tech stacks, zero waste of Vue experience.
2. Development experience far surpasses traditional terminal development: hot reload, componentization, testability.
3. Officially maintained by Vue, reliable ecosystem, core API is already stable.