<ThunderIDSignInButton />

The ThunderIDSignInButton component initiates the sign-in flow when clicked. It is auto-registered by the Nuxt module and requires no imports.

Usage

Basic Usage

pages/index.vue

<template>
  <ThunderIDSignInButton />
</template>

Custom Label

Pass text content to override the default button label:

pages/index.vue

<template>
  <ThunderIDSignInButton>Log in to your account</ThunderIDSignInButton>
</template>

With Custom Styling

pages/index.vue

<template>
  <ThunderIDSignInButton class="btn btn-primary">
    Sign In
  </ThunderIDSignInButton>
</template>

Using the Default Slot for Full Control

Access the signIn function and isLoading state via the default scoped slot to render a fully custom button:

components/CustomSignInButton.vue

<template>
  <ThunderIDSignInButton>
    <template #default="{ signIn, isLoading }">
      <button
        :disabled="isLoading"
        class="px-4 py-2 bg-blue-600 text-white rounded"
        @click="signIn"
      >
        {{ isLoading ? 'Signing in...' : 'Sign In' }}
      </button>
    </template>
  </ThunderIDSignInButton>
</template>

Slots

Slot	Slot Props	Description
default	{ signIn: () => void, isLoading: boolean }	Default content rendered inside the button. If omitted, renders a default "Sign In" button

Props

Prop	Type	Required	Description
preferences	Preferences	❌	Customization options for i18n and theming