by vuejs-ai
The Vue framework for terminal UIs. SFC & JSX, Yoga flexbox, HMR, and testing out of the box.
# Add to your Claude Code skills
git clone https://github.com/vuejs-ai/vue-tuiLast scanned: 6/20/2026
{
"issues": [],
"status": "PASSED",
"scannedAt": "2026-06-20T07:50:19.838Z",
"npmAuditRan": false,
"pipAuditRan": true,
"promptInjectionRan": true
}vue-tui is an open-source ai agents skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by vuejs-ai. The Vue framework for terminal UIs. SFC & JSX, Yoga flexbox, HMR, and testing out of the box. It has 116 GitHub stars.
Yes. vue-tui passed SkillsLLM's automated security scan — a dependency vulnerability audit plus prompt-injection heuristics — with no high-severity issues. You can read the full report in the Security Report section on this page.
Clone the repository with "git clone https://github.com/vuejs-ai/vue-tui" and add it to your Claude Code skills directory (see the Installation section above).
vue-tui is primarily written in TypeScript. It is open-source under vuejs-ai on GitHub, so you can review or fork the full source.
Yes. SkillsLLM lists many other AI Agents skills you can browse and compare side by side. Open the AI Agents category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh vue-tui against similar tools.
No comments yet. Be the first to share your thoughts!
Public beta — the
@vue-tui/runtimeAPI is stabilizing, and we're now seeking public feedback to lock it down before 1.0. The CLI and dev tooling remain experimental and may change. Feedback and bug reports are very welcome.
The Vue framework for terminal UIs. Build with components, develop with HMR, test with confidence.
<template>, TSX, or bothvue-tui devnpx tiged vuejs-ai/vue-tui-starter my-app
cd my-app
npm install
npm run dev
Edit app.vue and watch the terminal update instantly.
npm install @vue-tui/runtime
// 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>
<Text dimColor> (+/- to change)</Text>
</Box>
</template>
For non-interactive output — snapshots, CI logs, piped commands — renderToString(App) renders a single frame to a string instead of mounting.
| Package | Description |
|---|---|
@vue-tui/runtime |
The core framework — Vue 3 renderer for the terminal with components (Box, Text, Static, etc.), composables (useInput, useFocus, useApp, etc.), and yoga-based flexbox layout. API stabilizing. |
@vue-tui/cli |
Development tool — vue-tui dev starts your app with Vite-powered HMR. Experimental; may change. |
@vue-tui/testing |
Test harness — render in an isolated fake terminal, simulate input, assert output frame by frame |
| Example | Description |
|---|---|
basic-template |
Vue SFC with <template> syntax |
basic-jsx |
Same app in TSX |
coding-agent |
AI coding agent with LLM streaming and interactive UI |
flappy-bird |
Physics-based terminal game with reactive state and borders |
| Component | Description |
|---|---|
<Box> |
Flexbox container — direction, wrap, align, justify, gap, padding, margin, borders, background |
<Text> |
Styled text — color, bold, italic, underline, strikethrough, dimColor, wrap/truncate modes |
<Spacer> |
Expands to fill available space (flex-grow: 1) |
<Newline> |
Inserts line breaks (configurable count) |
<Static> |
Renders a list of items once, above the redrawn region |
<Transform> |
Applies a string transform function to each rendered line |
| Composable | Description |
|---|---|
useInput(handler, opts?) |
Handle keyboard input — receives (input, key) with modifier and arrow key detection |
usePaste(handler, opts?) |
Handle bracketed paste — receives the pasted text as a single event |
useFocus(opts?) |
Component-level focus — returns { isFocused, focus } |
useFocusManager() |
App-level focus control — focusNext(), focusPrevious(), focus(id) |
useApp() |
App lifecycle — { exit(error?), waitUntilRenderFlush() } |
useWindowSize() |
Reactive terminal dimensions — { columns, rows } |
useStdin() |
Access stdin stream and raw mode control |
useStdout() |
Write directly to stdout |
useStderr() |
Write directly to stderr |
useBoxMetrics(ref) |
Measure a <Box> via a template ref — reactive { width, height, left, top, hasMeasured } (or measureElement(el) for a one-off { width, height } read) |
useCursor() |
Control the terminal cursor — setCursorPosition(pos) in output coordinates |
useIsScreenReaderEnabled() |
Whether a screen reader is active — returns a boolean for adapting accessible output |
useAnimation(opts?) |
Frame-based animation driver — reactive { frame, time, delta } + reset() |
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, shallowRef } 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 = shallowRef(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");
});
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