Skip to content

feat: add @wterm/vue package#30

Open
posva wants to merge 10 commits intovercel-labs:mainfrom
posva:feat/wterm-vue
Open

feat: add @wterm/vue package#30
posva wants to merge 10 commits intovercel-labs:mainfrom
posva:feat/wterm-vue

Conversation

@posva
Copy link
Copy Markdown

@posva posva commented Apr 17, 2026

Summary

  • Add @wterm/vue package
  • Add Vue example ported from the Next.js example
  • Include a local terminal example

Still as a draft because I want to improve the types to make <Terminal> fully type safe

Fully typesafe with minimal runtime overhead

@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 17, 2026

@posva is attempting to deploy a commit to the Vercel Labs Team on Vercel.

A member of the Team first needs to authorize it.

@socket-security
Copy link
Copy Markdown

socket-security Bot commented Apr 17, 2026

@socket-security
Copy link
Copy Markdown

socket-security Bot commented Apr 17, 2026

Warning

Review the following alerts detected in dependencies.

According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.

Action Severity Alert  (click "▶" to expand/collapse)
Warn High
Obfuscated code: npm js-beautify is 100.0% likely obfuscated

Confidence: 1.00

Location: Package overview

From: pnpm-lock.yamlnpm/@vue/test-utils@2.4.6npm/js-beautify@1.15.4

ℹ Read more on: This package | This alert | What is obfuscated code?

Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev.

Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code.

Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/js-beautify@1.15.4. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report

posva added 5 commits April 20, 2026 10:45
Vue 3 component wrapper around @wterm/dom, mirroring @wterm/react.
Plain .ts only (no SFCs) — builds with tsc alone. Uses defineEmits
for events and defineExpose for the imperative handle; no composable.
In-browser bash demo using @wterm/vue + @wterm/just-bash, with
theme switching and a virtual filesystem. Uses Tailwind v4 and
portless on vue-example.wterm.localhost.

Also simplify @wterm/vue prop declarations (optional Vue prop
shorthand — equivalent behavior).
Emits: array form → object form with validator signatures so payload
types flow to `@event="..."` handlers and to `emit(...)` inside setup.

Exposed handle: switch from `defineExpose` (whose types only flow in
`<script setup>`) to returning bindings from `setup()` and rendering
via a `render()` option. Vue auto-unwraps refs and merges the return
into `InstanceType<typeof Terminal>`, so template refs typed as
`ref<InstanceType<typeof Terminal>>` see write/resize/focus/instance
with correct signatures — no casts needed.

Adds Terminal.types.test.ts with expectTypeOf + @ts-expect-error
guards so regressions break `tsc --noEmit`.
@posva posva marked this pull request as ready for review April 20, 2026 08:45
@posva
Copy link
Copy Markdown
Author

posva commented Apr 20, 2026

@ctate I wanted to play with wterm in some of my Vue apps so I figured I might as well contribute the Vue version of this!
I saw there is #29 but it seems to be a bit outdated in Vue practices. I kept the version minimal (only a Terminal component) and fully type safe. The docs, playground and package structure are fully generated based on the existing pieces, I really focused on the implementation of the Terminal component, its usage, and tests. Feel free to tweak anything

Mirror the React docs for @wterm/vue: new /vue page, nav/title entries,
install + quick-start blocks in get-started and themes, Vue-only props,
Vue events, and Template Ref sections in api-reference and configuration.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant