feat(vue): Add client helpers (part 2)

docs/references/vue/use-organization.mdx

@@ -0,0 +1,125 @@
+---
+title: useOrganization()
+description: Access and manage the currently active organization in your Vue application with Clerk's useOrganization() composable.
+---
+
+The `useOrganization()` composable retrieves attributes of the currently active organization.
+
+## Returns
+
+<Properties>
+  - `isLoaded`
+  - `Ref<boolean>`
+
+  A boolean that is set to `false` until Clerk loads and initializes.
+
+  ---
+
+  - `organization`
+  - <code>Ref\<[Organization](/docs/references/javascript/organization/organization)></code>
+
+  The currently active organization.
+
+  ---
+
+  - `membership`
+  - <code>Ref\<[OrganizationMembership](/docs/references/javascript/organization-membership)></code>
+
+  The current organization membership.
+</Properties>
+
+## How to use the `useOrganization()` composable
+
+### Retrieve the current active organization
+
+Use `useOrganization()` to access the current active [`Organization`](/docs/references/javascript/organization/organization) object.
+
+```vue {{ filename: '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
+
+Use `useOrganization()` to access the organization's memberships through the `getMemberships()` method. Pagination is implemented by fetching pages of memberships when the "Previous page" or "Next page" buttons are clicked.
+
+This pagination pattern can be applied to any Clerk method that returns a [`ClerkPaginatedResponse`](/docs/references/javascript/types/clerk-paginated-response#clerk-paginated-response) object.
+
+```vue {{ filename: '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
+  }
+
+  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>
+```

docs/references/vue/use-session-list.mdx

@@ -0,0 +1,76 @@
+---
+title: useSessionList()
+description: Access and manage a list of sessions registered on the client device in your Vue application with Clerk's useSessionList() composable.
+---
+
+The `useSessionList()` composable returns an array of [`Session`](/docs/references/javascript/session) objects that have been registered on the client device.
+
+## Returns
+
+<Properties>
+  - `isLoaded`
+  - `Ref<boolean>`
+
+  A boolean that indicates whether Clerk has completed initialization. Initially `false`, becomes `true` once Clerk loads.
+
+  ---
+
+  - `setActive()`
+  - <code>Ref\<(params: [SetActiveParams](#set-active-params)) => Promise\<void>></code>
+
+  A function that sets the active session and/or organization.
+
+  ---
+
+  - `sessions`
+  - <code>Ref\<[Session](/docs/references/javascript/session)></code>
+
+  A list of sessions that have been registered on the client device.
+</Properties>
+
+### `SetActiveParams`
+
+<Properties>
+  - `session`
+  - <code>[Session](/docs/references/javascript/session) | string | null</code>
+
+  The session resource or session ID (string version) to be set as active. If `null`, the current session is deleted.
+
+  ---
+
+  - `organization`
+  - <code>[Organization](/docs/references/javascript/organization/organization) | string | null</code>
+
+  The organization resource or organization ID/slug (string version) to be set as active in the current session. If `null`, the currently active organization is removed as active.
+
+  ---
+
+  - `beforeEmit?`
+  - `(session?: Session | null) => void | Promise<any>`
+
+  Callback run just before the active session and/or organization is set to the passed object. Can be used to composable up for pre-navigation actions.
+</Properties>
+
+## How to use the `useSessionList()` composable
+
+### Retrieve a list of sessions
+
+Use `useSessionList()` to retrieve a list of sessions that have been registered on the client device. The `sessions` property is used to show the number of times the user has visited the page.
+
+```vue {{ filename: 'SessionList.vue' }}
+<script setup>
+import { useSessionList } from '@clerk/vue'
+
+const { isLoaded, sessions } = useSessionList()
+</script>
+
+<template>
+  <div v-if="!isLoaded">
+    <!-- Handle loading state -->
+  </div>
+
+  <div v-else>
+    <p>Welcome back. You've been here {{ sessions.length }} times before.</p>
+  </div>
+</template>
+```

docs/references/vue/use-session.mdx

@@ -0,0 +1,57 @@
+---
+title: useSession()
+description: Access and manage the current user's session in your Vue application with Clerk's useSession() composable.
+---
+
+The `useSession()` composable provides access to the current user's [`Session`](/docs/references/javascript/session) object, as well as helpers for setting the active session.
+
+## Returns
+
+<Properties>
+  - `isLoaded`
+  - `Ref<boolean>`
+
+  A boolean that indicates whether Clerk has completed initialization. Initially `false`, becomes `true` once Clerk loads.
+
+  ---
+
+  - `isSignedIn`
+  - `Ref<boolean>`
+
+  A boolean that is set to `true` if the user is signed in.
+
+  ---
+
+  - `session`
+  - <code>Ref\<[Session](/docs/references/javascript/session)></code>
+
+  Holds the current active session for the user.
+</Properties>
+
+## How to use the `useSession()` composable
+
+### Check the current state of a session
+
+Use `useSession()` to access the `Session` object, which has the `lastActiveAt` property. The `lastActiveAt` property is a `Date` object used to show the time the session was last active.
+
+```vue {{ filename: 'SessionStatus.vue' }}
+<script setup>
+import { useSession } from '@clerk/vue'
+
+const { isLoaded, session, isSignedIn } = useSession()
+</script>
+
+<template>
+  <div v-if="!isLoaded">
+    <!-- Handle loading state -->
+  </div>
+
+  <div v-else-if="!isSignedIn">
+    <!-- Handle signed out state -->
+  </div>
+
+  <div v-else>
+    <p>This session has been active since {{ session.lastActiveAt.toLocaleString() }}</p>
+  </div>
+</template>
+```

docs/references/vue/use-sign-up.mdx

@@ -0,0 +1,97 @@
+---
+title: useSignUp()
+description: Access and manage sign-up state in your Vue application with Clerk's useSignUp() composable.
+---
+
+The `useSignUp()` composable provides access to the [`SignUp`](/docs/references/javascript/sign-up/sign-up) object, which allows you to check the current state of a sign-up attempt and manage the sign-up flow. You can use this to create a [custom sign-up flow](/docs/custom-flows/overview#sign-up-flow).
+
+## Returns
+
+<Properties>
+  - `isLoaded`
+  - `Ref<boolean>`
+
+  A boolean that indicates whether Clerk has completed initialization. Initially `false`, becomes `true` once Clerk loads.
+
+  ---
+
+  - `setActive()`
+  - <code>Ref\<(params: [SetActiveParams](#set-active-params)) => Promise\<void>></code>
+
+  A function that sets the active session.
+
+  ---
+
+  - `signUp`
+  - <code>Ref\<[SignUp](/docs/references/javascript/sign-up/sign-up)></code>
+
+  An object that contains the current sign-up attempt status and methods to create a new sign-up attempt.
+</Properties>
+
+### `SetActiveParams`
+
+<Properties>
+  - `session`
+  - <code>[Session](/docs/references/javascript/session) | string | null</code>
+
+  The session resource or session ID (string version) to be set as active. If `null`, the current session is deleted.
+
+  ---
+
+  - `organization`
+  - <code>[Organization](/docs/references/javascript/organization/organization) | string | null</code>
+
+  The organization resource or organization ID/slug (string version) to be set as active in the current session. If `null`, the currently active organization is removed as active.
+
+  ---
+
+  - `beforeEmit?`
+  - `(session?: Session | null) => void | Promise<any>`
+
+  Callback run just before the active session and/or organization is set to the passed object. Can be used to composable up for pre-navigation actions.
+</Properties>
+
+## How to use the `useSignUp()` composable
+
+### Check the current state of a sign-up
+
+Use `useSignUp()` to access the `SignUp` object and check the current state of a sign-up.
+
+```vue {{ filename: 'SignUpStep.vue' }}
+<script setup>
+import { useSignUp } from '@clerk/vue'
+
+const { isLoaded, signUp } = useSignUp()
+</script>
+
+<template>
+  <div v-if="!isLoaded">
+    <!-- Handle loading state -->
+  </div>
+
+  <div v-else>The current sign-up attempt status is {{ signUp?.status }}.</div>
+</template>
+```
+
+The `status` property of the `SignUp` object can be one of the following values:
+
+<Properties>
+  - `complete`
+  - `string`
+
+  The user has been created and the custom flow can proceed to `setActive()` to create session.
+
+  ---
+
+  - `abandoned`
+  - `string`
+
+  The sign-up attempt will be abandoned if it was started more than 24 hours previously.
+
+  ---
+
+  - `missing_requirements`
+  - `string`
+
+  A requirement is missing from the [Email, Phone, Username](https://dashboard.clerk.com/last-active?path=user-authentication/email-phone-username) settings. For example, in the Clerk Dashboard, the **Password** setting is required but a password wasn't provided in the custom flow.
+</Properties>