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:
pnpm add @colorffy/css
npm install @colorffy/css
You can also use Colorffy CSS on its own — it has no dependency on Colorffy UI.
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 3
Add the stylesheet, then register the plugin:
nuxt.config.ts
export default defineNuxtConfig({
css: ['@colorffy/css'],
})
plugins/colorffy-ui.ts
import ColorffyUI from '@colorffy/ui'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(ColorffyUI)
})
Verify the installation
Render a button anywhere in your app:
App.vue
<template>
<UiButton variant="filled" color="primary" text="It works!" />
</template>