Getting Started
Installation
How to install Colorffy in a Vue 3 or Nuxt 3 project.
Prerequisites
- A Vue 3 (
^3.5) or Nuxt 3 / 4 project. - Node.js 18+ and your package manager of choice.
Install Colorffy UI
pnpm add @colorffy/ui
npm install @colorffy/ui
yarn add @colorffy/ui
bun add @colorffy/ui
Peer dependencies
Colorffy UI relies on the following peer dependencies:
pnpm add @vueuse/components @vueuse/core floating-vue vue
npm install @vueuse/components @vueuse/core floating-vue vue
Install Colorffy CSS (recommended)
Colorffy UI ships unstyled. Add Colorffy CSS for beautiful styling out of the box. It is an optional peer dependency: install the same major version as Colorffy UI, since the components set its --cffy-* variables and the package manager warns when the versions don't match.
pnpm add @colorffy/css
npm install @colorffy/css
You can also use Colorffy CSS on its own — it has no dependency on Colorffy UI.
Add the icon font
UiIconMaterial and the components' built-in icons (chevrons, close buttons, checkmarks) draw with the Material Symbols Rounded font. Install it and load its stylesheet once:
pnpm add @material-symbols/font-700
npm install @material-symbols/font-700
main.ts
import '@material-symbols/font-700/rounded.css'
Register in Vue 3
main.ts
import ColorffyUI from '@colorffy/ui'
import { createApp } from 'vue'
import App from './App.vue'
import '@colorffy/css'
createApp(App).use(ColorffyUI).mount('#app')
Register in Nuxt
Add the stylesheet and the module. The module registers every Ui* component and auto-imports the composables, so no plugin is needed. It works with Nuxt 3 and 4:
nuxt.config.ts
export default defineNuxtConfig({
css: ['@colorffy/css'],
modules: ['@colorffy/ui/nuxt'],
})
See Usage for the module's language options.
Verify the installation
Render a button anywhere in your app:
App.vue
<template>
<UiButton variant="filled" color="primary" text="It works!" />
</template>