@routa/ui-vue

@routa/ui-vue is the public Vue 3 component package for Routa applications. It ships a full install plugin, named component exports, configuration and locale utilities, and stable CSS entrypoints for base and component-level styling.

AI Usage Protocol

For AI-generated admin, ecommerce admin, CRM, ERP, and operations interfaces, follow the component-level rules in AI_USAGE.md.

Install

npm install @routa/ui-vue vue

vue is a peer dependency and should be installed by the consuming application.

Full Install

Register the full component library and import the base style alias:

import { createApp } from 'vue'
import App from './App.vue'
import RoutaUI from '@routa/ui-vue'
import '@routa/ui-vue/style.css'

createApp(App).use(RoutaUI).mount('#app')

@routa/ui-vue/style.css is a compatibility alias for base.css. It provides design tokens and reset/base styles only; it is not a full component style bundle. Include component style entries for the components you render, or let your bundler integration auto-import those component style entries.

On-Demand Imports

Import the components you use from the root package entry and include the base style entry plus each component style entry:

import { RButton, RInput } from '@routa/ui-vue'
import '@routa/ui-vue/base.css'
import '@routa/ui-vue/button/style.css'
import '@routa/ui-vue/input/style.css'

Component JavaScript subpaths are also public for component-level imports:

import { RButton } from '@routa/ui-vue/button'
import { RInput } from '@routa/ui-vue/input'

Then register the components locally or globally:

import { createApp } from 'vue'
import App from './App.vue'
import { RButton, RInput } from '@routa/ui-vue'

const app = createApp(App)

app.component('RButton', RButton)
app.component('RInput', RInput)
app.mount('#app')

Config Provider

Use RConfigProvider to set app-level theme, radius, z-index, locale, and teleport behavior:

<template>
  <RConfigProvider theme="light" radius="default">
    <RButton type="primary">Save</RButton>
  </RConfigProvider>
</template>

The package also exports config helpers such as resolveRoutaConfig and locale helpers such as zhCN, enUS, and useRoutaLocale.

Installing the plugin provides config to components but does not modify html by default. Set themeTarget when a document-level theme boundary is needed:

app.use(RoutaUI, {
  theme: 'dark',
  themeTarget: document.documentElement,
})

Style Entrypoints

• @routa/ui-vue/base.css imports design tokens and reset/base styles.
• @routa/ui-vue/style.css imports base.css only. It is kept as a stable base-style alias for compatibility with existing consumers.
• @routa/ui-vue/<component>/style.css exposes component-level styles, for example @routa/ui-vue/select/style.css.

The root JavaScript entry and style.css do not provide a full component style bundle automatically, so consuming apps should include component-level styles explicitly or through their CSS auto-import setup.

Public Exports

The package exports:

• the default RoutaUI plugin
• named components such as RButton, RInput, RDialog, and RTable
• config-provider utilities
• locale utilities and built-in zhCN / enUS locale objects
• shared hooks from the hooks entry
• style entrypoints listed above

Development

From the workspace root:

pnpm --filter @routa/ui-vue type-check
pnpm --filter @routa/ui-vue test
pnpm --filter @routa/ui-vue build

@routa/ui-vue is published as a public package. Internal Routa workspace runtime packages are bundled by the build and are not required as runtime dependencies of consuming applications.