# NutUI — JD Mobile Vue Component Library

> A Vue 3 mobile UI component library following JD Design guidelines, supporting H5, mini-programs, and cross-platform development via Taro.

## Install

Save in your project root:

# NutUI — JD Mobile Vue Component Library

## Quick Use
```bash
npm install @nutui/nutui
# In main.ts:
import NutUI from '@nutui/nutui'
import '@nutui/nutui/dist/style.css'
app.use(NutUI)
```

## Introduction
NutUI is a mobile-first Vue 3 component library created by JD.com (a major Chinese e-commerce platform). It provides 80+ components optimized for mobile web and mini-program development, following JD's visual design system with support for theme customization and cross-platform compilation via Taro.

## What NutUI Does
- Provides 80+ mobile-optimized Vue 3 components for e-commerce and general use
- Supports WeChat, Alipay, and other mini-programs through Taro integration
- Ships with TypeScript definitions and Vue 3 Composition API support
- Offers theme customization via CSS variables or Sass
- Includes specialized business components for address selection, invoices, and product cards

## Architecture Overview
NutUI components are built as Vue 3 single-file components using the Composition API and TypeScript. Styling uses CSS variables for runtime theming with Sass as the build-time preprocessor. For mini-program targets, components compile through Taro to produce platform-specific output. The library uses Vite for development and builds, with on-demand importing supported through unplugin-vue-components.

## Self-Hosting & Configuration
- Install via npm and import globally or on demand with auto-import plugins
- Customize themes by overriding CSS variables or Sass tokens
- For mini-program targets, install `@nutui/nutui-taro` and configure Taro
- Use unplugin-vue-components for automatic component registration
- Configure viewport units or rem adaption through postcss plugins

## Key Features
- 80+ components covering common mobile UI patterns and business scenarios
- Built on Vue 3 with Composition API and TypeScript throughout
- Cross-platform support for H5 and mini-programs via Taro
- Runtime theme switching through CSS custom properties
- On-demand importing for optimized bundle sizes

## Comparison with Similar Tools
- **Vant** — Youzan's mobile Vue library, larger community, similar scope
- **Ant Design Mobile** — Ant Group's React-based mobile component library
- **Ionic** — Framework-agnostic, web-component based, broader platform targets
- **UniApp** — Full cross-platform framework, not just a component library
- **Varlet** — Material Design mobile Vue 3 library, different design language

## FAQ
**Q: Does NutUI support Vue 2?**
A: NutUI v4 targets Vue 3 only. For Vue 2 projects, use the older NutUI 2.x releases.

**Q: Can I use NutUI in mini-programs?**
A: Yes. Install `@nutui/nutui-taro` and use Taro as the build tool to compile components for WeChat, Alipay, and other mini-program platforms.

**Q: How do I customize the theme?**
A: Override CSS custom properties in your stylesheet, or modify Sass variables if using the Sass source. NutUI supports runtime theme switching via CSS variables.

**Q: Is NutUI free for commercial use?**
A: Yes. NutUI is released under the MIT license.

## Sources
- https://github.com/jd-opensource/nutui
- https://nutui.jd.com/

---
Source: https://tokrepo.com/en/workflows/nutui-jd-mobile-vue-component-library-4c73c255
Author: AI Open Source