1

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

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

但是，我得到未定义，要么是因为导入不起作用，要么是因为我以错误的方式调用它。

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

（我英语不好，所以我用翻译的句子。）

插件/supbase.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>
4

1 回答 1

0

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

import { defineNuxtPlugin } from '#app'

进入：

import { defineNuxtPlugin, useRuntimeConfig } from '#app'
于 2022-02-02T23:04:19.357 回答