fix(vue): Make sure Clerk object is available before accessing properties (#4779)

Author: wobsoriano

.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.

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,
     };
   });
 

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,
     };
   });