Multi‑Platform Development with Taro, Vue 3, and NutUI 3: A Practical Case Study

With the rapid growth of mini‑program users, many platforms (WeChat, JD, ByteDance, Baidu, etc.) are expanding their mini‑program capabilities, prompting teams to seek a "write once, run everywhere" approach. In the JD Cloud (京采云) mobile mall project, the team adopted Taro + Vue 3 + NutUI 3 to achieve multi‑platform development.

The project aims to integrate six management capabilities—demand management, sourcing, supplier management, self‑service mall, contract collaboration, and financial settlement—into a single system, while also delivering an H5 page that can be embedded in client apps and later be deployed to mini‑programs.

After evaluating popular multi‑platform frameworks (Taro, uni‑app, chameleon), the team compared them on development tools, technology stack, multi‑platform support, and performance. They found that Taro offers the most complete TypeScript/JSX support, CSS Modules, and finer‑grained performance optimizations, making it the preferred choice.

Taro Introduction : Taro is an open‑source cross‑framework solution that lets developers use React, Vue, or Nerv to build applications for WeChat, JD, Baidu, Alipay, ByteDance, QQ mini‑programs, H5, and React Native. Taro 3.x provides a lightweight taro-runtime that aligns DOM/BOM APIs for both React and Vue 2/3.

NutUI Introduction : NutUI 3 is a lightweight Vue component library styled for JD. It uses Vite + Vue 3 + TypeScript and fully supports mini‑program adaptation. For each component, a .taro.vue file is added to handle Taro compatibility, and developers can import either the standard Vue version or the Taro‑specific version.

# Vue3 project
npm i @nutui/nutui@next -S
# NutUI for mini‑programs
npm i @nutui/nutui@taro -S

import { createApp } from 'vue'; // Vue
import { Button } from '@nutui/nutui'; // Vue
import { Button } from '@nutui/nutui-taro'; // Taro

The business side built a complete mall flow (home, categories, search, product detail, shop list, cart, order, user profile, address selection) and added procurement‑specific features such as order submission and approval.

Theme customization is achieved by extracting SCSS variables (primary color, button colors, border, etc.) and binding them to Vue 3's v‑bind in component styles, allowing dynamic theme updates via an API.

const colorState = reactive({
  primaryColor: '#f0250f',
  borderColor: '#fef4f3'
});
router.isReady().then(async () => {
  const result = await getTheme();
  if (result?.state === 0) {
    colorState.primaryColor = result.primaryColor;
    colorState.borderColor = result.borderColor;
  }
});

Technical deep‑dive shows how Taro converts a virtual DOM tree into mini‑program templates using taro-runtime , and how NutUI components are adapted via .taro.vue files that render <view> tags compatible with mini‑programs.

<template>
  <view :class="classes" :style="getStyle" @click="handleClick">
    <nut-icon v-if="loading"/>
    <nut-icon :class="icon" v-if="icon && !loading" :name="icon"/>
    <view :class="{ text: icon || loading }" v-if="$slots.default">
      <slot/>
    </view>
  </view>
</template>

Project reflections cover routing (Taro lacks a true router, using component show/hide and a 10‑level navigation limit), page‑cache behavior (similar to Vue's keep‑alive ), scroll event handling (must use onPageScroll ), and performance optimizations (resource loading, lazy rendering, etc.).

In conclusion, the first project built with Taro + Vue 3 + NutUI 3 demonstrated that a single codebase can serve multiple platforms, though it required careful handling of routing, state management, and performance tuning; the experience paves the way for broader multi‑platform adoption.