在Nuxt.js中正确使用VueChartkick及解决<line-chart>未注册报错

报错核心是line-chart组件未被全局注册，触发原因如下：

• chart.js 依赖浏览器端DOM API，Nuxt默认插件会同时在服务端、客户端执行，服务端不存在window对象，会导致插件加载中断，后续组件注册逻辑完全不执行
• 修改配置后未重启Nuxt服务、插件路径和实际文件不匹配，也会导致插件未正常加载

• 第一步：确认plugins/vue-chartkick.js文件代码正确，无语法错误

import Vue from 'vue'
import Chartkick from 'vue-chartkick'
import Chart from 'chart.js'

Vue.use(Chartkick.use(Chart))

注：需提前安装vue-chartkick和chart.js依赖，避免模块加载失败

• 第二步：修改nuxt.config.js的插件配置项，将该插件标记为仅客户端执行，规避服务端加载报错

plugins: [
  { src: '~/plugins/vue-chartkick.js', ssr: false }
],

注意：需保证配置中填写的插件路径和实际文件路径完全一致，包括文件后缀，避免路径匹配失败。

• 第三步：删除项目根目录下的.nuxt缓存文件夹，重启Nuxt开发服务，让新配置生效

配置完成后，原页面的折线图模板片段无需修改，可正常渲染：

<div class="pa-4 pa-md-8">
  <div class="border-light pa-4 pa-md-12">
    <line-chart legend="bottom" :data="series(resultSet)"> </line-chart>   
  </div>
</div>

内容的提问来源于stack exchange，提问作者Imalsha Rathnaweera