Your library, in Vue

Choose Vue when creating a library. The Studio renders real Vue components; its source tab, ZIP exports, CLI and MCP return Vue single-file components.

The catalogue includes 48 components and 26 blocks. Vue uses Reka UI for accessible primitives, while React uses Base UI. Tokens, theme controls, saved versions and the AI proposal workflow are shared. APIs use Vue's v-model, emitted events and slots. Some framework-specific APIs differ; read the component's source and props.

Installation

The MIT-licensed component source is available without an account. To install your own saved Vue library through the hosted registry, create a connection in the Studio's Connect dialog. With Node.js 24 or newer, run these commands from your application folder:

In bash or zsh, paste your connection token at the hidden prompt and press Enter:

printf "Connection token: "
read -rs CODEROCKET_TOKEN
export CODEROCKET_TOKEN
printf "\n"
npx @coderocketapp/cli@latest init YOUR_LIBRARY_ID
npx @coderocketapp/cli@latest add button dialog

Copy the library ID from Connect and keep the token in your terminal environment. The CLI serves Vue source automatically for a Vue library and prints the required runtime dependencies. Install the listed dependencies in your app. Use npx @coderocketapp/cli@latest list to find items and npx @coderocketapp/cli@latest sync to update installed source after saving Studio changes. Locally edited files are preserved for review.

You can also export a Vue library as a ZIP, copy its components and styles into your Vue application, and install its runtime dependencies:

npm install vue@3.5.43 reka-ui@2.10.4 @lucide/vue@1.47.0

Vue 3.5 applications using Vite with @vitejs/plugin-vue or Nuxt are supported. Tailwind is optional. Installed source and styles run locally without a CodeRocket connection.

Import styles/components.css, then styles/blocks.css when using blocks, and finally styles/theme.css. Wrap your app in ThemeScope from components/ui/theme-scope.vue so portalled overlays inherit your theme.

<script setup lang="ts">
import ThemeScope from './components/ui/theme-scope.vue'
import Button from './components/ui/button.vue'
import './styles/components.css'
import './styles/theme.css'
</script>

<template>
  <ThemeScope><Button>Continue</Button></ThemeScope>
</template>

Nuxt

Copy the exported folders into your app, register the CSS files in nuxt.config.ts, and explicitly import ThemeScope and components in your pages. No client-only wrapper is required for the exported components. Use the css option with paths matching your Nuxt app directory, for example ~/styles/components.css and ~/styles/theme.css.

Framework differences

The 48 components and 26 blocks share the same design tokens, layouts and core behavior. Vue components use v-model, events and named slots. They are native Vue SFCs, not wrappers around the React implementation.

Advanced Base UI-specific APIs are not interchangeable: imperative trigger handles, transition event details and drawer snap points do not have identical Vue counterparts. Vue drawers support directional dismissal from their handle. Use the props listed in each Vue source; do not copy React JSX or Base UI-specific props into Vue templates.

AI and saved libraries

Connect the CLI or MCP to a saved Vue library. The connection exposes Vue source, dependencies and Vue-specific design rules automatically. The AI generates the same validated composition model; CodeRocket renders and exports it with the library's framework. Existing React libraries stay React.

The official MCP server uses npx with arguments ["-y", "@coderocketapp/mcp@latest"]. Set CODEROCKET_LIBRARY and CODEROCKET_TOKEN in your client's environment using the connection from Connect. Hosted CLI and MCP access requires an account and a token scoped to the saved library. Copy the complete setup.

Explore Vue components · Explore Vue blocks · Connect a coding agent