@byteion/vue
v0.1.0-beta.1
Published
Vue 3 components built on the Byteion design system. Same markup, Vue props + slots.
Maintainers
byteionReadme
@byteion/vue
Vue 3 components for the Byteion design system.
@byteion/core is the source of truth for tokens, themes, accessibility
contracts, and canonical markup. @byteion/vue turns that foundation into
typed Vue SFCs with Vue props, slots, v-model, composables, and the same
data-bi-* contracts used by the HTML and React packages.
Install
npm install @byteion/vue @byteion/coreInstall @byteion/js only when you want to bind the framework-agnostic
behavior runtime yourself:
npm install @byteion/jsSetup
Import the core theme stack:
@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;Extend Tailwind with the core preset and scan the Vue package:
import preset from '@byteion/core/preset';
export default {
presets: [preset],
content: [
'./index.html',
'./src/**/*.{vue,ts,tsx,js,jsx}',
'./node_modules/@byteion/vue/dist/**/*.{js,cjs}',
],
};Usage
<script setup lang="ts">
import { ref } from 'vue';
import { Button, Card, CardHeader, CardBody, CardFooter, CardTitle, Input } from '@byteion/vue';
const email = ref('');
</script>
<template>
<Card>
<CardHeader>
<CardTitle>Sign in</CardTitle>
</CardHeader>
<CardBody>
<Input v-model="email" label="Email" type="email" />
</CardBody>
<CardFooter>
<Button>Continue</Button>
</CardFooter>
</Card>
</template>Component Coverage
@byteion/vue covers all 50 @byteion/core component folders. The package
exports 89 SFCs because compound components such as Card, Table, Tabs,
Accordion, Navbar, Sidebar, and FileUpload expose their subparts as separate
Vue components.
Export Groups
Display and structure:
Button, Badge, Card, Alert, Avatar, Spinner, Skeleton,
Progress, Typography, Breadcrumb, EmptyState, StatCard, Timeline.
Forms:
Input, Textarea, Select, Switch, Checkbox, Radio, RadioGroup,
Range, RangeDual, Search, TagsInput, MultiSelect, Combobox,
Calendar, Datepicker, FileUpload, FormField.
Layout and navigation:
Container, Stack, Grid, Navbar, Sidebar, List, Pagination,
Stepper, Table, DataTable, KpiWidget.
Specialty and auth:
Kanban, AuthShell, AuthSignin, AuthSignup, AuthForgotPassword,
AuthResetPassword, AuthOtp.
Overlays and interactive components:
Modal, Drawer, Tooltip, Dropdown, Popover, Tabs, TabList, Tab,
TabPanel, Accordion, AccordionItem, AccordionTrigger,
AccordionContent, ToastContainer.
v-model
Stateful components expose Vue-native model bindings:
<Input v-model="email" />
<Switch v-model="enabled" />
<Checkbox v-model="checked" />
<Tabs v-model="active" />
<Modal v-model:open="open" />Composables
import {
useEscapeKey,
useClickOutside,
useFocusTrap,
useScrollLock,
useArrowNav,
useControllableState,
useComposedRefs,
useToast,
} from '@byteion/vue';Theming
Apply themes at the document root:
<html lang="en" data-theme="acme" class="dark">
<body><!-- app --></body>
</html>Components use semantic tokens like bg-card, text-foreground, and
border-border, plus primitive scales like primary, success, warning,
and danger.
Quality Gates
npm run validate --workspace @byteion/vueValidation runs Vue typechecking, server-safety checks, Vitest, production build output, declaration generation, and bundle-size budgets.