Merge pull request #32 from wobsoriano/clerk-js-v5

Clerk-JS v5 Support

docs/authentication/sign-in.md

@@ -5,7 +5,7 @@ outline: deep
 # `<SignIn />`
 
 <br />
-<img src="https://clerk.com/_next/image?url=%2Fdocs%2Fimages%2Fui-components%2Fcomponent-sign_in.svg&w=1080&q=75" />
+<img src="https://clerk.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2F_docs%2Fmain%2Fui-components%2Fsign-in.svg&w=1080&q=75" />
 
 The `<SignIn />` component renders a UI for signing in users. The functionality of the `<SignIn />` component is controlled by the instance settings you specify in your [Clerk Dashboard](https://dashboard.clerk.com). You can further customize your `<SignIn />` component by passing additional properties at the time of rendering.
 

docs/authentication/sign-up.md

@@ -5,7 +5,7 @@ outline: deep
 # `<SignUp />`
 
 <br />
-<img src="https://clerk.com/_next/image?url=%2Fdocs%2Fimages%2Fui-components%2Fcomponent-sign_up.svg&w=1080&q=75" />
+<img src="https://clerk.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2F_docs%2Fmain%2Fui-components%2Fsign-up.svg&w=1080&q=75" />
 
 The `<SignUp />` component renders a UI for signing up users. The functionality of the `<SignUp />` component is controlled by the instance settings you specify in your [Clerk Dashboard](https://dashboard.clerk.com). You can further customize your `<SignUp />` component by passing additional properties at the time of rendering.
 

docs/organization/create-organization.md

@@ -5,7 +5,7 @@ outline: deep
 # `<CreateOrganization />`
 
 <br />
-<img src="https://clerk.com/_next/image?url=%2Fdocs%2Fimages%2Fui-components%2Fcomponent-org_create.svg&w=2048&q=75" />
+<img src="https://clerk.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2F_docs%2Fmain%2Fui-components%2Fcreate-organization.svg&w=1080&q=75" />
 
 The `<CreateOrganization />` component is used to render an organization creation UI that allows users to create brand new organizations within your application.
 

docs/organization/organization-list.md

@@ -5,7 +5,7 @@ outline: deep
 # `<OrganizationList />`
 
 <br />
-<img src="https://clerk.com/_next/image?url=%2Fdocs%2Fimages%2Fui-components%2Fcomponent-org_list.svg&w=1080&q=75" />
+<img src="https://clerk.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2F_docs%2Fmain%2Fui-components%2Forganization-list.svg&w=1080&q=75" />
 
 The `<OrganizationList />` component is used to display organization related memberships, invitations, and suggestions for the user.
 

docs/organization/organization-profile.md

@@ -5,7 +5,7 @@ outline: deep
 # `<OrganizationProfile />`
 
 <br />
-<img src="https://clerk.com/_next/image?url=%2Fdocs%2Fimages%2Fui-components%2Fcomponent-org_profile.svg&w=2048&q=75" />
+<img src="https://clerk.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2F_docs%2Fmain%2Fui-components%2Forganization-profile.svg&w=1920&q=75" />
 
 The `<OrganizationProfile />` component is used to render a beautiful, full-featured organization management UI that allows users to manage their organization profile and security settings.
 

docs/organization/organization-switcher.md

@@ -5,7 +5,7 @@ outline: deep
 # `<OrganizationSwitcher />`
 
 <br />
-<img src="https://clerk.com/_next/image?url=%2Fdocs%2Fimages%2Fui-components%2Fcomponent-org_switcher.svg&w=2048&q=75" />
+<img src="https://clerk.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2F_docs%2Fmain%2Fui-components%2Forganization-switcher.svg&w=1080&q=75" />
 
 The `<OrganizationSwitcher />` component is used to enable the ability to switch between available organizations the user may be part of in your application.
 

docs/user/user-button.md

@@ -5,7 +5,7 @@ outline: deep
 # `<UserButton />`
 
 <br />
-<img src="https://clerk.com/_next/image?url=%2Fdocs%2Fimages%2Fui-components%2Fcomponent-user_button.svg&w=1080&q=75" />
+<img src="https://clerk.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2F_docs%2Fmain%2Fui-components%2Fuser-button.svg&w=1080&q=75" />
 
 The `<UserButton />` component is used to render the familiar user button UI popularized by Google.
 

docs/user/user-profile.md

@@ -5,7 +5,7 @@ outline: deep
 # `<UserProfile />`
 
 <br />
-<img src="https://clerk.com/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fe1ql88v4%2Fproduction%2F86ce587f95cbaa773bdd9ddf8d5dfbb57387de16-528x645.svg%3Ffit%3Dmax%26auto%3Dformat&w=1080&q=75" alt="UserProfile component sample" />
+<img src="https://clerk.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2F_docs%2Fmain%2Fui-components%2Fuser-profile.svg&w=1920&q=75" alt="UserProfile component sample" />
 
 The `<UserProfile />` component is used to render a beautiful, full-featured account management UI that allows users to manage their profile and security settings.
 

package.json

@@ -61,8 +61,8 @@
     "vue": "^3.2.0"
   },
   "dependencies": {
-    "@clerk/clerk-js": "^4.72.1",
-    "@clerk/types": "^3.64.1",
+    "@clerk/clerk-js": "^5.2.1",
+    "@clerk/types": "^4.2.0",
     "@vueuse/core": "^10.9.0"
   },
   "devDependencies": {

playground/package.json

@@ -9,7 +9,7 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
-    "h3-clerk": "^0.3.10",
+    "h3-clerk": "^0.4.1",
     "vue-clerk": "workspace:*"
   },
   "devDependencies": {

playground/pages/index.vue → playground/pages/index.client.vue

@@ -1,13 +1,17 @@
 <script setup lang="ts">
-import { OrganizationSwitcher, SignInButton, SignOutButton, WithUser, useAuth } from 'vue-clerk'
+import { OrganizationSwitcher, SignInButton, SignOutButton, WithUser, useAuth, useClerkProvide } from 'vue-clerk'
 
+const { isClerkLoaded } = useClerkProvide()
 const { isSignedIn } = useAuth()
 </script>
 
 <template>
   <h1>Hello Clerk!</h1>
   <OrganizationSwitcher :appearance="{ elements: { organizationPreviewTextContainer: 'hidden md:block', organizationSwitcherTriggerIcon: 'hidden md:block' } }" />
-  <div v-if="isSignedIn">
+  <div v-if="!isClerkLoaded">
+    Loading auth..
+  </div>
+  <div v-else-if="isSignedIn">
     <!-- <UserButton /> -->
     <WithUser>
       <template #default="{ isLoaded, user }">