如何在Nuxt 3.4中正确集成Chart.js？

很多针对Nuxt 2或Nuxt 3早期版本的vue-chartjs集成教程，在Nuxt 3.4中无法正常生效。例如部分教程会触发500错误：

Cannot read properties of undefined (reading 'component')

at ./plugins/charts.js:6:31
at async ViteNodeRunner.directRequest (./node_modules/vite-node/dist/client.mjs:331:5)

我曾尝试参考Nuxt官方文档的插件方式集成：

// plugins/charts.js

import { Bar } from "vue-chartjs"

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Bar)
})

但运行npm run dev后出现两个警告：

[Vue warn]: A plugin must either be a function or an object with an "install" function.

以及：

[Vue warn]: Failed to resolve component: BarChart
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
at <Chart onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 

正确的集成方案 #

核心原因说明

vue-chartjs导出的Bar、Line等是Vue组件，而非Vue插件，因此不能用nuxtApp.vueApp.use()方法注册，这也是你看到第一个警告的原因。

方案一：全局注册组件（通过Nuxt插件）

修改plugins/charts.js，直接全局注册组件：

import { Bar, Line } from 'vue-chartjs'

export default defineNuxtPlugin((nuxtApp) => {
  // 注册你需要的图表组件，自定义全局组件名
  nuxtApp.vueApp.component('BarChart', Bar)
  nuxtApp.vueApp.component('LineChart', Line)
})

之后在任意页面/组件中即可直接使用<BarChart>或<LineChart>标签。

方案二：局部导入使用（推荐，按需加载）

在需要使用图表的页面或组件中，直接导入组件并注册Chart.js所需的核心插件：

<script setup>
import { Bar } from 'vue-chartjs'
// 导入Chart.js需要的基础插件，按需添加
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'

// 注册ChartJS插件
ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)

// 定义图表数据和配置
const chartData = {
  labels: ['一月', '二月', '三月', '四月'],
  datasets: [
    {
      label: '月度销量',
      data: [120, 190, 300, 240],
      backgroundColor: 'rgba(65, 184, 131, 0.6)',
      borderColor: 'rgba(65, 184, 131, 1)',
      borderWidth: 1
    }
  ]
}

const chartOptions = {
  responsive: true,
  maintainAspectRatio: false,
  scales: {
    y: {
      beginAtZero: true
    }
  }
}
</script>

<template>
  <div style="height: 400px;">
    <Bar :data="chartData" :options="chartOptions" />
  </div>
</template>

前置依赖安装

无论哪种方案，都需要确保已安装必要依赖：

npm install vue-chartjs chart.js

内容的提问来源于stack exchange，提问作者Robert Wildling