VUE 3 INTEGRATION

Coming Soon

The Vue 3 component library (@elfbar/ui-vue) is currently under development. In the meantime, you can use the Design Tokens directly in any Vue 3 project.

Token Usage (Available Now)

Import the token CSS files in your main.ts:

import '@elfbar/tokens/dist/elfbar/light.css'
import '@elfbar/tokens/dist/elfbar/dark.css'
import '@elfbar/tokens/dist/elfbar/desktop.css'

Then use CSS variables anywhere in your templates:

<template>
  <button :style="{
    background: 'var(--ds-color-brand-accent1-default)',
    color: 'var(--ds-color-text-white-primary)',
    padding: 'var(--ds-spacing-ele-sm) var(--ds-spacing-ele-md)',
    borderRadius: 'var(--ds-radius-sm)',
  }">
    Add to Cart
  </button>
</template>

Planned Features

• Full Vue 3 component library with same props API as the React version
• v-model support for all form controls
• Tailwind CSS preset for token integration
• useTheme() composable for brand and theme switching