[PR #81] [MERGED] Feat: vue renderer #1052

New issue

Closed

opened 2026-03-14 09:15:55 +03:00 by kerem · 0 comments

kerem commented

2026-03-14 09:15:55 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/anomalyco/opentui/pull/81
Author: @bhushan6
Created: 8/25/2025
Status: ✅ Merged
Merged: 8/28/2025
Merged by: @kommander

Base: main ← Head: feat/vue-renderer

📝 Commits (10+)

1296619 feat(vue-renderer): initial working implementation
af97371 Merge branch 'main' into feat/vue-renderer
e47a727 updates : examples
84bc8f9 refactores
54567d1 fixes : type issues
386ecc8 removes : unused types
6a55984 add : tab select example
f9ba638 removes : logs
717b9e1 removes : console
4eaca1d adds: command for running examples

📊 Changes

24 files changed (+1420 additions, -8 deletions)

View changed files

📝 bun.lock (+69 -8)
➕ packages/vue/.gitignore (+34 -0)
➕ packages/vue/README.md (+130 -0)
➕ packages/vue/bunconfig.toml (+9 -0)
➕ packages/vue/example/ASCII.vue (+60 -0)
➕ packages/vue/example/App.vue (+54 -0)
➕ packages/vue/example/Counter.vue (+41 -0)
➕ packages/vue/example/LoginForm.vue (+88 -0)
➕ packages/vue/example/Styled-Text.vue (+21 -0)
➕ packages/vue/example/TabSelect.vue (+38 -0)
➕ packages/vue/example/main.ts (+4 -0)
➕ packages/vue/index.ts (+16 -0)
➕ packages/vue/package.json (+39 -0)
➕ packages/vue/scripts/build-examples.ts (+30 -0)
➕ packages/vue/scripts/build.ts (+183 -0)
➕ packages/vue/scripts/publish.ts (+36 -0)
➕ packages/vue/src/composables/useCliRenderer.ts (+13 -0)
➕ packages/vue/src/elements.ts (+20 -0)
➕ packages/vue/src/noOps.ts (+124 -0)
➕ packages/vue/src/nodes.ts (+27 -0)

...and 4 more files

📄 Description

Vue Renderer for OpenTUI

Key Points:

Primitive elements are named with "Renderable" suffix (e.g., boxRenderable, textRenderable) unlike react and solid renderer since elements name like input, select etc were causing type errors due to naming collision with HTML elements names.
Text element can take only plain text as child and to add styled text and Text chunks you have to pass it using content prop. Since Vue tries to cast it as string whatever content you add between {{ }}.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/anomalyco/opentui/pull/81 **Author:** [@bhushan6](https://github.com/bhushan6) **Created:** 8/25/2025 **Status:** ✅ Merged **Merged:** 8/28/2025 **Merged by:** [@kommander](https://github.com/kommander) **Base:** `main` ← **Head:** `feat/vue-renderer` --- ### 📝 Commits (10+) - [`1296619`](https://github.com/anomalyco/opentui/commit/1296619095f3af341a884a992d7adea603e1bdcc) feat(vue-renderer): initial working implementation - [`af97371`](https://github.com/anomalyco/opentui/commit/af97371b9683e42323dea9695ec6d9d3e18633ac) Merge branch 'main' into feat/vue-renderer - [`e47a727`](https://github.com/anomalyco/opentui/commit/e47a727034451ac2921c9e844e86cca250450eb1) updates : examples - [`84bc8f9`](https://github.com/anomalyco/opentui/commit/84bc8f9aa1840a5fe61d2d70dc241079799e726e) refactores - [`54567d1`](https://github.com/anomalyco/opentui/commit/54567d1ed374c95362337940d5a99fcea726f927) fixes : type issues - [`386ecc8`](https://github.com/anomalyco/opentui/commit/386ecc8d7656e1a1498b664907db89a34eb4a690) removes : unused types - [`6a55984`](https://github.com/anomalyco/opentui/commit/6a5598467a36c1417033ea3e2e4b57bd4cff26f4) add : tab select example - [`f9ba638`](https://github.com/anomalyco/opentui/commit/f9ba638023bcfdfbc53abc94aaeac5d15999ba8b) removes : logs - [`717b9e1`](https://github.com/anomalyco/opentui/commit/717b9e1c471b40059e4e2d97110823a54b6b7a62) removes : console - [`4eaca1d`](https://github.com/anomalyco/opentui/commit/4eaca1d19b0b91a43f142f29a03bf950086c431e) adds: command for running examples ### 📊 Changes **24 files changed** (+1420 additions, -8 deletions) <details> <summary>View changed files</summary> 📝 `bun.lock` (+69 -8) ➕ `packages/vue/.gitignore` (+34 -0) ➕ `packages/vue/README.md` (+130 -0) ➕ `packages/vue/bunconfig.toml` (+9 -0) ➕ `packages/vue/example/ASCII.vue` (+60 -0) ➕ `packages/vue/example/App.vue` (+54 -0) ➕ `packages/vue/example/Counter.vue` (+41 -0) ➕ `packages/vue/example/LoginForm.vue` (+88 -0) ➕ `packages/vue/example/Styled-Text.vue` (+21 -0) ➕ `packages/vue/example/TabSelect.vue` (+38 -0) ➕ `packages/vue/example/main.ts` (+4 -0) ➕ `packages/vue/index.ts` (+16 -0) ➕ `packages/vue/package.json` (+39 -0) ➕ `packages/vue/scripts/build-examples.ts` (+30 -0) ➕ `packages/vue/scripts/build.ts` (+183 -0) ➕ `packages/vue/scripts/publish.ts` (+36 -0) ➕ `packages/vue/src/composables/useCliRenderer.ts` (+13 -0) ➕ `packages/vue/src/elements.ts` (+20 -0) ➕ `packages/vue/src/noOps.ts` (+124 -0) ➕ `packages/vue/src/nodes.ts` (+27 -0) _...and 4 more files_ </details> ### 📄 Description Vue Renderer for OpenTUI Key Points: - Primitive elements are named with "Renderable" suffix (e.g., boxRenderable, textRenderable) unlike react and solid renderer since elements name like input, select etc were causing type errors due to naming collision with HTML elements names. - Text element can take only plain text as child and to add styled text and Text chunks you have to pass it using content prop. Since Vue tries to cast it as string whatever content you add between {{ }}. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>