Colorffy UI
Usage
Register and use Colorffy UI components in Vue 3 and Nuxt 3.
@colorffy/ui gives you 70+ headless Vue 3 components. Register them all globally, or import only what you need.
Register globally (Vue 3)
main.ts
import ColorffyUI from '@colorffy/ui'
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).use(ColorffyUI).mount('#app')
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>
Register globally (Nuxt 3)
plugins/colorffy-ui.ts
import ColorffyUI from '@colorffy/ui'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(ColorffyUI)
})
Enable auto-imports (optional)
nuxt.config.ts
export default defineNuxtConfig({
components: [
{
path: 'node_modules/@colorffy/ui/dist',
pattern: '**/*.vue',
pathPrefix: false,
},
],
})
Use composables
import { useDateUtils, useTextUtils, useToast } from '@colorffy/ui'
const toast = useToast()
toast.show({ message: 'Success!', variant: 'success' })
Use with TypeScript
import type { ButtonColor, ButtonVariant } from '@colorffy/ui'
const variant: ButtonVariant = 'filled'
const color: ButtonColor = 'primary'