Vxe UI 是一套功能强大的 Vue 组件库，提供表格（vxe-table）、甘特图（vxe-gantt）、设计器（vxe-design）以及基础 UI 组件（vxe-pc-ui）等丰富功能。在 Nuxt 4 项目中使用 Vxe UI 时，官方为每个子库都提供了对应的 Nuxt 模块，其中 vxe-pc-ui-nuxt 是基础 UI 模块，覆盖了大部分通用组件，表格、甘特图等专用模块可按需独立添加。本文将提供完整的集成指南。

安装

根据项目需要安装对应的核心库和 Nuxt 模块：
基础 UI 组件（按钮、输入框、弹窗等）
官方文档：https://vxeui.com

npm install vxe-pc-ui vxe-pc-ui-nuxt -D

表格组件（vxe-table）
官方文档：https://table.vxeui.com

npm install vxe-table vxe-table-nuxt -D

甘特图组件（vxe-gantt）
官方文档：https://gantt.vxeui.com

npm install vxe-gantt vxe-gantt-nuxt -D

设计器组件（vxe-design）
官方文档：https://design.vxeui.com

npm install vxe-design vxe-design-nuxt -D

如果你同时使用多个子库（例如基础 UI + 表格），只需分别安装对应的依赖和模块即可，它们之间相互兼容。

配置 Nuxt 模块

在 nuxt.config 中注册 vxe-pc-ui-nuxt 模块：

// ...
export default defineNuxtConfig({
  // ...
  modules: [
     // ...
    'vxe-pc-ui-nuxt',    // 基础 UI（必须，如果用了其他 Vxe 库）
    'vxe-table-nuxt',    // 表格（可选）
    'vxe-gantt-nuxt',    // 甘特图（可选）
    'vxe-design-nuxt',   // 设计器（可选）
    // ...
  ],
  vxeBaseSetting: {
    // global: true // 是否全局加载，如果 false 则按需加载
  },
  // 如果需要对库单独配置，可以使用对应 setting 字段
  // vxeTableSetting: { global: true },
  // vxeGanttSetting: { global: true },
  // vxeDesignSetting: { global: true },
  // ...
})

• 自动将 Vxe UI 组件（如 、 等）注册为全局可用组件。
• 自动引入样式文件，无需手动导入 CSS。
• 优化 SSR 环境下的客户端加载。

使用

注意：部分组件（如表格、甘特图）强依赖浏览器 DOM API，在服务端渲染时会报错。务必使用 包裹：

<template>
  <div>
    <vxe-button status="primary">按钮</vxe-button>
    <vxe-input v-model="nameVal"></vxe-input>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const nameVal = ref('')
</script>

https://vxeui.com