Installation

This guide will help you install and configure BreezeUI in your Vue 3 project.

Prerequisites

• Node.js 18.x or higher
• Vue 3.3 or higher
• Tailwind CSS 3.x

1. Install Package

Install @breezeui/vue using your preferred package manager:

pnpm

pnpm add @breezeui/vue

npm

npm install @breezeui/vue

yarn

yarn add @breezeui/vue

bun

bun add @breezeui/vue

2. Install Tailwind CSS

BreezeUI is built on Tailwind CSS. Make sure Tailwind CSS is installed and configured in your project.

pnpm

pnpm add -D tailwindcss postcss autoprefixer

npm

npm install -D tailwindcss postcss autoprefixer

3. Configure Tailwind CSS

In your tailwind.config.js (or tailwind.config.ts), add the content path and plugin for BreezeUI:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}',
    './node_modules/@breezeui/vue/dist/**/*.{js,ts,vue}',
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('tailwindcss-animate'),
  ],
}

You need to install the tailwindcss-animate plugin:

pnpm add -D tailwindcss-animate

4. Import Styles

Import the base styles of BreezeUI in your entry file (e.g., main.ts or main.js):

import '@breezeui/vue/dist/index.css'

5. Use Components

BreezeUI supports two usage methods: auto-import (recommended) and manual import.

Auto Import (Recommended)

Use the unplugin-vue-components plugin to automatically import components on demand, without manual imports.

First, install the plugin:

pnpm

pnpm add -D unplugin-vue-components

npm

npm install -D unplugin-vue-components

Then configure the plugin and BreezeUI resolver in vite.config.ts:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { BreezeUIResolver } from '@breezeui/vue'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        BreezeUIResolver({ importStyle: true })
      ],
    }),
  ],
})

After configuration, you can use components directly in your template:

<template>
  <BrButton>Click me</BrButton>
</template>

Manual Import

If you prefer not to use auto-import, you can also import components manually:

<script setup lang="ts">
import { BrButton } from '@breezeui/vue'
</script>

<template>
  <BrButton>Click me</BrButton>
</template>

Global Registration (Optional)

import { createApp } from 'vue'
import App from './App.vue'
import BreezeUI from '@breezeui/vue'
import '@breezeui/vue/dist/index.css'

createApp(App).use(BreezeUI).mount('#app')

Extra Dependencies Used in Examples

Some examples use @vueuse/core (dark mode toggling) and lucide-vue-next (icons). If you want to import them directly in your app code, install them explicitly:

pnpm add @vueuse/core lucide-vue-next