feat: add organization list component

[wobsoriano]

This PR adds an <OrganizationList /> component similar to https://clerk.com/docs/components/organization/organization-list

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
vue-clerk	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 1, 2024 6:26pm

[Tigran-Harutyunyan]

This PR adds an <OrganizationList /> component similar to https://clerk.com/docs/components/organization/organization-list

Thank you so much!

[wobsoriano]

@Tigran-Harutyunyan Im updating docs, etc. so will probably release it tomorrow 😁

[Tigran-Harutyunyan]

@Tigran-Harutyunyan Im updating docs, etc. so will probably release it tomorrow 😁

Accidentally found out about the callback trick - :afterCreateOrganizationUrl="(org) => /organization/${org.id}" . it was expected., but official clerk docs are a bit misleading-"Full URL or path to navigate after a successful organization switch."

[Tigran-Harutyunyan]

@Tigran-Harutyunyan Im updating docs, etc. so will probably release it tomorrow 😁

Thanks for great job updating the docs! Do you think it makes sense to have useOrganization() and useOrganizationList() composables from here ? https://clerk.com/docs/references/react/use-organization-list I am just translating code from Next.js that is why the questions arise. isLoaded state for each composable is used and I think they are separate processes.

[Tigran-Harutyunyan]

I think OrganizationsList is not imported. https://github.com/wobsoriano/vue-clerk/blob/main/src/index.ts updated the package but import is not available. Thank you.

[Tigran-Harutyunyan]

@wobsoriano could you please show me how to use clerk in server routes "defineEventHandler" ? Your example shows the usage inside routes middleware. Need to access organization for server side API`s. Thank you.

[wobsoriano]

@wobsoriano could you please show me how to use clerk in server routes "defineEventHandler" ? Your example shows the usage inside routes middleware. Need to access organization for server side API`s. Thank you.

You need to use vue-clerk with h3-clerk. Check usage here https://github.com/wobsoriano/nuxt-clerk-template/blob/main/server/api/protected.ts

Also make sure you're using the nightly version of Nuxt, until Nitro releases a new version.

[Tigran-Harutyunyan]

@wobsoriano could you please show me how to use clerk in server routes "defineEventHandler" ? Your example shows the usage inside routes middleware. Need to access organization for server side API`s. Thank you.

You need to use vue-clerk with h3-clerk. Check usage here https://github.com/wobsoriano/nuxt-clerk-template/blob/main/server/api/protected.ts

Also make sure you're using the nightly version of Nuxt, until Nitro releases a new version.

Thanks for insight. Unfortunately could not find any trace of 'orgId' in h3-clerk. I need "orgId". Another mind blowing phenomena noticed is the randomization of "orgId. Just put a button in Ui and pressed it. Really random orgId`s. I have two. how is that possible if organization is not changing?