fix(vue): Make sure Clerk object is available before accessing proper…

…ties (#4779)
clerk · Dec 14, 2024 · dfdf23b · dfdf23b
1 parent faccaa1
commit dfdf23b
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/.changeset/fresh-olives-watch.md b/.changeset/fresh-olives-watch.md
@@ -0,0 +1,5 @@
+---
+"@clerk/vue": patch
+---
+
+Fixed an issue when accessing Clerk properties inside composables before Clerk is available.
diff --git a/packages/vue/src/composables/useSignIn.ts b/packages/vue/src/composables/useSignIn.ts
@@ -41,14 +41,14 @@ export const useSignIn: UseSignIn = () => {
   });
 
   const result = computed<UseSignInReturn>(() => {
-    if (!clientCtx.value) {
+    if (!clerk.value || !clientCtx.value) {
       return { isLoaded: false, signIn: undefined, setActive: undefined };
     }
 
     return {
       isLoaded: true,
       signIn: clientCtx.value.signIn,
-      setActive: clerk.value!.setActive,
+      setActive: clerk.value.setActive,
     };
   });
 

diff --git a/packages/vue/src/composables/useSignUp.ts b/packages/vue/src/composables/useSignUp.ts
@@ -41,14 +41,14 @@ export const useSignUp: UseSignUp = () => {
   });
 
   const result = computed<UseSignUpReturn>(() => {
-    if (!clientCtx.value) {
+    if (!clerk.value || !clientCtx.value) {
       return { isLoaded: false, signUp: undefined, setActive: undefined };
     }
 
     return {
       isLoaded: true,
       signUp: clientCtx.value.signUp,
-      setActive: clerk.value!.setActive,
+      setActive: clerk.value.setActive,
     };
   });