在Nuxt 2项目中使用vue-chartjs官方示例报错：Chart.register is not a function

错误原因 #

这个错误的核心是版本不兼容：

• vue-chartjs@5.x仅支持Vue 3，而你使用的Nuxt 2是基于Vue 2的框架，两者无法适配，导致Chart.js的模块调用出现异常。
• chart.js@4.x的API在Vue 2的打包环境下也存在冲突，进一步触发了register is not a function的错误。

解决方案 #

方案一：降级依赖到适配Vue 2的版本 #

这是最直接适配Nuxt 2的方案：

1. 卸载当前不兼容的依赖：

npm uninstall vue-chartjs chart.js

2. 安装适配Vue 2的版本组合：

npm install vue-chartjs@3.5.1 chart.js@3.9.1

3. 调整组件代码（适配vue-chartjs 3.x写法）：

<template>
  <Bar
    id="my-chart-id"
    :options="chartOptions"
    :data="chartData"
  />
</template>

<script>
import { Bar } from 'vue-chartjs'
import { Chart, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'

// 注册Chart.js所需的组件
Chart.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)

export default {
  name: 'BarChart',
  components: { Bar },
  data() {
    return {
      chartData: {
        labels: ['January', 'February', 'March'],
        datasets: [{ data: [40, 20, 12] }]
      },
      chartOptions: {
        responsive: true
      }
    }
  }
}
</script>

方案二：升级到Nuxt 3（可选） #

如果想继续使用最新版的vue-chartjs和chart.js，可以将项目升级到Nuxt 3（基于Vue 3），此时你最初的官方示例代码可以直接正常运行，无需修改依赖版本。

内容的提问来源于stack exchange，提问作者Kos-Mos