Nuxt.js3插件的上下文变得没有定义

Question

我正在使用Nuxt.js3和supabase开发一个应用程序。

Nuxt.js中的plugins/upabase.server.js(我还没有弄清楚服务器或客户端是否也更适合这一点)。我想使用index.vue中的"supabase =index.vue(~)“。

但是，我没有定义，要么是因为导入不起作用，要么是因为我把它称为错误的方式。

如果我使用胡子语法并将其称为"{{ $supabase }“，则该函数将出现。

(我不擅长英语，所以我用翻译过的句子。)

plugins/supabase.server.js

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

export default defineNuxtPlugin(nuxtApp => {
  const config = useRuntimeConfig();
  nuxtApp.provide('supabase', () => createClient(config.supabaseUrl, config.supabaseKey))
})
declare module '#app' {
  interface NuxtApp {
    $supabase (): string
  }
}

pages/index.vue

<script setup>
console.log($supabase) //$supabase is not defined
</script>
<template>
{{ $supabase }} // () => createClient(config.supabaseUrl, config.supabaseKey)

</template>

Answer 1

请从useRuntimeConfig进口'#app'。因此，在您的示例中，更改第一行：

import { defineNuxtPlugin } from '#app'

转入：

import { defineNuxtPlugin, useRuntimeConfig } from '#app'