2

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>
kissu
  • 40,416
  • 14
  • 65
  • 133
takumikunn15
  • 21
  • 3
  • Where exactly is this console.log? You're referring it as global variable. It's not. You need to access instance property. This is what `{{ $supabase }}` does – Estus Flask Nov 17 '21 at 06:04
  • @EstusFlask Thanks for the reply. I forgot to write it, so I added it. I wrote console.log($supabase) in – takumikunn15 Nov 17 '21 at 06:55
  • I'm not sure this works good with `script setup` as it's very limiting. This is specific to Nuxt but I'd expect it to be available in regular `script`'s `context` – Estus Flask Nov 17 '21 at 08:11
  • @EstusFlask Thank you, I hope there is a way to implement this in script setup, but if not, I'll give up. Thank you very much. – takumikunn15 Nov 17 '21 at 09:24

1 Answers1

2

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

import { defineNuxtPlugin } from '#app'

Into:

import { defineNuxtPlugin, useRuntimeConfig } from '#app'
user2929594
  • 252
  • 1
  • 3
  • 10