Контекст плагина Nuxt.js3 становится неопределенным

Question

Я разрабатываю приложение с использованием Nuxt.js3 и supabase.

Nuxt.js в plugins / supabase.server.js (я не понял, что лучше для этого - сервер или клиент). Я хочу использовать «supabase = createClient(~~)» из index.vue.

Однако я получаю значение undefined либо потому, что импорт не работает, либо потому, что я неправильно его называю.

Если я использую синтаксис усов и назову его как "{{$supabase}}", функция появится.

(Я плохо говорю по-английски, поэтому использую переведенные предложения.)

плагины / 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
  }
}

страницы / 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'