Getting Started

Create a Vue 3 Project

# Create a Vite project using pnpm
pnpm create vite my-app --template vue-ts
cd my-app

Install @lh-ui/vue3

pnpm add @lh-ui/vue3

Full Import (main.ts)

import { createApp } from 'vue'
import App from './App.vue'
import LhUiPlus from '@lh-ui/vue3'
import '@lh-ui/vue3/dist/index.css'

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

Use Components

<script setup lang="ts">
</script>

<template>
  <div>
    <LhButton type="primary">Primary</LhButton>
    <LhButton type="success">Success</LhButton>
    <LhButton type="warning">Warning</LhButton>
    <LhButton type="danger">Danger</LhButton>
    <LhButton type="info">Info</LhButton>
  </div>
</template>

Global Config & Theming

LhConfigProvider provides global config (locale, size) and theme variables (themeVars), each passed as an individual prop:

<script setup lang="ts">
import { zhCN } from '@lh-ui/vue3'
</script>

<template>
  <LhConfigProvider
    :locale="zhCN"
    size="medium"
    :theme-vars="{ 'primary-color': '#5B8C5A' }"
  >
    <LhButton type="primary">Button</LhButton>
  </LhConfigProvider>
</template>

• locale: locale messages, imported as named exports (zhCN / enUS) from the package root.
• size: global size — small / medium / large / mini.
• themeVars: theme variables; the --lh- prefix may be omitted. Preset themes can be switched with useLhPresetTheme — see Theme Presets.

Demo