reading values like isSignedIn etc on page load returnes undefined.

[FinchCC]

i might be doing something wong, but after looking at other implementations i can't figure out what that may be.

The issue is that when trying to read values on page load or onMounted() clerk will be undefined:

<script setup lang="ts">
import { useAuth } from 'vue-clerk';

const { isSignedIn } = useAuth();

console.log(isSignedIn.value); // undefined
</script>

if this is the normal behavior how are you supposed to implement routegards then?

[FinchCC]

it was my fault. clerk isent avalible outside of vue components and if you try to acess them in the setup clerk isent loaded yet either. so to add routeguards the best way is to await until clerk is loaded by using clerkLoaded and then you are able to acess clerk.

<template>
  <div class="master-content">
    <Navbar />
    <ClerkLoaded>
      <div class="container">
        <RouterView/>
      </div>
      <Footer class="afooter"></Footer>
    </ClerkLoaded>
  </div>
</template>

recommend this video: Master Vue 3 Authentication with Vue.js, Clerk, and TailwindCSS | Clerk authentication with Vue