LazyDali
How to restore the state of a page when navigated from a certain page?
Hey, I had a similar requirement from a listing page with filters in a Vue app.
In my case, I had to store the latest user filter parameters and persist them whenever the user gets back on the page.
I managed it by using the browser sessionStorage. Once I arrive on the listing page, I check if the sessionStorage has the key (an object containing every filter properties), then I loop on a default list of filter properties (to ensure the sessionStorage is using the latest structure) and I set in the page defaults the stored properties (per the last usage). I use a watcher to store in the sessionStorage any filter change.
If you only need to reset the filter parameters, you could simply set the filter parameters upon the page setup.
6 replies
Can't use ref for focus input (SOLVED)
Be aware that manipulating the autofocus has an accessibility concern (if it applies to your criteria) . ref https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
11 replies
How can I prevent VSCode from adding the import statement for auto-imported components?
We definitely want to keep the auto-import in the nuxt config file (https://nuxt.com/docs/guide/concepts/auto-imports) but there should be a way to disable auto explicit imports.
7 replies
Supabase url is required
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.
32 replies
Supabase url is required
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
32 replies
Supabase url is required
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.
32 replies
Supabase url is required
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().
32 replies
Supabase url is required
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();32 replies
Supabase url is required
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/
32 replies