Nuxt.js3 plugin's context becomes undefined

Question

I am developing an application using Nuxt.js3 and supabase.

Nuxt.js in plugins/supabase.server.js (I haven't figured out if server or client is better for this too.) I want to use "supabase = createClient(~~)" from index.vue.

However, I get undefined, either because the import is not working or because I am calling it the wrong way.

If I use the mustache syntax and call it like "{{ $supabase }}", the function will appear.

(I am not good at English, so I use 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>

Answer 1

Please import useRuntimeConfig from '#app'. So in your example change the first line:

import { defineNuxtPlugin } from '#app'

Into:

import { defineNuxtPlugin, useRuntimeConfig } from '#app'