@sxo/vue provides a set of robust, accessible, and highly customizable Vue 3 components powered by the Composition API and SXO's headless core.

✨ Key Features

• 🧩 Headless Core: Powered by @sxo/design Composition API hooks for state and behavior.
• 🎨 Atomic Styling: Seamlessly integrates with @sxo/ui for consistent visual language.
• ⚡ Vue Optimized: Leverages Vue 3's reactivity system and script setup ergonomics.
• ♿ Accessible: Built-in ARIA support and keyboard interaction out of the box.
• 🛡️ Type Safe: First-class TypeScript support for all components and hooks.

🚀 Quick Start

Installation

pnpm add @sxo/vue @sxo/ui @sxo/engine @sxo/design

1. Register the Plugin

import { createApp } from 'vue';
import { createSxo } from '@sxo/vue';
import antdTheme from '@sxo/theme-antd';
import App from './App.vue';

const app = createApp(App);
app.use(createSxo({ tokens: antdTheme }));
app.mount('#app');

2. Basic Usage

<template>
  <SxoButton variant="primary" @click="handleClick">
    Click Me
  </SxoButton>
</template>

<script setup>
import { Button as SxoButton } from '@sxo/vue';

const handleClick = () => console.log('Hello SXO!');
</script>

3. The Headless Way

Build custom components using our underlying Composition API hooks.

<template>
  <div class="custom-accordion">
    <button v-for="id in ['item-1', 'item-2']" :key="id" @click="toggleItem(id)">
      Toggle {{ id }}
    </button>
    <div v-if="expandedItems.includes('item-1')">Content 1</div>
  </div>
</template>

<script setup>
import { useAccordion } from '@sxo/vue';

const { expandedItems, toggleItem } = useAccordion({ allowMultiple: false });
</script>

📖 Documentation

For full documentation and examples, visit the Vue Adaptor Documentation.

📄 License

MIT License.