feat: Add @openuidev/vue-headless - Vue 3 port of @openuidev/react-headless

Open
  • Is something wrong?
#765 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
25/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Quiet
Tech stack
typescript
Domain
frontend

Research direction

Start by reading @openuidev/react-headless to understand the API and behavior this proposal aims to match. Then compare the proposed Vue adaptations and initial AG-UI-only scope with the questions raised for maintainers. The next step and definition of done depend on whether maintainers approve the package and partial-parity scope.

Written by the indexing model from the issue text.

Description

enhancement

Summary

I would like to contribute packages/vue-headless, a Vue 3 port of @openuidev/react-headless, so Vue apps can use the same headless chat primitives as the React ecosystem.
I built this package while testing the Mastra + OpenUI + Vue 3 stack and would like to share the result with the community.

Problem

OpenUI has headless support for React, but not for Vue. Vue/Nuxt teams currently have no official way to integrate AG-UI streaming, thread state, tool activity, and artifact rendering using OpenUI patterns.

Proposed solution

New package @openuidev/vue-headless with API and behavior aligned to react-headless, adapted for Vue:

React Vue
Zustand Pinia
React context + hooks provide/inject + composables

Initial scope:

  • Chat store (threads, messages, streaming, cancellation)
  • AG-UI adapter + processStreamedMessage
  • Tool activity pairing (pairToolActivity, useToolActivities)
  • Artifact renderers and detailed view composables
  • fetchLLM / restStorage adapters
  • Vitest coverage + README

Deferred to follow-up PRs:

  • OpenAI stream adapters
  • LangGraph adapter
  • OpenAI / LangGraph message format converters

Message types remain re-exported from @ag-ui/core (not redefined).

Questions for maintainers

  1. Is a new @openuidev/vue-headless package aligned with the roadmap?
  2. Is partial parity (AG-UI only in v1) acceptable for the first merge?

Happy to adjust scope before opening a PR.

Dominant language
TypeScript
Stars
10k
Forks
698
Avg merge
1d 3h
Merged PRs (30d)
133

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from thesysdev/openui

All issues in thesysdev/openui

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.