@whskyler/skyler-ui

A Vue 3 + TypeScript component library tailored for uniapp mini-programs (WeChat / Alipay / ByteDance).

Why source distribution

Mini-program runtimes (mp-weixin, mp-alipay, mp-toutiao) don't consume Vue's virtual DOM — they have their own template compilation pipelines (WXML / AXML / TTML). A pre-built dist/index.js from a Vue library only works on H5.

So this package follows the same shape as uview-plus / wot-design-uni / sard-uniapp: the npm tarball ships the original src/ (.vue + .scss + .ts) sources, and the consumer's uniapp build pipeline (Vite + uni's per-platform compilers) processes them for every target.

node_modules/@whskyler/skyler-ui/
├── src/
│   ├── components/<name>/{<name>.vue,types.ts,index.ts}
│   ├── styles/{_vars.scss,index.scss,components/_<name>.scss}
│   ├── utils/
│   └── index.ts          ← package main
├── package.json
├── README.md
└── LICENSE

package.json#main points at ./src/index.ts. SFC + SCSS + TS are first-class inputs to any modern uniapp / Vite project.

Install

pnpm add @whskyler/skyler-ui

Register

// main.ts (uniapp)
import { createSSRApp } from 'vue'
import App from './App.vue'
import SkylerUI from '@whskyler/skyler-ui'

export function createApp() {
  const app = createSSRApp(App)
  app.use(SkylerUI)
  return { app }
}

<!-- App.vue -->
<style lang="scss">
@use '@whskyler/skyler-ui/scss';
</style>

On-demand

<script setup lang="ts">
import { SkyButton, SkyTag } from '@whskyler/skyler-ui'
</script>

<template>
  <sky-button type="primary" @click="onTap">Hello</sky-button>
  <sky-tag type="success">Online</sky-tag>
</template>

<style lang="scss">
@use '@whskyler/skyler-ui/scss/components/button';
@use '@whskyler/skyler-ui/scss/components/tag';
</style>

Theme

All design tokens are exposed as CSS variables under :root / page:

page {
  --sky-color-primary: #ff6b6b;
  --sky-radius-md: 16rpx;
}

Components

SkyButton, SkyIcon, SkyCell, SkyTag, SkyDivider, SkyLoading, SkyToast. See the documentation site for full API and live examples.

License

MIT © whskyler