Usage
@colorffy/ui gives you 70+ headless Vue 3 components. Register them all globally, or import only what you need.
Register globally (Vue 3)
import ColorffyUI from '@colorffy/ui'
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).use(ColorffyUI).mount('#app')
To use another language for the text the components write on their own, pass { locale, labels } as the second argument. See Localization.
Then use components anywhere — no imports needed:
<template>
<UiButton variant="filled" color="primary" text="Click me!" />
<UiCard>
<template #body>
<h2>Card content</h2>
</template>
</UiCard>
</template>
Import individually (tree-shaking)
<script setup lang="ts">
import { UiAlert, UiButton, UiCard } from '@colorffy/ui'
</script>
<template>
<UiButton variant="filled" color="primary" text="Click me!" />
<UiAlert type="banner" variant="success" message="Operation successful!" />
</template>
Use with Nuxt
Add the module. It registers every Ui* component and auto-imports useToast, useTextUtils, useDateUtils, useColorffyConfig and datePresets, so you need no plugin and no imports. It works with Nuxt 3 and 4.
export default defineNuxtConfig({
modules: ['@colorffy/ui/nuxt'],
})
The optional colorffyUI key sets the language of the text the components write on their own:
export default defineNuxtConfig({
modules: ['@colorffy/ui/nuxt'],
colorffyUI: {
locale: 'es-SV',
labels: 'es',
},
})
See Localization for the options.
Use composables
In Nuxt the composables are auto-imported; in Vue, import them from @colorffy/ui. useToast takes a Ref to a mounted UiAlertToast instance and returns variant helpers plus a generic onToastMessage:
<script setup lang="ts">
import { useToast } from '@colorffy/ui'
import { ref } from 'vue'
const toastRef = ref(null)
const toast = useToast(toastRef)
toast.success('Saved!')
toast.warning('Check the form for errors.')
toast.danger('Something went wrong.')
toast.info('New updates are available.')
toast.primary('Welcome back!')
</script>
<template>
<UiAlertToast ref="toastRef" />
</template>
Use with TypeScript
import type { ButtonColor, ButtonVariant, FloatingPlacement, SizeLevel, ThemeColor } from '@colorffy/ui'
const variant: ButtonVariant = 'filled'
const color: ButtonColor = 'primary'
// Canonical shared unions used across components — narrow them with
// `Extract<>` where a component only supports a subset.
const themeColor: ThemeColor = 'accent'
const size: SizeLevel = 'md'
const placement: FloatingPlacement = 'top-start'
INavigationItem and IMenuItem were removed — use INavItem for navbar, sidebar, and popover-menu items.