Add modern demos under `demo/nuxt3` and `demo/nuxt4` (Nuxt UI v4 showcased in Nuxt 4)

[Shooteger]

Is your feature request related to a problem? Please describe.

The current demo is minimal and doesn’t reflect modern best practices or realistic usage with Supabase. I’d like to contribute a more complete demo setup while keeping the existing example intact for continuity.

To do this, I propose organizing the demo folder into versioned subdirectories so we can maintain Nuxt 3 and Nuxt 4 examples side‑by‑side:

demo/
  nuxt3/   # Nuxt 3 demo (current demo with NUXT UI v3)
  nuxt4/   # Nuxt 4 demo primarily to showcase Nuxt UI v4

Note: The Supabase features (e.g., .rpc() usage, RLS examples, and server‑side code) work in Nuxt 3 and Nuxt 4. The reason for a dedicated nuxt4 demo is specifically to showcase Nuxt UI v4 in a realistic setup. As Nuxt UI v4 will be fully public, its more accessible to people and they can try and deploy it somewhere.

Describe the solution you'd like

Add two runnable demos with near‑feature parity:

Common features in both nuxt3 and nuxt4:

• Auth flow example (sign in/out, session handling, route protection/middleware, maybe user sign-up and Supabase Trigger setup)
• Supabase client usage with typed queries
• .rpc() examples
• Clear RLS (Row‑Level Security) example with a minimal schema + policy readme
• Server‑side examples (Nitro server routes / server/api usage) that securely call Supabase

Proposed folder structure

demo/
  nuxt3/
    README.md
    .env.example
    app/            # or pages/ depending on structure
    server/
    supabase/       # schema/example policies and seed
  nuxt4/
    README.md
    .env.example
    app/
    server/
    supabase/

Acceptance criteria

• Both demos start with pnpm|npm|yarn install and a single dev command.
• Both demos include a working auth example and protected route.
• Both demos include at least one .rpc() example and a documented RLS scenario.
• Server‑side example shows secure Supabase access (no secrets in client).
• nuxt4 demo uses Nuxt UI v4 components.
• READMEs document setup (env vars), commands, and a quick tour of code.

Describe alternatives you've considered

• Only updating the current demo once Nuxt UI v4 is released.

Additional context

This change is non‑breaking and additive. It aims to give users a realistic, modern starting point for Nuxt + Supabase, while keeping the existing demo available and familiar.

I would start, once Nuxt UI v4 is officially released and production ready.

[larbish]

Hey @Shooteger, I'm really excited about your request! Thanks for proposing it. From my point of view it makes no sense to keep a Nuxt 3 version of the demo, in fact the demo is already using Nuxt 4 and just need to move the core app into the app folder. But whatever, let's entirely rewrite it with all features and showcases you've mentioned. I'll be happy to review and help once you start it. Let's wait for the official UI 4 release as you said (even if you can already start with the alpha if you want).

Thanks a lot for the proposal!

[Shooteger]

Great! Okay, I will update the current one then to use Nuxt 4 + Nuxt UI v4. I will start once its officially out. I think the change to include the Supabase Schema and seed is a good new thing too, everyone can run it basically out of the box locally.

I would use the new publishable keys from Supabase. As they old keys will be deprecated this year. (Maybe this will need a change in the module as well, some renaming of infos/hints/errors, so its more clear the package will work with the new publishable keys format.

[github-actions]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 30 days.