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?
I followed Net Ninja
https://www.youtube.com/watch?v=ydz7Dj5QHKY&list=PL4cUxeGkcC9hUb6sHthUEwG7r9VDPBMKO
Net Ninja
YouTube
Supabase Tutorial #1 - What is Supabase?
Hey gang, in this first Supabase tutorial we'll take a look at what Supabase is & what we'll be making in the rest of the series.
🐱💻 Access the course files on GitHub:
https://github.com/iamshaunjp/Supabase-Tutorial-for-Beginners
🐱💻 React Complete Tutorial (on Net Ninja Pro):
https://netninja.dev/p/build-websites-with-react-firebase
🔥🔥🔥 Oth...
Is useSupabasClient your custom composable?
No, he said it is a provided composable by nuxt
I also followed Net Ninja when I was trying to do similar with Firebase (before I knew about Supabase). It could work but you gotta be careful because often the stack versions are not the same or implementation, hence the syntax.
I recommend you to follow the official Supabase from now as your setup is functional (you can connect):
https://supabase.com/docs/reference/javascript/installing
In my case, as I use @nuxt/supabase, I don’t have to import supabase-js nor use createClient. I just call useSupabaseClient() whenever I need it as the plugin provides the composable. And its options/params are set in the nuxt.config.ts module options.
alright guys thanks both of you for your time, I will try more and see
The doc will show you how to async/await the fetch and how to extract the data or error from the response.
@LazyDali @pyplacca
So I abandoned the project I made while following along Net Ninja and deleted it.
I watched some other videos and read some docs, turns out you don't even need to use process.env to access the variables; when I use useSupabaseClient, it accesses those variables spontaneously. In my main project, I checked the server requests in the network while doing some auth and saw that it had accessed both the url and key.
This was very helpful
https://youtu.be/yO-JMkjc4oo?si=j6pzdJBejuJ-bqYx
John Komarnicki
YouTube
Easily Add Authentication With Nuxt 3 + Supabase
📕 Vue 3 Crash Course: https://johnkomarnicki.gumroad.com/l/tqrmw
🤖 SaaS I'm Building (WebDevDaily): https://www.webdevdaily.io/
🚀 Join the channel :https://www.youtube.com/channel/UCr0D7PVNOHqB3Td7lVl_LKw/join
🤖 Website: https://johnkomarnicki.com/
🐦 Twitter: https://twitter.com/john_komarnicki
Timestamps:
0:00 Introduction
0:59 Create Nuxt ...
Oh that’s cool. It’s unfortunate that you had to struggle through it, but I’m glad you’ve found a solution and made progress
Yeah, normally the implementation is super easy. Maybe you didn't restart the server after adding variables in the env file? Anyway, glad it works for you now.
Thank you ❤️
Thank you ❤️