NutUI — JD Mobile Vue Component Library

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/