Installation

Want the easiest way to get started? Simply clone the see-u-ui-project repository and start using it right away.

🚀 Our development workflow automatically pulls the latest npm package of the component library every hour.

Install via Dcloud Plugin (Recommended)

1. Create a new uni-app (Vue 3) project in HBuilder X.
2. Go to the Plugin Marketplace, download the plugin, and import it into HBuilder X.
3. Configure the SeeYouUI component library

Install via NPM

Run the following command in your project root directory:

npm

// If there is no package.json file in your root directory, run:
// npm init -y

npm i see-u-ui

// Update
// npm update see-u-ui

cnpm

// If there is no package.json file in your root directory, run:
// cnpm init -y

cnpm i see-u-ui

// Update
// cnpm update see-u-ui

yarn

// If there is no package.json file in your root directory, run:
// yarn init -y

yarn add see-u-ui

// Update
// yarn update see-u-ui

pnpm

// If there is no package.json file in your root directory, run:
// pnpm init -y

pnpm add see-u-ui

// Update
// pnpm update see-u-ui

Install SCSS

SeeYouUI depends on SCSS. You must install it, otherwise the library will not work properly.

• If your project was created with HBuilder X, install the SCSS plugin directly from the Plugin Marketplace.
• If your project was created with vue-cli, install sass (scss) support using the following commands. Skip this step if it is already installed.

Note

When installing sass-loader, make sure to use version 10. Otherwise, compatibility issues between Vue and Sass may cause errors.

npm

npm i sass@1.63.2 -D
npm i sass-loader@10.4.1 -D

cnpm

cnpm i sass@1.63.2 -D
cnpm i sass-loader@10.4.1 -D

yarn

yarn add sass@1.63.2 -D
yarn add sass-loader@10.4.1 -D

pnpm

pnpm add sass@1.63.2 -D
pnpm add sass-loader@10.4.1 -D

🔧 The component library has been installed successfully — you're halfway there!

Next, complete the final step: Configuration, and then you can start using the components.

Configuration

This section covers the minimum required configuration. For more details, see Configuration.

Import SeeYouUI in main.js

// main.js
import SeeYouUI from "see-u-ui"; 

// #ifdef VUE3
import { createSSRApp } from "vue";
export function createApp() {
  const app = createSSRApp(App);
  app.use(SeeYouUI); 
  return {
    app,
  };
}
// #endif

Import the global SCSS theme in uni.scss

/* uni.scss */
@import "see-u-ui/src/theme.scss"; 

Configure easycom for automatic component imports in pages.json

Tip

After enabling easycom auto-import, you can use SeeYouUI components directly in your project without manual imports.

If you prefer manual imports, see Configuration – Without easycom

// pages.json
{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^see-(.*)": "see-u-ui/src/components/see-$1/index.vue"
    }
  },
  "pages": [
    // ...
  ]
}

🎉 All set! You have successfully configured the SeeYouUI component library.

Next, check out Quick Start or try creating a Button component.