Vue Registry

Vue Registry copies lightweight adapter source into your project. Framework-agnostic ak-ui CSS Core continues to provide component visuals.

See Vue Registry API for complete props, slots, models and boundary behavior. When upgrading from 0.2.x, follow the 1.0 migration guide.

1.1.0 adds section navigation, mobile menus, archive galleries, loading and particles. See Site API. Install: pnpm dlx shadcn-vue@2.8.2 add https://ak-ui.yyj.moe/r/site.json.

Style reuse model

Layer	Responsibility	Shared interface
CSS Core	Colors, typography, spacing, states and motion	.ak-* classes, --ak-* variables
Vue Adapter	Semantic structure, props, slots, events and keyboard interaction	Emit the matching Core and state classes
Documentation theme	Example composition and page layout	Kept outside component implementations

Vue files do not duplicate component CSS. Changes to src/scss produce the same visual result in native HTML and Vue; Registry verification also prevents adapters from reintroducing <style>.

Install components

First initialize shadcn-vue in your project:

pnpm dlx shadcn-vue@latest init

Then install the components you need:

Button

pnpm dlx shadcn-vue@latest add https://ak-ui.yyj.moe/r/button.json

Card

pnpm dlx shadcn-vue@latest add https://ak-ui.yyj.moe/r/card.json

Input Number

pnpm dlx shadcn-vue@latest add https://ak-ui.yyj.moe/r/input-number.json

Status

pnpm dlx shadcn-vue@latest add https://ak-ui.yyj.moe/r/status.json

Progress

pnpm dlx shadcn-vue@latest add https://ak-ui.yyj.moe/r/progress.json

Notice

pnpm dlx shadcn-vue@latest add https://ak-ui.yyj.moe/r/notice.json

Tabs

pnpm dlx shadcn-vue@latest add https://ak-ui.yyj.moe/r/tabs.json

Dashboard Depth

pnpm dlx shadcn-vue@latest add https://ak-ui.yyj.moe/r/dashboard-depth.json

Live Vue rendering

The following examples mount actual Vue components. You can interact with button events and v-model bindings.

Deployment protocol / 01

After copying the source, edit structure, props and interactions directly.

Current deployment units: 3

Data display and terminal navigation

These components also reuse CSS Core; Vue adapters only synchronize values, semantic attributes and interaction state.

VanguardTop OperatorOnlineOperation terminal connected

Deployment3 / 12

Deploy3units

CAUTION

Deployment units changed

Input Number and the progress components share the same queue value and update immediately.

Operation / 4-10

Fading lights

Review enemy intel, recommended level and sanity cost before starting.

Squad / E2

Current squad 12 / 12

Vanguards and medics are ready. Adjust support units before continuing.

Reward / Preview

Regular and first-clear drops

Complete the operation for a chance to earn battle records, LMD and training materials.

Usage

<script setup lang="ts">
import { ref } from 'vue'
import { AkButton } from '@/components/ui/button'
import { AkInputNumber } from '@/components/ui/input-number'
import { AkStatus, AkTag } from '@/components/ui/status'

const count = ref(3)
</script>

<template>
  <AkButton variant="action">
    Start operation
  </AkButton>
  <AkInputNumber v-model="count" :max="12" label="Deployment units" min-label="Minimum" max-label="Maximum" />
  <AkTag variant="advanced">Top Operator</AkTag>
  <AkStatus label="Online" detail="Operation terminal connected" />
</template>

Components import @yunyoujun/ak-ui CSS Core internally. Override --ak-* CSS variables first for visual changes. For structure or interaction changes, edit the Vue files copied into your project.

Reuse depth behavior

The depth algorithm is a framework-agnostic Core capability. Native HTML can create a controller directly and clean it up when the page is disposed:

import { createDashboardDepth } from '@yunyoujun/ak-ui/depth'

const dashboard = document.querySelector('[data-dashboard]')
if (!dashboard) throw new Error('Dashboard element not found')
const depth = createDashboardDepth(dashboard)

// Call when leaving the SPA page
depth.destroy()

Vue projects can install the Registry composable as needed. It handles the Vue lifecycle while calling the same createDashboardDepth() for the calculations:

<script setup lang="ts">
import { useTemplateRef } from 'vue'
import { useDashboardDepth } from '@/composables/useDashboardDepth'

const dashboard = useTemplateRef<HTMLElement>('dashboard')
useDashboardDepth(dashboard)
</script>

<template>
  <section ref="dashboard" class="ak-dashboard" data-dashboard>
    <div class="ak-dashboard__layer" data-depth="0.08">...</div>
    <div class="ak-dashboard__layer" data-depth="0.2">...</div>
  </section>
</template>

API reference

See Vue Registry API for component props, events and slots.