@a2ui-vue/vue

Vue 3 implementation of the A2UI framework.

Components

Basic Components

• Avatar: Supports xs, sm, md, lg, xl sizes.
• Button: Supports xs, sm, md, lg, xl sizes and various variants.
• Icon: Supports xs (12px), sm (14px), md (16px), lg (20px), xl (24px), 2xl (32px).
• Text: Supports xs to 4xl sizes.
• Space: Supports xs, sm, md, lg, xl presets for gap size.

Theme System

The theme system allows you to define global styles and presets.

Presets

Built-in presets: default, minimal, card, dense, dark.

You can configure the preset at the A2UINode level using the stylePresetId prop.

Architecture

The theme logic is decoupled from the component rendering:

• theme.ts: Contains STYLE_PRESETS, resolvePresetId, resolveTokenValue, and applyPresetDefaults.
• A2UINode.vue: Handles the component tree rendering and delegates theme resolution to theme.ts.

Usage

<template>
  <A2UINode :id="rootId" :scope="{ stylePresetId: 'dark' }" />
</template>