Quick Start

Automatic On‑Demand Import

We recommend using unplugin‑vue‑components and unplugin‑auto‑import for automatic on‑demand imports. This approach enables tree‑shaking to help minimize your project bundle size.

• unplugin‑vue‑components: auto‑import components from rappel‑ui
• unplugin‑auto‑import: auto‑import composables / utility functions from rappel‑ui

Install Dependencies

pnpm

pnpm add -D unplugin-vue-components unplugin-auto-import

npm

npm install -D unplugin-vue-components unplugin-auto-import

yarn

yarn add -D unplugin-vue-components unplugin-auto-import

bun

bun add -D unplugin-vue-components unplugin-auto-import

Vite Configuration

// vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { RappelUIResolver } from 'rappel-ui/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [RappelUIResolver()],
      dts: 'src/types/auto-import.d.ts' //TypeScript type declaration file
    }),
    Components({
      resolvers: [RappelUIResolver({ importStyle: 'sass' })], // importStyle?: 'css' | 'sass' | true
      dts: 'src/types/components.d.ts' // TypeScript type declaration file
    })
  ]
})

IDE Type Hints

When using automatic on‑demand imports via unplugin‑vue‑components, tree‑shaking works correctly at build‑time. However, you may lose IDE intelli‑sense for component props, events and slots inside Vue templates. The resolver only takes effect during build phase. It does not inject global component type information for the Vue language service. To restore template type hints, you need to reference the library’s global type definitions.

TIP

This configuration only affects IDE language‑service behavior. It will not change build‑time on‑demand import or tree‑shaking logic.

Choose one of the following two approaches:

Approach A: Configure tsconfig.json ( Recommended )

Add rappel‑ui/global to compilerOptions.types in your tsconfig.json:

// tsconfig.json

{
  "compilerOptions": {
    "types": ["rappel-ui/global"]
  }
}

Approach B: Use type reference in declaration file

Create or edit env.d.ts under your project root:

/// <reference types="rappel-ui/global" />

After applying configuration changes, restart Vue Language Server:

• Open VS Code command palette: Ctrl + Shift + P (macOS: Cmd + Shift + P)
• Run command: Vue: Restart Vue Language Server

Note:

For WebStorm users: restart your IDE if type hints still do not take effect.

Full Global Import (Not Recommended for Production)

If you want to use all components of rappel‑ui throughout your application, you may perform global registration. Once registered, all components become available in every Vue template without manual import statements.

WARNING

Do not use together with unplugin‑vue‑components, which may cause duplicate component registration

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import RappelUI from 'rappel-ui'

const app = createApp(App)
app.use(RappelUI)
app.mount('#app')

TIP

Register the entire library globally to get full IDE type hints. This will import the whole library and disable tree‑shaking optimization.

Manual On-demand Import

<template>
  <re-button>Click me</re-button>
</template>

<script setup lang="ts">
import { ReButton } from 'rappel-ui'
</script>