<OrganizationProfile />

The OrganizationProfile component renders the details of the current organization. When editable is enabled, admins can update organization settings inline.

Usage

Basic Usage

src/OrgSettingsPage.vue

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

<template>
  <div>
    <h1>Organization Settings</h1>
    <OrganizationProfile />
  </div>
</template>

Editable Mode With Update Handler

Enable inline editing and supply an onUpdate handler to persist changes to your backend:

src/OrgSettingsPage.vue

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

async function handleUpdate(payload) {
  // Persist changes to your backend
  await fetch('/api/organizations/current', {
    method: 'PATCH',
    body: JSON.stringify(payload),
  })
}
</script>

<template>
  <OrganizationProfile editable :on-update="handleUpdate" />
</template>

Props

Prop	Type	Required	Description
title	string	❌	Card header title. Defaults to 'Organization Profile'.
editable	boolean	❌	Enables inline editing of organization fields. Defaults to false.
onUpdate	(payload: Record<string, unknown>) => Promise<void>	❌	Handler invoked when the user submits an edit
className	string	❌	Extra CSS class added to the root element