Nuxt.js自定义插件注册后调用返回undefined/不是函数问题求助

问题排查解决方案 #

先确认你使用的Nuxt版本，对应处理： #

如果你用的是Nuxt 2：

• 先修正配置冲突：你全局已经设置ssr: false启用纯SPA模式，不应该给任何插件配置ssr: true，这个配置在全局SSR关闭时无效，还可能干扰插件加载逻辑。把icons.js的配置改成{ ssr: false, src: "@/plugins/icons.js" }或者直接简写为"@/plugins/icons.js"即可。
• 每次修改nuxt.config.js或者plugins目录下的代码后，必须完全重启本地开发服务，配置修改和插件代码修改不会热更新生效。
• 确认你调用this.$hello的位置是在客户端侧的生命周期/方法中，比如mounted钩子、用户点击事件回调，不要在asyncData、fetch等默认服务端运行的钩子中调用（即便你全局关了SSR，部分生命周期兼容逻辑仍可能触发异常）。

如果你用的是Nuxt 3：

你当前用的是Nuxt 2的插件写法，完全不兼容Nuxt 3，按如下规则修改：

1. 不需要在nuxt.config.js里手动注册plugins目录下的插件，Nuxt 3会自动扫描注册该目录下的所有文件。
2. 把plugins/hello.js代码替换为Nuxt 3的标准写法：

export default defineNuxtPlugin(() => {
  return {
    provide: {
      hello: (msg) => console.log(`Hello ${msg}!`)
    }
  }
})

3. 调用规则：选项式API仍可使用this.$hello调用，组合式API需要先引入const { $hello } = useNuxtApp()再调用。

通用兜底排查方案 #

如果做完以上操作还是报错，直接删除项目根目录下的.nuxt缓存文件夹，再重启开发服务即可，很多时候是旧的构建产物缓存导致插件没有被正确打包注入。

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