Currently, I am working on a project that involves Nuxt.js3 and supabase integration.
In my plugins/supabase.server.js file (I am still unsure whether using server or client is the best approach), I want to call "supabase = createClient(~~)" from index.vue.
However, I am running into issues with undefined values, either due to an import error or incorrect usage of the function.
When I try to access it using the mustache syntax like "{{ $supabase }}", the function does show up.
(Please note that English is not my first language, hence the use of translated sentences.)
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>