Nuxt.js3 插件注入的$supabase在script setup中undefined问题

问题原因 #

• 原因1：Nuxt3 中通过 nuxtApp.provide 注入的全局属性，仅会在模板（template）作用域自动挂载可用，<script setup> 属于独立的模块作用域，没有默认注入这些$前缀的全局变量，所以直接调用会报未定义错误。
• 原因2：你的插件文件命名为 supabase.server.js，属于服务端专属插件，只会在服务端运行时执行注入逻辑，客户端环境下不会加载该插件，若你在客户端侧调用会直接找不到该方法。

解决方法 #

步骤1：调整插件适用范围 #

如果你的 Supabase 能力需要在服务端、客户端两端使用，直接将插件文件名改为 supabase.js，去掉.server后缀，插件就会在两端都执行注入；如果确实只需要在服务端使用该插件，后续调用时要增加服务端环境判断，避免客户端侧执行报错。

步骤2：在 <script setup> 中正确获取注入的方法 #

使用 Nuxt3 内置的 useNuxtApp 组合式API获取全局注入的属性，修改你的页面代码如下：

<script setup>
const { $supabase } = useNuxtApp()
console.log($supabase) // 可正常打印出注入的函数
</script>
<template>
{{ $supabase }}
</template>

步骤3：修正类型声明错误（可选，TS 场景需要） #

你当前的类型声明中定义$supabase返回值为string，和实际返回的 Supabase 实例不符，修正类型声明如下：

import { defineNuxtPlugin } from '#app'
import { createClient } from '@supabase/supabase-js/dist/main/index.js'
import type { SupabaseClient } from '@supabase/supabase-js'

export default defineNuxtPlugin(nuxtApp => {
  const config = useRuntimeConfig();
  nuxtApp.provide('supabase', () => createClient(config.supabaseUrl, config.supabaseKey))
})

declare module '#app' {
  interface NuxtApp {
    $supabase (): SupabaseClient
  }
}

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