Vuact is a powerful compatibility layer that enables seamless two-way interoperability between React and Vue 3 components.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install vuact
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install vuact using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Vuact?
Vuact serves as a robust bridge for developers working within the modern web ecosystem, allowing for the execution of React components inside Vue 3 and vice versa. By acting as a runtime compatibility layer, it handles the complex translation of reactivity systems, component lifecycles, and event handling. As part of the Openclaw Skills ecosystem, this tool is essential for teams managing framework migrations or projects that require specialized UI libraries available only in one specific framework.
Vuact Use Cases
- Integrating high-quality React UI libraries or charts into an existing Vue 3 application.
- Facilitating a gradual, component-by-component migration from Vue to React or React to Vue.
- Developing cross-framework component libraries that need to support multiple host environments.
- Managing shared state across a micro-frontend architecture where different teams use different frameworks.
How Vuact Works
- The developer identifies the component to be bridged and selects the appropriate conversion utility: r2v (React-to-Vue) or v2r (Vue-to-React).
- Vuact wraps the source component in a compatibility layer that translates props, such as mapping Vue class to React className.
- Events and v-model updates are automatically transformed into the target framework's expected callback format.
- Reactivity is maintained by bridging Vue's reactive refs and React's state management via internal providers.
- The bridged component is rendered into the host framework's DOM tree while maintaining access to slots, context, and refs.
Vuact Setup
To leverage this Openclaw Skills bridge, you must be using Vue 3.5 or higher and a modern ESM-compatible bundler. Install the core library via your preferred package manager:
npm install vuact
Ensure your build configuration (Vite or Webpack) is set up to handle both JSX and .vue files simultaneously.
Vuact Data Schema & Taxonomy
Vuact organizes data flow and component metadata through a set of standardized transformation rules:
| Feature | Vue Context | React Context |
|---|---|---|
| Styling | class / style (obj) | className / style (obj) |
| Events | @update:modelValue | onUpdate:modelValue |
| Slots | <template #slot-name> | props.slotName |
| Context | provide / inject | createContext / useContext |
| Instances | template ref | useImperativeHandle |
Vuact Advanced Features
- Full support for Render Props and Slots, enabling complex nested UI structures across framework boundaries.
- Bidirectional Context Interop, allowing React Context to be consumed by Vue and Vue Context to be consumed by React.
- Hybrid Component logic that allows the use of Vue hooks (ref, watch, computed) directly inside React functional components.
- Ref Interop support for accessing imperative component instances across the bridge.
- Specialized event system mapping that reconciles the differences between standard web events and React's SyntheticEvent.
SKILL.md
Loading
Related Openclaw Skills
Agent Orchestration
A technical framework for coordinating multiple AI models through quality control loops, task routing, and cost-optimized fallback chains.
Long Project Manager
A specialized skill for managing long-term project state through a structured, file-based workspace that survives chat resets.
Pixwith Veo 3.1 AI Video Generation
A powerful AI video generation skill that leverages the Pixwith Veo 3.1 model for high-fidelity text-to-video and image-to-video workflows.
Orders
A powerful CLI-based tool for local order lifecycle management and sales reporting.
Pixwith AI Media Generation
A comprehensive AI media generation skill for Openclaw Skills that enables text-to-video, image-to-video, and multi-model image creation via the Pixwith MCP server.
Eigenskill Builder
A meta-skill that empowers AI agents to architect, validate, and publish standardized skill modules on the ClawHub registry.
Featured*
