https://github.com/cocoar-dev/cocoar-ui-vue
Cocoar UI Vue - Vue 3 component library monorepo
https://github.com/cocoar-dev/cocoar-ui-vue
Last synced: about 1 month ago
JSON representation
Cocoar UI Vue - Vue 3 component library monorepo
- Host: GitHub
- URL: https://github.com/cocoar-dev/cocoar-ui-vue
- Owner: cocoar-dev
- License: apache-2.0
- Created: 2026-02-22T12:53:49.000Z (5 months ago)
- Default Branch: develop
- Last Pushed: 2026-05-28T04:15:04.000Z (about 1 month ago)
- Last Synced: 2026-05-28T06:22:37.162Z (about 1 month ago)
- Language: TypeScript
- Size: 3.39 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
- Notice: NOTICE
Awesome Lists containing this project
README
# Coar Design System — Vue
> **Documentation:** [docs.cocoar.dev/cocoar-ui-vue](https://docs.cocoar.dev/cocoar-ui-vue/) — live demos, API reference, and design foundations.
## Tech Stack
| Concern | Tool |
|---------|------|
| Package manager | pnpm (workspaces) |
| Task orchestration | Turborepo |
| Framework | Vue 3 |
| Language | TypeScript |
| Build | Vite (library mode) |
| Testing | Vitest + @vue/test-utils |
| Documentation | VitePress |
| Linting | ESLint (flat config) + Prettier |
## Repository Structure
```
cocoar-ui-vue/
├── packages/
│ ├── ui/ @cocoar/vue-ui Main component library
│ ├── localization/ @cocoar/vue-localization i18n, L10n, and timezone support
│ ├── data-grid/ @cocoar/vue-data-grid Data grid component
│ ├── markdown/ @cocoar/vue-markdown Markdown viewer component (optional)
│ ├── markdown-core/ @cocoar/vue-markdown-core Markdown parser
│ ├── fragment-parser/ @cocoar/vue-fragment-parser HTML fragment parsing utilities
│ └── icons/ @cocoar/icons-cli Icon generation CLI
├── apps/
│ └── docs/ VitePress documentation Component docs & demos
├── assets/
│ └── icons/ Source SVG icon set
├── scripts/
│ └── icons/ Icon build tooling
├── turbo.json Turborepo pipeline config
├── tsconfig.base.json Shared TypeScript config
├── eslint.config.js ESLint flat config
└── vitest.config.ts Vitest multi-package config
```
## Components (`@cocoar/vue-ui`)
| Category | Components |
|----------|-----------|
| Inputs | `CoarButton`, `CoarCheckbox`, `CoarNumberInput`, `CoarPasswordInput`, `CoarRadioGroup`, `CoarSelect`, `CoarMultiSelect`, `CoarTagSelect`, `CoarSwitch`, `CoarTextInput` |
| Date & Time | `CoarPlainDatePicker`, `CoarPlainDateTimePicker`, `CoarZonedDateTimePicker`, `CoarTimePicker`, `CoarScrollableCalendar` |
| Navigation | `CoarMenu`, `CoarNavbar`, `CoarSidebar`, `CoarBreadcrumb`, `CoarTabs`, `CoarPagination` |
| Overlays | `CoarDialog`, `CoarPopover`, `CoarPopconfirm`, `CoarToast`, `CoarTooltip` |
| Display | `CoarAvatar`, `CoarBadge`, `CoarCard`, `CoarCodeBlock`, `CoarDivider`, `CoarLabel`, `CoarLink`, `CoarNote`, `CoarProgressBar`, `CoarSpinner`, `CoarTable`, `CoarTag` |
| Utilities | `CoarIcon`, `CoarScrollbar` |
`CoarMarkdown` is in the optional `@cocoar/vue-markdown` package.
## Getting Started
### Prerequisites
- [Node.js](https://nodejs.org/) 22.x (managed via [Volta](https://volta.sh/))
- [pnpm](https://pnpm.io/) 10.x
### Install
```bash
pnpm install
```
### Scripts
| Command | Description |
|---------|-------------|
| `pnpm build` | Build all packages (topological order) |
| `pnpm test` | Run all tests |
| `pnpm lint` | Lint all packages |
| `pnpm docs` | Start VitePress docs dev server |
| `pnpm build:icons` | Rebuild icon components from SVG sources |
| `pnpm format` | Format all files with Prettier |
| `pnpm format:check` | Check formatting without writing |
### Adding a New Package
1. Copy an existing package directory (e.g. `packages/localization/`)
2. Rename and update `package.json` (name, dependencies)
3. Update `tsconfig.json` if needed
4. Run `pnpm install` to link the new package
### Cross-Package Dependencies
Use the workspace protocol for inter-library dependencies:
```json
{
"dependencies": {
"@cocoar/vue-localization": "workspace:*"
}
}
```
Turborepo ensures packages build in the correct topological order.
## Contributing
See [CONTRIBUTING.md](CONTRIBUTING.md) for development guidelines.
## License
[Apache License 2.0](LICENSE) — Copyright (c) 2026 COCOAR e.U.