Supabase url is required
Hello please help me, my project can't access the env variables, I have provided both the key and url and yet it tells me to provide them. I have put the screenshots of all my files (env, supabase.js file, index.vue, the error, nuxt config)
27 Replies
If you want to access your env variables directly in your js files, you’d want to do the following
1. Prefix the env key with
VITE_
2. Access the variable from import.meta.env.{KEY}Excuse my ignorance, but can you clarify the second point more?
spoon feed me
is this the way?
If yes, still the same problem (I re-ran npm run dev)
Seems like it should work. Maybe remove the quotes from the env variables? They are not necessary when the value has no white space. I ran into a similar issue in the past and a plugin (don’t remember which one) didn’t like the quotes.
Also, I use the @nuxtjs/supabase dependency and it just works great! You don’t even need to initialize it with createClient as it comes already as a composable (useSupabaseClient()).
I don’t need to yet but I wonder if there’s a way to extend the Composable to set additional custom parameters.
https://supabase.nuxtjs.org/
Nuxt x Supabase - Docs
Nuxt Supabase - Home
A supa simple wrapper around supabase-js to enable usage and integration within Nuxt.
I removed the quotes and still the same problem
Alright, sorry I was trying to support by memory but I just checked on my machine and here's what's working on my app:
1) in nuxt.config.ts, I declare the supabase module as..
2) also in nuxt.config.ts, I define the supabase module options as..
3) in my env file, I have the quotes and simply declared the variable as..
SUPABASE_URL="https://... (replace with your url)
SUPABASE_KEY="abcdef123... (replace with your anon key)
4) then in my page/component, in the script setup, I directly use the supabase with the provided composable
const supabase = useSupabaseClient();
I see you're also declaring the same module in your nuxt.config.ts but then when you created a supabaseClient, you're trying to initialize supabase as if it was the original supabase module (not the @nuxt/supabase module). I don't think you need to use a supabaseClient as the @nuxt/supabase module directly provides a composable as useSupabaseClient().
The @nuxt/supabase module does this magic for you. Pretty convenient.@lazyDali I think that's it, I'm at work now so will try it once I get home. But last night in bed I searched "how to use env variables in nuxt js files" and it mentioned exposing variables in the nuxt config just like you did.
I will thank ye more properly later 😂
For other variables (generally exposed / not in a module options), just be careful of what you expose and how (public vs private) ref https://nuxt.com/docs/guide/going-further/runtime-config
And if you’re using Vite and want to use an env variable directly in your code (ex APP_URL, …), you can do as @pyplacca instructed.
Nuxt
Runtime Config · Nuxt Advanced
Nuxt provides a runtime config API to expose configuration and secrets within your application.
I’m aware of this, but I’m not sure why the bite prefix suggestion wasn’t working for you
Yes. VITE_ prefix would work but I only need these 2 variables in the module options in the nuxt.config.ts so I don’t even need to bother.
I’ve recently used supabase via the same approach without issues. I’m guessing the scope might be a factor. Mine was in a plugin
Ah right 👍
Yeah, I guess that @BloodBunn has setup both the original plugin and the nuxt one. Your way definitely works too but he would need to prefix and import the same way you did.
so here it is what it looks like now, I"m sure i'm using the useSupabaseClient wrong here. it says title not defined. how do I use useSupabaseClient to access my 'smoothies' table in my supabase project?
