Vue quick start

Install

pnpm add @hhl/vue

Vue 3 is a peer dependency, so install it alongside the library:

pnpm add vue

Register globally

import '@hhl/vue/style.css';
import HhlVue from '@hhl/vue';
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).use(HhlVue).mount('#app');

Import on demand

When you only need one or two components, import them directly — your bundler drops the rest:

<script setup lang="ts">
import { Button } from '@hhl/vue';
</script>

<template>
  <Button variant="primary">Save</Button>
</template>

A live example

This button is the Button component itself, running on this page:

这是一个真实的 Vue 组件：构建时预渲染成 HTML，滚动到可见时才水合，所以首屏没有它也能看。

Two things are worth noticing: it is pre-rendered at build time, so the markup and label exist even before JavaScript runs or when JS is disabled; and it hydrates when scrolled into view, so clicking only becomes interactive then.

In your docs you only need the client:visible directive — no extra configuration:

import ButtonDemo from '../../../../components/demo/ButtonDemo.vue';

<ButtonDemo client:visible />

Theming

Every style reads from CSS variables, so overriding variables re-themes the components without touching selectors:

:root {
  --hhl-color-accent: #4f46e5;
  --hhl-radius: 8px;
}

Each component page lists the full set of variables at the bottom.

Theme color