Vue adapter

When to use @byteion/vue

• Use @byteion/vue for Vue 3 apps that need typed SFC components, v-model support, slots, Vue-native lifecycle, and composables.
• Use @byteion/core directly when you only need framework-agnostic HTML primitives and Tailwind classes.
• Use @byteion/js only when interactive behavior is needed for overlays, dropdowns, tabs, tooltips, etc.

Install

npm install @byteion/vue@0.2.0-beta.1 @byteion/core@0.2.0-beta.1
# Optional — only if you use Modal, Drawer, Dropdown, etc.
npm install @byteion/js@0.2.0-beta.1

Works under both Tailwind v4 (recommended) and Tailwind v3. Pick your path below.

Single CSS entry — no tailwind.config.js.

1. Wire Tailwind v4 into Vite

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [vue(), tailwindcss()],
});

2. Single CSS entry

/* app.css */
@import "tailwindcss";
@import "@byteion/core";

/* Optional brand themes */
@import "@byteion/core/theme/themes/acme.css";
@import "@byteion/core/theme/themes/midnight.css";

/* Tell Tailwind to scan the Vue adapter's published dist
   so class strings built at runtime get compiled. */
@source "../node_modules/@byteion/vue/dist";
@source "../node_modules/@byteion/js/src";

Note: Adjust the relative path to node_modules if your CSS file is nested deeper inside your project directories.

3. Use components

<script setup>
import { Card, Button, Input } from '@byteion/vue';
import { ref } from 'vue';

const email = ref('');
const password = ref('');
</script>

<template>
  <Card>
    <CardHeader>
      <CardTitle>Welcome back</CardTitle>
    </CardHeader>
    <CardBody class="space-y-3">
      <Input label="Email" v-model="email" type="email" />
      <Input label="Password" v-model="password" type="password" />
    </CardBody>
    <CardFooter>
      <Button block>Sign in</Button>
    </CardFooter>
  </Card>
</template>

Setup — Tailwind v3

For projects still on Tailwind v3. Preset + manual CSS imports.

1. Theme stack (CSS)

/* app.css */
@import "@byteion/core/theme/generated/tokens.css";
@import "@byteion/core/theme/variables.css";
@import "@byteion/core/theme/themes/acme.css";
@import "@byteion/core/theme/themes/midnight.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

2. Tailwind preset

// tailwind.config.js
const preset = require('@byteion/core/preset');

module.exports = {
  presets: [preset],
  // Variant form so `dark:` fires under BOTH `.dark` and `[data-theme="dark"]`.
  darkMode: ['variant', ['&:is(.dark *)', '&:is([data-theme="dark"] *)']],
  content: [
    './src/**/*.{html,js,vue,ts,tsx}',
    './node_modules/@byteion/vue/dist/**/*.{js,cjs}',
    './node_modules/@byteion/js/src/**/*.js',
  ],
};

Component import code is identical to the v4 path above — only the wiring differs.

Composables

Lightweight, composition-API based helper functions for focus trap, scroll lock, outside click, roving-tabindex, and controllable states.

47 component families shipped

Covers the Vue-ready component families from the core system. Click any component to see its anatomy, accessibility contract, and code.