在Nuxt3中使用Vue3 vue-ganttastic插件遇阻求助

1. 处理SSR兼容性冲突 #

vue-ganttastic依赖浏览器DOM API，而Nuxt3默认启用SSR，这是最常见的问题根源，可通过两种方式解决：

• 在组件外包裹<ClientOnly>标签，强制仅在客户端渲染：

<template>
  <ClientOnly>
    <g-gantt-chart
      :chart-start="new Date(2023, 0, 1)"
      :chart-end="new Date(2023, 11, 31)"
      :tasks="tasks"
    />
  </ClientOnly>
</template>

<script setup>
import { GGanttChart } from 'vue-ganttastic'
import 'vue-ganttastic/dist/vue-ganttastic.css'

const tasks = [
  {
    id: 1,
    label: '任务1',
    start: new Date(2023, 0, 5),
    end: new Date(2023, 0, 15)
  }
]
</script>

• 在nuxt.config.ts中将插件加入转译列表，确保Nuxt正确处理包内代码：

export default defineNuxtConfig({
  build: {
    transpile: ['vue-ganttastic']
  }
})

2. 全局注册组件（可选） #

若需全局使用该组件，创建Nuxt插件文件plugins/vue-ganttastic.ts：

import { defineNuxtPlugin } from '#app'
import { GGanttChart, GGanttRow } from 'vue-ganttastic'
import 'vue-ganttastic/dist/vue-ganttastic.css'

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.component('GGanttChart', GGanttChart)
  nuxtApp.vueApp.component('GGanttRow', GGanttRow)
})

之后直接在页面中使用组件标签即可，仍需配合<ClientOnly>。

3. 确保版本适配 #

卸载旧版本并安装适配Vue3/Nuxt3的最新版：

npm uninstall vue-ganttastic
npm install vue-ganttastic@latest

4. 排查控制台错误 #

若以上步骤无效，查看浏览器控制台报错：

• 若出现window is not defined类错误，改用动态导入组件：

<script setup>
const GGanttChart = defineAsyncComponent(() => import('vue-ganttastic').then(m => m.GGanttChart))
import 'vue-ganttastic/dist/vue-ganttastic.css'
</script>

内容的提问来源于stack exchange，提问作者Kiril Lukiyan