Build Multi‑Platform Mini‑Programs Quickly with NutUI 3.0 and Taro

Background and Motivation

As the number of deployment channels (APP, H5, and multiple mini‑program platforms) grows, developers face the pain of writing separate code for each platform. NutUI, a JD‑style component library, aims to improve developer experience by adding cross‑platform mini‑program support.

NutUI + Taro Integration

NutUI now collaborates with Taro, allowing developers to use over 30 components to build mini‑programs with a single Vue 3 codebase. Taro officially recommends NutUI for the Vue stack, enabling seamless development for H5 and various mini‑programs.

NutUI 3.0 Architecture Upgrade

Webpack upgraded to Vite, greatly improving development efficiency.

Full adoption of TypeScript.

Native support for Vue 3.

Added mini‑program development capability.

Visual and Documentation Improvements

The website, documentation, and demo have been refreshed to better showcase NutUI’s features. Documentation now includes a tab switcher for quick navigation and supports mini‑program preview demos via QR codes.

Quick Start for Mini‑Program Development

Installation

Install NutUI via npm or Yarn.

Install Taro CLI

# npm install -g @tarojs/cli
# OR yarn global add @tarojs/cli
# OR cnpm install -g @tarojs/cli
# If sass‑related errors occur, install mirror-config-china first:
npm install -g mirror-config-china

Verify Installation

taro -v

Project Initialization

taro init myApp

Select the "Vue3 + NutUI" template during the interactive setup.

On‑Demand Component Usage (Recommended)

import { createApp } from "vue";
import App from "./App.vue";
import { Button, Cell, Icon } from "@nutui/nutui-taro";
import "@nutui/nutui-taro/dist/style.css";

createApp(App).use(Button).use(Cell).use(Icon);

Global Component Usage

import { createApp } from "vue";
import App from "./App.vue";
import NutUI from "@nutui/nutui-taro";
import "@nutui/nutui-taro/dist/style.css";

createApp(App).use(NutUI);

Note: Global usage imports all components, which may increase bundle size.

Future Outlook

NutUI plans to release a React version (NutUI‑React) in Q4, continue enriching Vue components, and publish design specifications (Sketch resources) to help designers and developers maintain consistent UI standards.

Repository Links

GitHub repository: https://github.com/jdf2e/nutui

Official site: https://nutui.jd.com/3x/#/

Issue feedback: https://github.com/jdf2e/nutui/issues