快速开始

Mojo UI 是 YYmojo 公司旗下维护的 UI 组件库，用于统一 YYmojo 业务产品中的 Vue 3 / Nuxt 4 组件体验。

包名为 @yymojo-tec/mojo-ui，支持 Vue 3 插件接入，也支持 Nuxt 4 module 接入。

安装

pnpm add @yymojo-tec/mojo-ui

也可以使用 npm 或 yarn：

npm install @yymojo-tec/mojo-ui

yarn add @yymojo-tec/mojo-ui

Vue 3 全量注册

在 main.ts 中注册组件库，并引入样式文件。

import { createApp } from "vue";
import MojoUi from "@yymojo-tec/mojo-ui";
import "@yymojo-tec/mojo-ui/style.css";
import App from "./App.vue";

createApp(App).use(MojoUi).mount("#app");

注册后即可在任意组件中直接使用：

<template>
  <MoButton type="primary">确认</MoButton>
  <MoInput placeholder="请输入内容" />
</template>

Vue 3 按需导入

如果不想全量注册，可以直接导入需要的组件。样式仍需要在入口文件或当前组件中引入一次。

<script setup lang="ts">
import { MoButton, MoCard, MoInput } from "@yymojo-tec/mojo-ui";
import "@yymojo-tec/mojo-ui/style.css";
</script>

<template>
  <MoCard>
    <MoInput placeholder="请输入名称" />
    <MoButton type="primary">保存</MoButton>
  </MoCard>
</template>

Nuxt 4 Module 接入

Nuxt 4 推荐使用 Mojo UI 提供的 Nuxt module，而不是手写 plugins/mojo-ui.ts。

export default defineNuxtConfig({
  modules: ["@yymojo-tec/mojo-ui/nuxt"]
});

Module 会在 Nuxt 构建阶段完成这些工作：

• 自动注入 @yymojo-tec/mojo-ui/style.css
• 自动注册所有 Mo* 组件，参与 Nuxt 组件解析
• 自动把 @yymojo-tec/mojo-ui 和 @headlessui/vue 加入 build.transpile
• 注入运行时插件，执行 nuxtApp.vueApp.use(MojoUi)
• 处理 SSR/client 下的依赖转译一致性

Nuxt 4 使用组件

接入 module 后，页面里可以直接使用组件，不需要手动导入。

<script setup lang="ts">
const status = ref("draft");
</script>

<template>
  <MoButton type="primary">创建任务</MoButton>
  <MoSelect
    v-model="status"
    :options="[
      { label: '草稿', value: 'draft' },
      { label: '已发布', value: 'published' }
    ]"
  />
</template>

Nuxt 4 迁移说明

如果之前使用过手写插件：

// plugins/mojo-ui.ts
import MojoUi from "@yymojo-tec/mojo-ui";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(MojoUi);
});

接入 Nuxt module 后可以删除这个插件。

如果之前在 nuxt.config.ts 里手动引入样式：

export default defineNuxtConfig({
  css: ["@yymojo-tec/mojo-ui/style.css"]
});

也可以删除这一项，因为 module 默认会自动注入样式。

迁移后建议清理 Nuxt 缓存并重启 dev server：

Remove-Item -Recurse -Force .nuxt
Remove-Item -Recurse -Force node_modules\.vite
pnpm dev

Nuxt 4 按需导入

如果你不想启用组件自动注册，也可以关闭 components 后手动导入组件：

export default defineNuxtConfig({
  modules: ["@yymojo-tec/mojo-ui/nuxt"]
});

<script setup lang="ts">
import { MoButton, MoDialog } from "@yymojo-tec/mojo-ui";

const visible = ref(false);
</script>

<template>
  <MoButton type="primary" @click="visible = true">打开弹窗</MoButton>

  <MoDialog v-model="visible" title="提示">
    Nuxt 4 中按需使用 Mojo UI 组件。
  </MoDialog>
</template>

工具方法

组件库也导出常用校验规则和校验函数：

import { requiredRule, emailRule, phoneRule, isEmail, isPhone } from "@yymojo-tec/mojo-ui";