Import to composables

[Xkiztor]

How can I import useSupabaseUser() to my composables? I've tried just importing it like everything else, but that gave me some errors.

[professor-eggs]

I think the useSupabase composables are all only allowed during setup. If you're not using typescript you can pass your client into your composable though.

composables/useFoo.js

export default function (supabaseUser) {
  console.log(supabaseUser)
}

components/widget.vue

<template>
const supabaseUser = useSupabaseUser()
const useFoo(supabaseUser)
</template>

This won't work exactly with typescript because @nuxt/supabase doesn't seem to export the supabase client interfaces so there's no type safety when used like this. You can get type safety if you put all your logic inside the component because the type seems to be inferred from the library.

Note that this is all from a bit of testing on my end, I'm no expert and would be happy to be proven wrong! I'd love a way to get my business logic into my composables.

[Xkiztor]

@professor-eggs Thank you!

[professor-eggs]

I actually stand corrected regarding typescript. I decided to ask chat gpt and it pointed the way lol. This seems to work well, with table names and the return type being inferred correctly.

composables/useFoo.js

import { SupabaseClient } from "@supabase/supabase-js";
import { Database } from "@/lib/database.types";

export default async function (client: SupabaseClient<Database>) {
  const { data } = await client.from("table_name").select();
  return data;
}