<SignOutButton>

The <SignOutButton> component is a button that signs a user out. By default, it is a <button> tag that says Sign Out, but it is completely customizable by passing children.

Usage

Basic usage

<script setup>
import { SignOutButton } from '@clerk/vue'
</script>

<template>
  <SignOutButton />
</template>

Custom usage

You can create a custom button by wrapping your own button, or button text, in the <SignOutButton> component.

<script setup>
import { SignOutButton } from '@clerk/vue'
</script>

<template>
  <SignOutButton>
    <button>Custom sign out button</button>
  </SignOutButton>
</template>

Multi-session usage

Sign out of all sessions

Clicking the <SignOutButton> component signs the user out of all sessions. This is the default behavior.

Sign out of a specific session

You can sign out of a specific session by passing in a sessionId to the sessionId prop. This is useful for signing a single account out of a multi-session application.

In the following example, the sessionId is retrieved from the useAuth() hook. If the user is not signed in, the sessionId will be null, and the user is shown the <SignInButton> component. If the user is signed in, the user is shown the <SignOutButton> component, which when clicked, signs the user out of that specific session.

<script setup>
import { SignInButton, SignOutButton, useAuth } from '@clerk/vue'

const { sessionId } = useAuth()
</script>

<template>
  <SignInButton v-if="!sessionId" />
  <SignOutButton v-else :session-id="sessionId" />
</template>

Properties