Getting Started

Set up the Cocoar Design System in your Vue 3 project in a few steps.

1. Install

pnpm add @cocoar/vue-ui

2. Import Fonts & Styles

Import fonts and styles in your app's entry point. Fonts are self-hosted via @fontsource — no external CDN needed.

// main.ts
import '@cocoar/vue-ui/fonts';   // Poppins + Inter (self-hosted)
import '@cocoar/vue-ui/styles';  // Design tokens + component styles

Bring your own fonts?

The font import is optional. If you prefer a CDN or custom fonts, skip @cocoar/vue-ui/fonts and load them yourself. Components fall back to system fonts gracefully.

3. Use Components

Import components directly — no global registration required. Tree-shaking is automatic.

<script setup>
import { CoarButton } from '@cocoar/vue-ui';
</script>

<template>
  <CoarButton>Hello Coar</CoarButton>
</template>

4. Dark Mode

Toggle dark mode by adding the .dark-mode class to the root element. All design tokens and components adapt automatically.

document.documentElement.classList.toggle('dark-mode', isDark);

5. Overlay System

For components that render overlays (Dialog, Toast, Popover, Tooltip), register the plugin once:

// main.ts
import { createApp } from 'vue';
import { CoarOverlayPlugin } from '@cocoar/vue-ui';

createApp(App)
  .use(CoarOverlayPlugin)
  .mount('#app');

And add the overlay host to your root layout:

<template>
  <router-view />
  <CoarOverlayHost />
</template>

Date/Time Components

The date and time pickers use the Temporal API via @js-temporal/polyfill, which is included as a dependency of @cocoar/vue-ui. No extra install needed. When native Temporal support reaches all browsers, the polyfill can be dropped in a future major release.

Additional Packages

Optional packages for extended functionality:

pnpm add @cocoar/vue-localization   # i18n & timezone
pnpm add @cocoar/vue-data-grid      # AG Grid wrapper
pnpm add @cocoar/vue-markdown       # Markdown viewer