NutUI Documentation

NutUI is a collection of JD-style mobile UI components designed for Vue2 and Vue3. It enables developers to build high-quality H5 applications and mini-programs (such as WeChat, Alipay, and JD mini-programs) using a single codebase.

Key features include:

• 80+ High Quality Components: A wide range of ready-to-use UI elements.
• Multi-End Support: Write once and deploy to H5 and various mini-program platforms.
• Tree Shaking: Optimized for smaller bundle sizes.
• Custom Themes: Supports customization via over 700 style variables.
• TypeScript Support: Built with TypeScript for better developer experience.
• i18n Support: Internationalization capabilities included.
• SSR Support: Experimental support for Server-Side Rendering.

To use the TrendArrow component in your Vue application, import it from @nutui/nutui and register it as a plugin using app.use().

import { createApp } from 'vue'
import { TrendArrow } from '@nutui/nutui'

const app = createApp()
app.use(TrendArrow)

To use the Grid component in a Taro project, import Grid and GridItem from @nutui/nutui-taro and register them with your Vue application instance.

import { createApp } from 'vue'
import { Grid, GridItem } from '@nutui/nutui-taro'

const app = createApp()
app.use(Grid)
app.use(GridItem)

To use the Radio components, import and register Radio and RadioGroup with your Vue application instance.

import { createApp } from 'vue'
import { Radio, RadioGroup } from '@nutui/nutui'

const app = createApp()
app.use(Radio)
app.use(RadioGroup)

To use the Form and FormItem components in your Vue application, register them using the app.use() method.

import { createApp } from 'vue'
import { Form, FormItem } from '@nutui/nutui'

const app = createApp()
app.use(Form)
app.use(FormItem)

To use the Backtop component in a Taro project, register it globally using the app.use() method during application initialization.

import { createApp } from 'vue'
import { Backtop } from '@nutui/nutui-taro'

const app = createApp()
app.use(Backtop)

Install @nutui/auto-import-resolver along with unplugin-vue-components as development dependencies to enable on-demand component loading for NutUI. You can use pnpm, npm, yarn, or Bun.

# via pnpm
pnpm add @nutui/auto-import-resolver unplugin-vue-components -D

# via npm
npm i @nutui/auto-import-resolver unplugin-vue-components -D

# via yarn
yarn add @nutui/auto-import-resolver unplugin-vue-components -D

# via Bun
bun add @nutui/auto-import-resolver unplugin-vue-components -D