BaklaVue bridges Trendyol Baklava web components with Vue 3's reactive ecosystem. Get type-safe, Vue-friendly wrappers with full v-model support, slots, and composables.
| Feature | Description |
|---|---|
| Native Vue feel | Components work like native Vue with v-model, events, and reactive props |
| Type safety | Full TypeScript definitions for components, props, events, and composables |
| Developer experience | Intuitive APIs, docs, and composables |
| Production ready | Used in real-world applications |
| MCP support | Model Context Protocol server for AI assistants (Cursor, Claude, Windsurf) |
# bun
bun add @baklavue/ui @baklavue/composables
# npm
npm install @baklavue/ui @baklavue/composables
# yarn
yarn add @baklavue/ui @baklavue/composables
# pnpm
pnpm add @baklavue/ui @baklavue/composables<template>
<div class="example">
<BvButton variant="primary" @click="handleClick"> Click me </BvButton>
<BvInput
v-model="email"
label="Email"
type="email"
placeholder="Enter your email"
/>
</div>
</template>
<script setup>
import { ref } from "vue";
import { BvButton, BvInput } from "@baklavue/ui";
const email = ref("");
const handleClick = () => {
console.log("Email:", email.value);
};
</script>- Vue 3.0+ — Composition API support
- Node.js 18+ or Bun
- TypeScript 5.9.2+ (recommended)
- Vue 3 integration with Composition API and TypeScript
- Baklava components with Vue-friendly APIs and full type safety
- Composables for notifications, CSV export, theme customization, and more
- Tree-shakeable bundle with optimized sizes
- Documentation site with examples and playground
- MCP server for AI assistants
| Package | Description |
|---|---|
| @baklavue/ui | Vue 3 components for Baklava design system |
| @baklavue/composables | Vue composables (notification, theme, CSV, etc.) |
All components support TypeScript types, v-model, Vue events, reactive props, slots, and accessibility features.
| Category | Components |
|---|---|
| Form | Button, Input, Checkbox, Radio, Switch, Select, Textarea, Datepicker |
| Feedback | Alert, Badge, Tag, Notification, Spinner |
| Layout | Dialog, Drawer, Dropdown, Tooltip, Accordion, Tab, Stepper |
| Navigation | Link, Pagination, Split Button |
| Data | Table, Icon |
- Documentation — Full docs with interactive examples
- Getting Started — Setup and first steps
- MCP Guide — Use with AI assistants
- Components — All components with examples
- GitHub — Source code and contributions
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
See the Contributing Guide for details.
- Trendyol Baklava — Design system
- Vue 3 — Framework
- Bun — Runtime & package manager
Built with ❤️ for the Vue community