Docs

useOrganization()

The useOrganization() composable retrieves attributes of the currently active organization.

Returns

  • Name
    isLoaded
    Type
    Ref<boolean>
    Description

    A boolean that indicates whether Clerk has completed initialization. Initially false, becomes true once Clerk loads.

  • Name
    organization
    Type
    Ref<Organization>
    Description

    The currently active organization.

  • Name
    membership
    Type
    Ref<OrganizationMembership>
    Description

    The current organization membership.

How to use the useOrganization() composable

Retrieve the current active organization

Use useOrganization() to access the current active Organization object.

OrganizationStatus.vue
<script setup>
import { OrganizationSwitcher, useOrganization } from '@clerk/vue'

const { organization, isLoaded } = useOrganization()
</script>

<template>
  <div v-if="!organization">
    <OrganizationSwitcher />
  </div>
  <div v-if="isLoaded">
    <p>This current organization is {{ organization?.name }}</p>
  </div>

  <div v-else>
    <p>Loading...</p>
  </div>
</template>

Paginate organization memberships

The following example demonstrates how to use useOrganization() to access the organization's memberships. Pagination is implemented by fetching pages of memberships when the "Previous page" or "Next page" buttons are clicked.

MembershipList.vue
<script setup>
import { ref, watchEffect } from 'vue'
import { OrganizationSwitcher, useOrganization } from '@clerk/vue'

const memberships = ref([])
const currentPage = ref(1)
const { organization, isLoaded } = useOrganization()

const pageSize = 5

async function fetchMemberships() {
  if (!organization.value) {
    return
  }

  // Use the `getMemberships()` method on the `organization` object to fetch the organization's memberships.
  const { data } = await organization.value.getMemberships({
    initialPage: currentPage.value,
    pageSize: pageSize,
  })
  memberships.value = data
}

watchEffect(() => {
  if (!organization.value) {
    return
  }

  fetchMemberships()
})

const fetchPrevious = () => currentPage.value--
const fetchNext = () => currentPage.value++
</script>

<template>
  <div v-if="!organization">
    <OrganizationSwitcher />
  </div>

  <div v-else-if="isLoaded">
    <h2>Organization members</h2>

    <ul>
      <li v-for="membership in memberships" :key="membership.id">
        {{ membership.publicUserData.firstName }} {{ membership.publicUserData.lastName }} &lt;{{
          membership.publicUserData.identifier
        }}&gt; :: {{ membership.role }}
      </li>
    </ul>

    <div>
      <button :disabled="currentPage === 1" @click="fetchPrevious">Previous</button>
      <button :disabled="memberships.length < pageSize" @click="fetchNext">Next</button>
    </div>
  </div>

  <div v-else>
    <p>Loading...</p>
  </div>
</template>

Feedback

What did you think of this content?
Edit this page on GitHub

Last updated on