[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-80327":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":12,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":14,"stars7d":15,"stars30d":16,"stars90d":14,"forks30d":14,"starsTrendScore":15,"compositeScore":17,"rankGlobal":9,"rankLanguage":9,"license":9,"archived":18,"fork":18,"defaultBranch":19,"hasWiki":18,"hasPages":18,"topics":20,"createdAt":9,"pushedAt":9,"updatedAt":34,"readmeContent":35,"aiSummary":36,"trendingCount":14,"starSnapshotCount":14,"syncStatus":37,"lastSyncTime":38,"discoverSource":39},80327,"vue-tui","vuejs-ai\u002Fvue-tui","vuejs-ai","The Vue framework for terminal UIs. SFC & JSX, Yoga flexbox, HMR, and testing out of the box.",null,"TypeScript",84,1,64,0,3,19,41.3,false,"main",[21,22,23,24,25,26,27,28,29,30,31,32,33],"ai-agent","ai-agents","cli","command-line","flexbox","llm","renderer","terminal","terminal-ui","tui","typescript","vue","vue3","2026-06-12 04:01:27","# vue-tui\n\n> **Early stage** — under active development. Bug reports welcome, but not recommended for production use yet.\n\nThe Vue framework for terminal UIs.\nBuild with components, develop with HMR, test with confidence.\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fnpmx.dev\u002F@vue-tui\u002Fruntime\">\u003Ccode>@vue-tui\u002Fruntime\u003C\u002Fcode>\u003C\u002Fa> · \u003Ca href=\"https:\u002F\u002Fnpmx.dev\u002F@vue-tui\u002Fcli\">\u003Ccode>@vue-tui\u002Fcli\u003C\u002Fcode>\u003C\u002Fa> · \u003Ca href=\"https:\u002F\u002Fnpmx.dev\u002F@vue-tui\u002Ftesting\">\u003Ccode>@vue-tui\u002Ftesting\u003C\u002Fcode>\u003C\u002Fa>\n\u003C\u002Fp>\n\n- **Vue SFC & JSX** — write terminal interfaces with `\u003Ctemplate>`, TSX, or both\n- **Flexbox layout** — powered by Yoga, the same engine behind React Native\n- **Dev toolkit** — **HMR** in the terminal, plus build and preview out of the box\n- **Input & focus** — keyboard handling, focus management, Tab navigation, Kitty keyboard protocol\n- **Testing harness** — out-of-the-box component-level terminal testing — render, simulate input, assert frames\n\n\u003Cp align=\"center\">\n  \u003Ca href=\".\u002Fexamples\u002Fflappy-bird\">\u003Cem>Flappy Bird\u003C\u002Fem>\u003C\u002Fa> — one of the \u003Ca href=\"#examples\">examples\u003C\u002Fa> included in the repo\n  \u003Cbr \u002F>\u003Cbr \u002F>\n  \u003Ca href=\".\u002Fexamples\u002Fflappy-bird\">\n    \u003Cimg src=\".github\u002Fassets\u002Fflappy-bird-demo.gif\" alt=\"Flappy Bird built with vue-tui\" width=\"690\" \u002F>\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\n## Quick Start\n\n```bash\nnpx tiged vuejs-ai\u002Fvue-tui-starter my-app\ncd my-app\nnpm install\nnpm run dev\n```\n\nEdit `App.vue` and watch the terminal update instantly.\n\n## Example\n\n```ts\n\u002F\u002F src\u002Fmain.ts\nimport { createApp } from \"@vue-tui\u002Fruntime\";\nimport App from \".\u002FApp.vue\";\n\ncreateApp(App).mount();\n```\n\n```vue\n\u003C!-- src\u002FApp.vue -->\n\u003Cscript setup lang=\"ts\">\nimport { shallowRef } from \"vue\";\nimport { Box, Text, useInput } from \"@vue-tui\u002Fruntime\";\n\nconst count = shallowRef(0);\n\nuseInput((input) => {\n  if (input === \"+\") count.value++;\n  if (input === \"-\") count.value--;\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CBox>\n    \u003CText>Count: \u003C\u002FText>\n    \u003CText bold color=\"green\">{{ count }}\u003C\u002FText>\n    \u003CText dimColor> (+\u002F- to change)\u003C\u002FText>\n  \u003C\u002FBox>\n\u003C\u002Ftemplate>\n```\n\n## Table of Contents\n\n- [Quick Start](#quick-start)\n- [Example](#example)\n- [Packages](#packages)\n- [Examples](#examples)\n- [Components](#components)\n- [Composables (Hooks)](#composables-hooks)\n- [Testing](#testing)\n- [Development](#development)\n- [Contributing](#contributing)\n- [Credits](#credits)\n- [License](#license)\n\n## Packages\n\n| Package                                                              | Description                                                                                                                                                                               |\n| -------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| [`@vue-tui\u002Fruntime`](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@vue-tui\u002Fruntime) | 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 |\n| [`@vue-tui\u002Fcli`](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@vue-tui\u002Fcli)         | Development tool — `vue-tui dev` starts your app with Vite-powered HMR                                                                                                                    |\n| [`@vue-tui\u002Ftesting`](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@vue-tui\u002Ftesting) | Test harness — render in an isolated fake terminal, simulate input, assert output frame by frame                                                                                          |\n\n## Examples\n\n| Example                                       | Description                                                 |\n| --------------------------------------------- | ----------------------------------------------------------- |\n| [`basic-template`](.\u002Fexamples\u002Fbasic-template) | Vue SFC with `\u003Ctemplate>` syntax                            |\n| [`basic-jsx`](.\u002Fexamples\u002Fbasic-jsx)           | Same app in TSX                                             |\n| [`coding-agent`](.\u002Fexamples\u002Fcoding-agent)     | AI coding agent with LLM streaming and interactive UI       |\n| [`flappy-bird`](.\u002Fexamples\u002Fflappy-bird)       | Physics-based terminal game with reactive state and borders |\n\n## Components\n\n| Component                           | Description                                                                                    |\n| ----------------------------------- | ---------------------------------------------------------------------------------------------- |\n| [`\u003CBox>`](.\u002Fpackages\u002Fruntime)       | Flexbox container — direction, wrap, align, justify, gap, padding, margin, borders, background |\n| [`\u003CText>`](.\u002Fpackages\u002Fruntime)      | Styled text — color, bold, italic, underline, strikethrough, dimColor, wrap\u002Ftruncate modes     |\n| [`\u003CSpacer>`](.\u002Fpackages\u002Fruntime)    | Expands to fill available space (`flex-grow: 1`)                                               |\n| [`\u003CNewline>`](.\u002Fpackages\u002Fruntime)   | Inserts line breaks (configurable `count`)                                                     |\n| [`\u003CStatic>`](.\u002Fpackages\u002Fruntime)    | Renders a list of items once, above the redrawn region                                         |\n| [`\u003CTransform>`](.\u002Fpackages\u002Fruntime) | Applies a string transform function to each rendered line                                      |\n\n## Composables (Hooks)\n\n| Composable                 | Description                                                                           |\n| -------------------------- | ------------------------------------------------------------------------------------- |\n| `useInput(handler, opts?)` | Handle keyboard input — receives `(input, key)` with modifier and arrow key detection |\n| `useFocus(opts?)`          | Component-level focus — returns `{ isFocused, focus }`                                |\n| `useFocusManager()`        | App-level focus control — `focusNext()`, `focusPrevious()`, `focus(id)`               |\n| `useApp()`                 | App lifecycle — `{ exit(error?), waitUntilRenderFlush() }`                            |\n| `useTerminalSize()`        | Reactive terminal dimensions — `{ columns, rows }`                                    |\n| `useStdin()`               | Access stdin stream and raw mode control                                              |\n| `useStdout()`              | Write directly to stdout                                                              |\n| `useStderr()`              | Write directly to stderr                                                              |\n\n## Testing\n\nThe `@vue-tui\u002Ftesting` package renders components in an isolated environment and lets you simulate input and assert visual output:\n\n```bash\nnpm install -D @vue-tui\u002Ftesting\n```\n\n```tsx\nimport { defineComponent, shallowRef } from \"vue\";\nimport { expect, test } from \"vitest\";\nimport { render } from \"@vue-tui\u002Ftesting\";\nimport { Box, Text, useInput } from \"@vue-tui\u002Fruntime\";\n\ntest(\"counter responds to + and - keys\", async () => {\n  const Counter = defineComponent(() => {\n    const count = shallowRef(0);\n    useInput((input) => {\n      if (input === \"+\") count.value++;\n      if (input === \"-\") count.value--;\n    });\n    return () => (\n      \u003CBox>\n        \u003CText>Count: {count.value}\u003C\u002FText>\n      \u003C\u002FBox>\n    );\n  });\n\n  const { lastFrame, stdin } = await render(Counter);\n  expect(lastFrame()).toContain(\"Count: 0\");\n\n  await stdin.write(\"+\");\n  expect(lastFrame()).toContain(\"Count: 1\");\n\n  await stdin.write(\"-\");\n  expect(lastFrame()).toContain(\"Count: 0\");\n});\n```\n\n## Development\n\nRequires [pnpm](https:\u002F\u002Fpnpm.io\u002F) and Node.js 22+.\n\n```bash\npnpm install          # install dependencies\nvp run ready          # lint, typecheck, test, and build (the full check)\nvp run -r test        # run tests across all packages\nvp run -r build       # build all packages\nvue-tui dev           # start an example with HMR\n```\n\n## Contributing\n\nContributions welcome! vue-tui is evolving fast — please open an issue before starting large changes. If you use AI tools, disclose it in your PR and make sure you've reviewed and tested everything before submitting.\n\n## Credits\n\nvue-tui is built on the ideas pioneered by [Ink](https:\u002F\u002Fgithub.com\u002Fvadimdemedes\u002Fink) — component model, yoga-based layout, focus system, and rendering pipeline — adapted to Vue's philosophy. Thanks to [Vadim Demedes](https:\u002F\u002Fgithub.com\u002Fvadimdemedes), [Sindre Sorhus](https:\u002F\u002Fgithub.com\u002Fsindresorhus), and the [Ink contributors](https:\u002F\u002Fgithub.com\u002Fvadimdemedes\u002Fink\u002Fgraphs\u002Fcontributors).\n\n## License\n\nMIT\n","vue-tui 是一个用于构建终端用户界面的 Vue 框架。它支持单文件组件（SFC）和 JSX 语法，并通过 Yoga 引擎实现 Flexbox 布局，提供热模块替换（HMR）功能以提升开发效率。此外，vue-tui 还内置了输入处理、焦点管理和测试工具，使得开发者能够轻松地为终端环境创建交互式应用。尽管目前项目仍处于早期阶段，不建议在生产环境中使用，但对于那些希望探索或实验基于 Vue 的命令行界面解决方案的技术爱好者来说，是一个很好的选择。",2,"2026-06-11 04:00:20","CREATED_QUERY"]