I wanted to build a toy coding agent. Started by looking into the TUI layer. That rabbit hole turned into a full terminal UI framework.

• Write Vue components for the terminal.
• Develop them with Vite HMR.

Meet VUE-TUI: https://t.co/SOyHgf4zBd https://t.co/IYh6pTuOA0

vuejs-ai/vue-tui

Source: https://github.com/vuejs-ai/vue-tui

vue-tui

Early stage — under active development. Bug reports welcome, but not recommended for production use yet.

Vue for the terminal. Build interactive CLI apps with components, flexbox, and HMR.

• Vue SFC & JSX — write terminal UIs with <template>, TSX, or both
• Flexbox layout — powered by Yoga, the same engine behind React Native
• Focus system — built-in focus management with Tab navigation
• Hot module replacement — instant feedback while developing
• First-class testing — render components, simulate input, assert frames

Packages

• @vue-tui/runtime — The core framework. A custom Vue 3 renderer that targets the terminal instead of the DOM. Provides components (Box, Text, Static, etc.), composables (useInput, useFocus, useExit, etc.), and a yoga-based flexbox layout engine.
• @vue-tui/cli — Development tool. Run vue-tui dev to start your app with Vite-powered HMR — edit a .vue file and see the terminal update instantly.
• @vue-tui/testing — Test harness. Render components in an isolated fake terminal, simulate keyboard input, and assert on visual output frame by frame.

Quick Example

// src/main.ts
import { createApp } from "@vue-tui/runtime";
import App from "./App.vue";

createApp(App).mount();

<!-- src/App.vue -->
<script setup lang="ts">
import { shallowRef } from "vue";
import { Box, Text, useInput } from "@vue-tui/runtime";

const count = shallowRef(0);

useInput((input) => {
  if (input === "+") count.value++;
  if (input === "-") count.value--;
});
</script>

<template>
  <Box>
    <Text>Count: </Text>
    <Text bold color="green">{{ count }}</Text>
    <!-- try changing this color -->
    <Text dimColor> (+/- to change)</Text>
  </Box>
</template>

Examples

Getting Started

npx tiged vuejs-ai/vue-tui-starter my-app
cd my-app
npm install
npm run dev

That’s it — try changing the color or text in App.vue and watch the terminal update instantly while keeping your component state.

To build and run:

npm run preview

Components

Hooks

Testing

The @vue-tui/testing package renders components in an isolated environment and lets you simulate input and assert visual output:

npm install -D @vue-tui/testing

import { defineComponent, ref } from "vue";
import { expect, test } from "vitest";
import { render } from "@vue-tui/testing";
import { Box, Text, useInput } from "@vue-tui/runtime";

test("counter responds to + and - keys", async () => {
  const Counter = defineComponent(() => {
    const count = ref(0);
    useInput((input) => {
      if (input === "+") count.value++;
      if (input === "-") count.value--;
    });
    return () => (
      <Box>
        <Text>Count: {count.value}</Text>
      </Box>
    );
  });

  const { lastFrame, stdin } = await render(Counter);
  expect(lastFrame()).toContain("Count: 0");

  await stdin.write("+");
  expect(lastFrame()).toContain("Count: 1");

  await stdin.write("-");
  expect(lastFrame()).toContain("Count: 0");
});

Development

Requires pnpm and Node.js 22+.

pnpm install          # install dependencies
vp run ready          # lint, typecheck, test, and build (the full check)
vp run -r test        # run tests across all packages
vp run -r build       # build all packages
vue-tui dev           # start an example with HMR

Caveats

• vue-tui enables raw mode by default so the terminal won’t echo keystrokes into your UI.
• Ctrl+C still exits — exitOnCtrlC defaults to true.
• For pure-output tools that don’t need input suppression, pass rawMode: false to mount().

Credits

vue-tui started as a Vue port of Ink, the library that proved terminal UIs could be built with the same component patterns we use on the web. The component model, yoga-based layout, focus system, rendering pipeline — all of it originates in Ink’s design, adapted to follow Vue’s philosophy and conventions. Thank you to Vadim Demedes, Sindre Sorhus, and the Ink contributors for creating such a solid foundation.

License

MIT

Yunfei He (@_hyf0): Been bored lately, so I’m gonna build a toy coding agent. Kicking off with the TUI layer!