vxe-table 是一个功能强大的 Vue 表格组件库，但它依赖浏览器 DOM 环境，无法在服务端渲染（SSR）时直接运行。在 Nuxt 3 项目中使用 vxe-table 时，需要借助 Nuxt 模块进行配置，并将表格组件包裹在 中以确保仅客户端加载。

本文将从安装、模块配置到具体使用，提供完整的集成指南。

安装

执行以下命令安装 vxe-table 核心库以及 Nuxt 专用模块：

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

配置 Nuxt 模块

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

// ...
export default defineNuxtConfig({
  // ...
  modules: [
     // ...
    'vxe-table-nuxt',
    // ...
  ],
  vxeTableSetting: {
    // global: true // 是否全局加载，如果 false 则按需加载
  },
  // ...
})

使用

由于 vxe-table 内部使用了浏览器特有的 API（如 ResizeObserver、鼠标事件等），不能在服务端渲染。因此，所有使用 vxe-table 组件的地方都必须用 标签包裹，或者通过 defineAsyncComponent 进行客户端懒加载。

<template>
  <!-- 确保表格只在客户端渲染 -->
  <ClientOnly>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </ClientOnly>
</template>

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

const gridOptions = reactive({
  border: true,
  height: 300,
    { type: 'seq', width: 70 },
    { field: 'sex', title: 'Sex' },
    { field: 'age', title: 'Age' }
  ],
  data: [
    { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
    { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
    { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
    { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
  ]
})
</script>

https://vxetable.cn