Skip to content

@vue-tui/runtime@0.1

Choose a tag to compare

@hyfdev hyfdev released this 19 Jun 17:06
e4f756d

Public beta. The @vue-tui/runtime API is stabilizing and we're seeking public feedback to lock it down before 1.0. The CLI and dev tooling remain experimental and may change. Not recommended for production yet.

What it is

vue-tui brings Vue 3 reactivity and <script setup> authoring to the terminal — the same component model you use on the web, laid out by real Yoga flexbox and rendered as terminal frames.

Who it's for: teams already in Vue who'd rather build terminal UIs with <script setup> and reactivity than adopt React for the CLI. On React? Use Ink — vue-tui exists so it isn't React-or-nothing.

What you get

  • Vue reactivity in the terminal<script setup>, shallowRef, computed, watch.
  • Real Yoga flexbox layoutBox / Text primitives, on the engine behind Ink and React Native.
  • The battle-tested patterns of React Ink, in Vue — modeled on Ink (pinned to v7.0.4), adapted to Vue's philosophy.
  • Modern terminal capabilities — Kitty keyboard protocol, bracketed paste, frame animation, and a screen-reader linearizer with ARIA roles.

Try it

npm i @vue-tui/runtime 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++ })
</script>

<template>
  <Box><Text>Count: {{ count }} (press + to increment)</Text></Box>
</template>

Bundled examples: <template> & JSX counters, Flappy Bird, and a coding-agent UI.

Thanks

Built on the shoulders of React Ink. Ink defined what a great component-model terminal renderer is, and having a mature reference to verify against is what made this possible. Thank you.