Nuxt 集成

@tripo3d/design 提供一个 Nuxt 模块入口,一行接入即可完成:

• 所有组件自动注册(模板中无需 import)
• 所有 helper / composable 自动导入
• Reka UI / vue-sonner 内部依赖配置
• CSS 样式文件注入
• 根级组件如 DialogOpener / Toaster 自动注册（仍需在 app.vue 或根布局手动渲染一次）

兼容 Nuxt 3.16+ 与 Nuxt 4。

安装

请先完成 GitHub Packages 认证配置。

pnpm add @tripo3d/design
pnpm add -D @unocss/nuxt

配置

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@tripo3d/design/nuxt',
    '@unocss/nuxt',
  ],
});

UnoCSS 配置在项目根的 uno.config.ts:

import { defineConfig } from '@tripo3d/design/config';

export default defineConfig();

使用

所有组件/函数直接在模板/脚本中使用,无需 import:

<script setup lang="ts">
// toast、dialog、loading 自动导入
function onClick() {
  toast('Hello Tripo');
}
</script>

<template>
  <!-- Button、Dialog、Toaster 等组件自动注册 -->
  <Button @click="onClick">点我</Button>
</template>

模块选项

名称	类型	默认值	说明
prefix	string	''	为所有自动注册的组件/函数添加前缀,避免与宿主工程冲突

使用前缀

export default defineNuxtConfig({
  modules: [
    ['@tripo3d/design/nuxt', { prefix: 'Tr' }],
  ],
});

此时组件名变为 TrButton、TrDialog,函数名为 TrToast、TrDialog。

模块做了什么

• addComponent注册所有 UI 组件 + 业务组件,filePath 均指向 @tripo3d/design
• addImports自动导入 toast / dialog / loading / cn / useDialog / useCarousel 等 helper
• nuxt.options.vite.optimizeDeps.exclude把 @tripo3d/design 加入 Vite 预构建排除列表,避免 reka-ui 内联导出被拆散
• nuxt.options.css自动注入 @tripo3d/design/style.css

完整源码见 src/nuxt.ts。

注意事项

• 模块要求 Nuxt 版本 ≥ 3.16(定义于 compatibility.nuxt 字段)
• 模块内部已处理 Vite optimizeDeps.exclude,无需宿主工程手动配置
• 如与其他组件库搭配使用,建议设置 prefix 避免命名冲突
• Vue 3 非 Nuxt 项目请参考 Design 概述 的 Vue 3 快速开始