<Organization />

The Organization component is a declarative way to access the current organization object from the ThunderID authentication context. It uses a scoped slot to expose the organization data, making it easy to display organization information or conditionally render UI based on the active organization.

Usage

Basic Usage

Display organization information using a scoped slot:

src/OrgCard.vue

<script setup>
import { Organization } from '@thunderid/vue'
</script>

<template>
  <Organization>
    <template #default="{ organization }">
      <div>
        <h3>{{ organization.name }}</h3>
      </div>
    </template>
    <template #fallback>
      <p>No organization selected.</p>
    </template>
  </Organization>
</template>

Custom Fields

Use the scoped slot to render any field on the organization object:

src/OrgCard.vue

<script setup>
import { Organization } from '@thunderid/vue'
</script>

<template>
  <Organization>
    <template #default="{ organization }">
      <div>
        <h3>{{ organization.name }}</h3>
        <p>ID: {{ organization.id }}</p>
      </div>
    </template>
  </Organization>
</template>

Slots

Slot	Slot Props	Description
default	{ organization }	Rendered when a current organization is available. Receives the organization object.
fallback	–	Rendered when no organization is selected.