Skip to main content
Docs

useSession() | Vue

The useSession() composable provides access to the current user's SessionJavaScript Icon object, as well as helpers for setting the active session.

Returns

  • Name
    isLoaded
    Type
    Ref<boolean>
    Description

    A boolean that indicates whether Clerk has finished loading and initializing. Returns false during initialization.

  • Name
    isSignedIn
    Type
    Ref<boolean>
    Description

    A boolean that indicates whether a user is currently signed in.

  • Name
    session
    Type
    Ref<SessionJavaScript Icon>
    Description

    Holds the current active session for the user.

How to use the useSession() composable

Access the Session object

The following example uses useSession() to access the Session object, which has the lastActiveAt property. The lastActiveAt property is a Date object used to show the time the session was last active.

SessionStatus.vue
<script setup>
import { useSession } from '@clerk/vue'

const { isLoaded, session, isSignedIn } = useSession()
</script>

<template>
  <div v-if="!isLoaded">
    <!-- Handle loading state -->
  </div>

  <div v-else-if="!isSignedIn">
    <!-- Handle signed out state -->
  </div>

  <div v-else>
    <p>This session has been active since {{ session.lastActiveAt.toLocaleString() }}</p>
  </div>
</template>

Feedback

What did you think of this content?
GitHubEdit on GitHub

Last updated on