From dfdf23bc9a25ebc13df98d553454a14c765423bb Mon Sep 17 00:00:00 2001
From: Robert Soriano <sorianorobertc@gmail.com>
Date: Sat, 14 Dec 2024 07:46:54 -0800
Subject: [PATCH] fix(vue): Make sure Clerk object is available before
 accessing properties (#4779)

---
 .changeset/fresh-olives-watch.md          | 5 +++++
 packages/vue/src/composables/useSignIn.ts | 4 ++--
 packages/vue/src/composables/useSignUp.ts | 4 ++--
 3 files changed, 9 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/fresh-olives-watch.md

diff --git a/.changeset/fresh-olives-watch.md b/.changeset/fresh-olives-watch.md
new file mode 100644
index 0000000000..e0d334e179
--- /dev/null
+++ 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
index 05ea8425c0..102d452158 100644
--- 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
index b4c93a6869..7271179183 100644
--- 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,
     };
   });