Hy Component Library hy-app Usage Tutorial

Friendly Reminder

• Friendly reminder: node (recommended) >= 16.14.0, sass (recommended)
• 1.53.0<=sass<=1.101.0

🚀 Download scss (install if not already installed)

Friendly Reminder

The Hy Component Library uses scss, so anyone who doesn't have the scss plugin installed needs to install it. The version must be higher than 1.78.0

npm

$ npm install -D [email protected]

pnpm

$ pnpm add -D [email protected]

cnpm

$ cnpm install -D [email protected]

yarn

$ yarn add -D [email protected]

🌈 Download dayjs (install if not already installed)

Friendly Reminder

Note: Since the time picker uses dayjs, you need to install dayjs when using it, otherwise errors will occur

npm

$ npm install dayjs

pnpm

$ pnpm add dayjs

cnpm

$ cnpm install dayjs

yarn

$ yarn add dayjs

🌵 Install @hy-app/ui

Important Notice

2026-07-13 hy-app has ceased further iterative updates as of v0.7.4 and will no longer add features or fix issues. Please download and migrate to the brand-new version @hy-app/ui.

npm

$ npm install @hy-app/ui

pnpm

$ pnpm add @hy-app/ui

cnpm

$ cnpm install @hy-app/ui

yarn

$ yarn install @hy-app/ui

Configure Global Component Auto-Import

Modify the ./src/pages.json file in the project root directory and add the following easycom configuration:

./src/pages.json

{
    "easycom": {
        "custom": {
            "^hy-(.*)": "@hy-app/ui/components/hy-$1/hy-$1.vue"
        }
    }
}

Make Volar/VS Code Recognize Components

VS Code and Trae can provide component property hints, type checking, and auto-completion

{
    "compilerOptions": {
        "types": ["@hy-app/ui/global"]
    }
}

🐔 Globally Import Component Library Styles (Modify uni.scss)

The Hy Component Library's global styles, theme variables, and component base styles must be imported together, otherwise components will lose their styling effects.

./uni.scss

@use '@hy-app/ui/index.scss' as *;

🌳 Using Components on Pages

<template>
    <!-- Then use it directly on any page you need -->
    <hy-input></hy-input>
</template>