@ilomee/aura-vue

The Vue 3 library for Aura. One set of tokens, four libraries, the same markup from the same stylesheet.

Thin, tree-shakeable components over the shared @ilomee/aura-core tokens and CSS, with zero runtime dependencies.

Install

npm i @ilomee/aura-vue @ilomee/aura-core vue

@ilomee/aura-core and vue are peer dependencies.

Setup

Load the stylesheets once in your app entry:

import '@ilomee/aura-core/css';
import '@ilomee/aura-core/components.css';
import '@ilomee/aura-core/animations.css'; // optional

<script setup lang="ts">
import { AuraProvider, Button, Typography, Stack } from '@ilomee/aura-vue';
</script>

<template>
  <AuraProvider default-theme="light" default-accent="aqua">
    <Stack :gap="4">
      <Typography variant="h1">Aura</Typography>
      <Button variant="primary">Get started</Button>
    </Stack>
  </AuraProvider>
</template>

API

Generated from the docs registry — do not edit by hand. Run npm run docs:gen.

Full API, live previews and cross-framework parity: https://ilomee.github.io/aura

Theming

| Component | Used as | Props | | --- | --- | --- | | AuraProvider | AuraProvider | theme (binding), accent (binding), corner (binding), density (binding), defaultTheme, defaultAccent, defaultCorner, defaultDensity, vars, as, update:theme (emit), update:accent (emit), update:corner (emit), update:density (emit) |

Primitives

| Component | Used as | Props | | --- | --- | --- | | Typography | Typography | variant, as, tone, align, truncate, lines, default (slot) | | Button | Button | variant, size, tone, loading, default (slot) | | Card | Card | elevation, default (slot) | | Badge | Badge | tone, size, default (slot) | | IconButton | IconButton | size, tone, aria-label*, default (slot) | | Chip | Chip | size, removable, removeLabel, remove (emit) | | Switch | Switch | label, modelValue (binding), defaultChecked, disabled, update:modelValue (emit), change (emit) | | Field | Field | label, hint, error, modelValue (binding), defaultValue, id, update:modelValue (emit) | | Scroll | Scroll | as, maxHeight, height, default (slot) | | Checkbox | Checkbox | label, modelValue (binding), defaultChecked, indeterminate, disabled, update:modelValue (emit) | | RadioGroup | RadioGroup | label, name, options, modelValue (binding), defaultValue, disabled, update:modelValue (emit) | | Radio | Radio | label | | Textarea | Textarea | label, hint, error, modelValue (binding), defaultValue, id, autoGrow, update:modelValue (emit) | | Select | Select | options, modelValue (binding), update:modelValue (emit), placeholder, hint, error, emptyLabel, open (binding), option (slot) | | MultiSelect | MultiSelect | modelValue (binding), update:modelValue (emit), hint, error, searchable, max, option (slot) | | Fieldset | Fieldset | legend | | Accordion | Accordion | items, exclusive, name, panel (slot) | | SegmentedControl | SegmentedControl | label, options, modelValue (binding), defaultValue, name, disabled, update:modelValue (emit) | | Alert | Alert | tone, title, urgent, withCloseButton, closeLabel, close (emit), icon (slot) | | Avatar | Avatar | src, alt, initials, size | | AvatarGroup | AvatarGroup | — | | Skeleton | Skeleton | variant, width, height, animated | | Loader | Loader | size, label | | Progress | Progress | value, label | | List | List | ordered, plain | | Indicator | Indicator | count, hidden, label, default (slot) | | RingProgress | RingProgress | value, label, default (slot) | | Toast | ToastViewport | toast (slot), toasts, dismiss (emit), closeLabel | | Tabs | Tabs | panel (slot), items, modelValue (binding), update:modelValue (emit), orientation, manual | | Dialog | Dialog | width, open, close (emit), title, label, top, withCloseButton, closeLabel, autoFocus | | Popover | Popover | default (slot), content (slot), label, openOn, open (binding), update:open (emit), side, align | | Menu | Menu | items, default (slot), item (slot), label, open (binding), update:open (emit), select (emit), point, side, align, emptyLabel, width | | Tooltip | Tooltip | label*, default (slot), side, align, delay, names | | HabitHeatmap | HabitHeatmap | values, weeks, max, cellLabel | | DataTable | DataTable | columns*, rows, rowKey, emptyLabel, caption, cell-<key> / actions (slot) | | StepWizard | StepWizard | step (slot), steps*, active, default (slot) | | TimeGrid | TimeGrid | events, dayStart, dayEnd, dayLabels, showNow |

Not in this package: Code, Blockquote, Mark, Anchor — A class, not a component: there is no state, no props and no behaviour for a wrapper to add — <code class="aura-code"> is the whole API. Write the markup, or reach for Typography when the text is a block rather than a fragment.

Layout

| Component | Used as | Props | | --- | --- | --- | | Stack | Stack | as, direction, gap, align, justify, wrap | | Flex | Flex | as, direction, gap, align, justify, wrap | | Group | Group | as, gap, align | | Grid | Grid | as, cols, gap, minItemWidth | | Container | Container | as, maxWidth, padInline | | Masonry | Masonry | as, cols, gap | | Divider | Divider | orientation, label |

Not in this package: Spacer — A class, not a component: no state, no props, no behaviour for a wrapper to add — <div class="aura-spacer"> is the whole API. Write the markup, or put margin-inline-start: auto on the element you want pushed and skip the node entirely.

Recipes

Not in this package: StatBadge, CalloutList, ProgressCard, FormDialog, CommandPalette — An example, not a component. This was a composition of primitives with a name, and the name was the only thing it added — so the composition is on this page in full, and there is nothing to install or import.

* required

Vue conventions

• Switch and Field use v-model (Switch → boolean, Field → string).
• Chip emits remove; interactive components emit standard events.
• Grid/Masonry accept :cols="{ base, md, lg }"; Grid also supports min-item-width.
• Class/attribute fallthrough is automatic; override any token via CSS variables or the provider's vars prop.