Nuxt UI

在 Nuxt 项目中集成和使用 Nuxt UI 。

安装 Nuxt UI

  1. 通过包管理器安装

    使用 npm、yarn 或 pnpm 安装 @nuxt/ui 模块：

    • Yarn

    • NPM

    • PNPM

    yarn add @nuxt/ui
    npm install @nuxt/ui
    pnpm add @nuxt/ui

  2. 添加模块到 Nuxt 配置

    在 nuxt.config.ts 中注册模块：

    export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})

Nuxt UI 会自动安装依赖的 Tailwind CSS 和 Headless UI，无需手动配置。

配置 Tailwind CSS

  1. 导入 Tailwind CSS

    在 assets/css/main.css 中添加 Tailwind 基础样式：

    @import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

  2. 配置 TypeScript（可选）

    如果使用 TypeScript，需在 tsconfig.json 中包含自动生成的类型声明文件：

    {
  "include": ["auto-imports.d.ts", "components.d.ts"]
}

核心组件使用

  1. 包裹应用根组件

    在 app.vue 中使用 <UApp> 包裹整个应用，确保 Toast、Modal 等功能正常工作：

    <template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>

  2. 调用组件

    Nuxt UI 的组件支持自动导入，无需手动引入。例如使用按钮和输入框：

    <template>
  <UButton label="提交" />
  <UInput v-model="text" placeholder="输入内容" />
</template>

自定义配置（可选）

  1. 修改组件前缀

    在 nuxt.config.ts 中通过 prefix 参数修改组件前缀（默认 U）：

    export default defineNuxtConfig({
  ui: {
    prefix: 'My' // 组件名变为 MyButton、MyInput
  }
})

  2. 主题颜色定制

    在配置文件中定义主题颜色别名：

    export default defineNuxtConfig({
  ui: {
    theme: {
      colors: ['primary', 'secondary']
    }
  }
})

  3. 禁用过渡效果

    若需优化性能，可关闭组件过渡：

    export default defineNuxtConfig({
  ui: {
    theme: {
      transitions: false
    }
  }
})