feat(vue): Add first 3 client helpers

docs/references/vue/use-auth.mdx

@@ -0,0 +1,102 @@
+---
+title: '`useAuth()`'
+description: Clerk's useAuth() composable is a convenient way to access the current auth state.
+---
+
+The `useAuth()` composable provides information about the current auth state, as well as helper methods to manage the current active session.
+
+## `useAuth()` returns
+
+<Properties>
+  - `isSignedIn`
+  - `boolean`
+
+  A boolean that returns true if the user is signed in.
+
+  ---
+
+  - `isLoaded`
+  - `boolean`
+
+  A boolean that until Clerk loads and initializes, will be set to `false`. Once Clerk loads, `isLoaded` will be set to `true`.
+
+  ---
+
+  - `userId`
+  - `string`
+
+  The current user's ID.
+
+  ---
+
+  - `sessionId`
+  - `string`
+
+  The current user's session ID.
+
+  ---
+
+  - `orgId`
+  - `string`
+
+  The current user's active organization ID.
+
+  ---
+
+  - `orgRole`
+  - `string`
+
+  The current user's active organization role.
+
+  ---
+
+  - `orgSlug`
+  - `string`
+
+  The current user's organization slug.
+
+  ---
+
+  - `signOut()`
+  - `(options?: SignOutOptions) => Promise<void>`
+
+  A function that signs the user out. See the [reference documentation](/docs/references/javascript/clerk/clerk#sign-out) for more information.
+
+  ---
+
+  - `getToken()`
+  - `(options?: GetTokenOptions) => Promise<string | null>`
+
+  A function that returns a promise that resolves to the current user's session token. Can also be used to retrieve a custom JWT template. See the [reference documentation](/docs/references/javascript/session#get-token) for more information.
+
+  ---
+
+  - `has()`
+  - `(isAuthorizedParams: CheckAuthorizationParamsWithCustomPermissions) => boolean`
+
+  A function that returns a boolean based on the permission or role provided as parameter. Can be used for authorization. See the [reference documentation](/docs/references/nextjs/auth-object#has){{ target: '_blank' }} for more information.
+</Properties>
+
+## How to use the `useAuth()` composable
+
+The following example demonstrates how to use the `useAuth()` composable to access the current auth state, like whether the user is signed in or not. It also demonstrates a basic example of how you could use the `getToken()` method to retrieve a session token for fetching data from an external resource.
+
+```vue {{ filename: 'external-data-page.vue' }}
+<script setup>
+import { useAuth } from '@clerk/vue'
+
+const { getToken, isLoaded, isSignedIn } = useAuth()
+
+const fetchDataFromExternalResource = async () => {
+  const token = await getToken.value()
+  // Add logic to fetch your data
+  return data
+}
+</script>
+
+<template>
+    <div v-if="!isLoaded">Loading...</div>
+    <div v-else-if="!isSignedIn">Sign in to view this page</div>
+    <div v-else>...</div>
+</template>
+```

docs/references/vue/use-clerk.mdx

@@ -0,0 +1,27 @@
+---
+title: '`useClerk()`'
+description: Clerk's useClerk() composable is used to access the Clerk object, which can be used to build alternatives to any Clerk Component.
+---
+
+The `useClerk()` composable is a convenient way to access to the [`Clerk`](/docs/references/javascript/clerk/clerk) object, giving you the ability to build alternatives to any Clerk Component.
+
+> [!WARNING]
+> This is intended to be used for advanced use cases, like building a completely custom OAuth flow or as an escape hatch for getting access to the `Clerk` object.
+
+## `useClerk()` returns
+
+The `useClerk()` composable returns the `Clerk` object, which includes all the methods and properties listed in the [`Clerk` reference](/docs/references/javascript/clerk/clerk).
+
+## How to use the `useClerk()` composable
+
+```vue {{ filename: 'home.vue' }}
+<script setup>
+import { useClerk } from '@clerk/vue'
+
+const clerk = useClerk()
+</script>
+
+<template>
+  <button @click="clerk.openSignIn">Sign in</button
+</template>
+```

docs/references/vue/use-user.mdx

@@ -0,0 +1,130 @@
+---
+title: '`useUser()`'
+description: The useUser() composable is used to get the current user object and to update the user's data on the client-side.
+---
+
+The `useUser()` composable is a convenient way to access the current user's [`User`](/docs/references/javascript/user/user) object, which holds all of the information for a single user of your application and provides a set of methods to manage their account. This composable also provides boolean values to check if the user is signed in and if Clerk has loaded and initialized.
+
+## `useUser()` returns
+
+<Properties>
+  - `isSignedIn`
+  - `boolean`
+
+  A boolean that returns `true` if the user is signed in.
+
+  ---
+
+  - `isLoaded`
+  - `boolean`
+
+  A boolean that until Clerk loads and initializes, will be set to `false`. Once Clerk loads, `isLoaded` will be set to `true`.
+
+  ---
+
+  - `user`
+  - [`User`](/docs/references/javascript/user/user)
+
+  The `User` object for the currently active user. If the user is not signed in, `user` will be `null`.
+</Properties>
+
+## How to use the `useUser()` composable
+
+### Retrieve the current user data with the `useUser()` composable
+
+The following example demonstrates how to use the `useUser()` composable to access the `user` object, which includes the current user's data, like the user's full name. The `isLoaded` and `isSignedIn` properties are used to handle the loading state and to check if the user is signed in, respectively.
+
+For more information on the `User` object, see the [`reference`](/docs/references/javascript/user/user).
+
+```vue {{ filename: 'home.vue' }}
+<script setup>
+import { useUser } from '@clerk/vue'
+
+const { isSignedIn, user, isLoaded } = useUser()
+</script>
+
+<template>
+  <div v-if="!isLoaded">
+    <!-- Handle loading state however you like -->
+  </div>
+
+  <div v-else-if="isSignedIn">
+    Hello {{ user.fullName }}!
+  </div>
+
+  <div v-else>
+    Not signed in
+  </div>
+</template>
+```
+
+### Update the current user data with the `useUser()` composable
+
+The following example demonstrates how to use the `useUser()` composable to access the `user` object, which includes the `update` method for updating the user's data.
+
+For more information on the `update()` method, see the [`User`](/docs/references/javascript/user/user#update) reference.
+
+```vue {{ filename: 'home.vue' }}
+<script setup>
+import { useUser } from '@clerk/vue'
+
+const { isLoaded, user } = useUser()
+
+const updateUser = async () => {
+  await user.value?.update({
+    firstName: 'John',
+    lastName: 'Doe',
+  })
+}
+</script>
+
+<template>
+  <div v-if="!isLoaded">
+    <!-- Handle loading state however you like -->
+  </div>
+
+  <div v-else-if="user">
+    <button @click="updateUser">Click me to update your name</button>
+    <p>user.firstName: {{ user.firstName }}</p>
+    <p>user.lastName: {{ user.lastName }}</p>
+  </div>
+</template>
+```
+
+### Reload user data with the `useUser()` composable
+
+To retrieve the latest user data after updating the user elsewhere, use the `user.reload()` method.
+
+For more information on the `reload()` method, see the [`User`](/docs/references/javascript/user/user#reload) reference.
+
+```vue {{ filename: 'home.vue' }}
+<script setup>
+import { useUser } from '@clerk/vue'
+
+const { isLoaded, user } = useUser()
+
+const updateUser = async () => {
+  // Update data via an API endpoint
+  const updateMetadata = await fetch('/api/updateMetadata')
+
+  // Check if the update was successful
+  if (updateMetadata.message !== 'success') {
+    throw new Error('Error updating')
+  }
+
+  // If the update was successful, reload the user data
+  await user.value?.reload()
+}
+</script>
+
+<template>
+  <div v-if="!isLoaded">
+    <!-- Handle loading state however you like -->
+  </div>
+
+  <div v-else-if="user">
+    <button @click="updateUser">Click me to update your metadata</button>
+    <p>user role: {{ user.publicMetadata?.role }}</p>
+  </div>
+</template>
+```