Merge branch 'main' into aa/DOCS-366

.github/CODEOWNERS

@@ -1 +1,2 @@
-- @clerk/docs
+* @clerk/docs
+

docs/components/authentication/google-one-tap.mdx

@@ -54,7 +54,7 @@ The following example includes basic implementation of the `<GoogleOneTap />` co
 > [!NOTE]
 > `<GoogleOneTap>` does not render if the user is already signed into your Clerk application, so there's no need to manually check if a user is signed in yourself before rendering it.
 
-<Tabs items={["Next.js", "Astro"]}>
+<Tabs items={["Next.js", "Astro", "Vue"]}>
   <Tab>
     ```tsx {{ filename: 'app/layout.tsx', mark: [2, 11] }}
     import React from 'react'
@@ -91,6 +91,18 @@ The following example includes basic implementation of the `<GoogleOneTap />` co
     </html>
     ```
   </Tab>
+
+  <Tab>
+    ```vue {{ filename: 'App.vue' }}
+    <script setup lang="ts">
+    import { GoogleOneTap } from '@clerk/vue'
+    </script>
+
+    <template>
+      <GoogleOneTap />
+    </template>
+    ```
+  </Tab>
 </Tabs>
 
 ## Usage with JavaScript

docs/components/authentication/sign-in.mdx

@@ -102,7 +102,7 @@ All props are optional.
 
 The following example includes basic implementation of the `<SignIn />` component. You can use this as a starting point for your own implementation.
 
-<Tabs items={["Next.js", "React", "Remix", "Astro"]}>
+<Tabs items={["Next.js", "React", "Remix", "Astro", "Vue"]}>
   <Tab>
     The following example demonstrates how you can use the `<SignIn />` component on a public page.
 
@@ -157,6 +157,18 @@ The following example includes basic implementation of the `<SignIn />` componen
     <SignIn path="/sign-in" />
     ```
   </Tab>
+
+  <Tab>
+    ```vue {{ filename: 'sign-in.vue' }}
+    <script setup lang="ts">
+    import { SignIn } from '@clerk/vue'
+    </script>
+
+    <template>
+      <SignIn />
+    </template>
+    ```
+  </Tab>
 </Tabs>
 
 ## Usage with JavaScript

docs/components/authentication/sign-up.mdx

@@ -95,7 +95,7 @@ All props are optional.
 
 The following example includes basic implementation of the `<SignUp />` component. You can use this as a starting point for your own implementation.
 
-<Tabs items={["Next.js", "React", "Remix", "Astro"]}>
+<Tabs items={["Next.js", "React", "Remix", "Astro", "Vue"]}>
   <Tab>
     The following example demonstrates how you can use the `<SignUp />` component on a public page.
 
@@ -150,6 +150,18 @@ The following example includes basic implementation of the `<SignUp />` componen
     <SignUp path="/sign-up" />
     ```
   </Tab>
+
+  <Tab>
+    ```vue {{ filename: 'sign-up.vue' }}
+    <script setup lang="ts">
+    import { SignUp } from '@clerk/vue'
+    </script>
+
+    <template>
+      <SignUp />
+    </template>
+    ```
+  </Tab>
 </Tabs>
 
 ## Usage with JavaScript

docs/components/control/signed-in.mdx

@@ -9,7 +9,7 @@ The `<SignedIn>` component offers authentication checks as a cross-cutting conce
 
 ## Usage
 
-<Tabs items={["Next.js", "React", "Remix", "Astro"]}>
+<Tabs items={["Next.js", "React", "Remix", "Astro", "Vue"]}>
   <Tab>
     ```tsx {{ filename: 'app.tsx' }}
     import '@/styles/globals.css'
@@ -80,6 +80,21 @@ The `<SignedIn>` component offers authentication checks as a cross-cutting conce
     <div>Always visible</div>
     ```
   </Tab>
+
+  <Tab>
+    ```vue {{ filename: 'App.vue' }}
+    <script setup lang="ts">
+    import { SignedIn } from '@clerk/vue'
+    </script>
+
+    <template>
+      <SignedIn>
+        <div>You are signed in</div>
+      </SignedIn>
+      <div>Always visible</div>
+    </template>
+    ```
+  </Tab>
 </Tabs>
 
 ### Usage with React Router

docs/components/control/signed-out.mdx

@@ -7,7 +7,7 @@ The `<SignedOut>` component offers authentication checks as a cross-cutting conc
 
 ## Usage
 
-<Tabs items={["Next.js", "React", "Remix", "Astro"]}>
+<Tabs items={["Next.js", "React", "Remix", "Astro", "Vue"]}>
   <Tab>
     ```tsx {{ filename: 'app.tsx' }}
     import '@/styles/globals.css'
@@ -108,4 +108,19 @@ The `<SignedOut>` component offers authentication checks as a cross-cutting conc
     <div>Always visible</div>
     ```
   </Tab>
+
+  <Tab>
+    ```vue {{ filename: 'App.vue' }}
+    <script setup lang="ts">
+    import { SignedOut } from '@clerk/vue'
+    </script>
+
+    <template>
+      <SignedOut>
+        <div>You are signed out</div>
+      </SignedOut>
+      <div>Always visible</div>
+    </template>
+    ```
+  </Tab>
 </Tabs>

docs/components/organization/create-organization.mdx

@@ -64,7 +64,7 @@ All props are optional.
 
 The following example includes a basic implementation of the `<CreateOrganization />` component. You can use this as a starting point for your own implementation.
 
-<Tabs items={["Next.js", "React", "Remix", "Astro"]}>
+<Tabs items={["Next.js", "React", "Remix", "Astro", "Vue"]}>
   <Tab>
     ```jsx {{ filename: 'app/create-organization/[[...create-organization]]/page.tsx' }}
     import { CreateOrganization } from '@clerk/nextjs'
@@ -76,7 +76,7 @@ The following example includes a basic implementation of the `<CreateOrganizatio
   </Tab>
 
   <Tab>
-    ```jsx {{ filename: '/create-organization.tsx' }}
+    ```jsx {{ filename: 'create-organization.tsx' }}
     import { CreateOrganization } from '@clerk/clerk-react'
 
     export default function CreateOrganizationPage() {
@@ -104,6 +104,18 @@ The following example includes a basic implementation of the `<CreateOrganizatio
     <CreateOrganization path="/create-organization" />
     ```
   </Tab>
+
+  <Tab>
+    ```vue {{ filename: 'create-organization.vue' }}
+    <script setup lang="ts">
+    import { CreateOrganization } from '@clerk/vue'
+    </script>
+
+    <template>
+      <CreateOrganization />
+    </template>
+    ```
+  </Tab>
 </Tabs>
 
 ## Usage with JavaScript

docs/components/organization/organization-list.mdx

@@ -69,7 +69,7 @@ All props are optional.
 
 ## Usage with frameworks
 
-<Tabs items={["Next.js", "React", "Remix", "Astro"]}>
+<Tabs items={["Next.js", "React", "Remix", "Astro", "Vue"]}>
   <Tab>
     ```jsx {{ filename: 'app/discover/page.tsx' }}
     import { OrganizationList } from '@clerk/nextjs'
@@ -131,6 +131,22 @@ All props are optional.
     />
     ```
   </Tab>
+
+  <Tab>
+    ```vue {{ filename: 'organization-list.vue' }}
+    <script setup lang="ts">
+    import { OrganizationList } from '@clerk/vue'
+    </script>
+
+    <template>
+      <OrganizationList
+        :after-create-organization-url="(org) => `/organization/${org.slug}`"
+        :after-select-personal-url="(org) => `/organization/${org.slug}`"
+        :after-select-organization-url="(org) => `/organization/${org.slug}`"
+      />
+    </template>
+    ```
+  </Tab>
 </Tabs>
 
 ## Usage with JavaScript

docs/components/organization/organization-profile.mdx

@@ -59,7 +59,7 @@ All props are optional.
 
 ## Usage with frameworks
 
-<Tabs items={["Next.js", "React", "Remix", "Astro"]}>
+<Tabs items={["Next.js", "React", "Remix", "Astro", "Vue"]}>
   <Tab>
     You can embed the `<OrganizationProfile />` component using the [Next.js optional catch-all route](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#optional-catch-all-routes). This allows you to redirect the user inside your application.
 
@@ -101,6 +101,18 @@ All props are optional.
     <OrganizationProfile path="/organization-profile" />
     ```
   </Tab>
+
+  <Tab>
+    ```vue {{ filename: 'organization-profile.vue' }}
+    <script setup lang="ts">
+    import { OrganizationProfile } from '@clerk/vue'
+    </script>
+
+    <template>
+      <OrganizationProfile />
+    </template>
+    ```
+  </Tab>
 </Tabs>
 
 ## Usage with JavaScript

docs/components/organization/organization-switcher.mdx

@@ -108,7 +108,7 @@ All props below are optional.
 
 ## Usage with frameworks
 
-<Tabs items={["Next.js", "React", "Remix", "Astro"]}>
+<Tabs items={["Next.js", "React", "Remix", "Astro", "Vue"]}>
   <Tab>
     ```jsx {{ filename: 'app/organization-switcher/[[...organization-switcher]]/page.tsx' }}
     import { OrganizationSwitcher } from '@clerk/nextjs'
@@ -160,6 +160,18 @@ All props below are optional.
     <OrganizationSwitcher />
     ```
   </Tab>
+
+  <Tab>
+    ```vue {{ filename: 'organization-switcher.vue' }}
+    <script setup lang="ts">
+    import { OrganizationSwitcher } from '@clerk/vue'
+    </script>
+
+    <template>
+      <OrganizationSwitcher />
+    </template>
+    ```
+  </Tab>
 </Tabs>
 
 ## Usage with JavaScript

docs/components/protect.mdx

@@ -50,7 +50,7 @@ For more complex authorization logic, [pass conditional logic to the `condition`
 
 The children of the following component will only be visible to users with roles that have the `org:invoices:create` permission.
 
-<Tabs items={["Next.js", "React", "Astro"]}>
+<Tabs items={["Next.js", "React", "Astro", "Vue"]}>
   <Tab>
     ```jsx
     import { Protect } from '@clerk/nextjs'
@@ -97,13 +97,30 @@ The children of the following component will only be visible to users with roles
     </Protect>
     ```
   </Tab>
+
+  <Tab>
+    ```vue
+    <script setup lang="ts">
+    import { Protect } from '@clerk/vue'
+    </script>
+
+    <template>
+      <Protect permission="org:invoices:create">
+        <template #fallback>
+          <p>You do not have the permissions to create an invoice.</p>
+        </template>
+        <slot />
+      </Protect>
+    </template>
+    ```
+  </Tab>
 </Tabs>
 
 ### Render content by role
 
-While authorization by `permission` is recommended, for convenience, `<Protect>` allows a `role` prop to be passed. The children of the following component will only be visible to users with the `org:billing` role.
+While authorization by `permission` is **recommended**, for convenience, `<Protect>` allows a `role` prop to be passed. The children of the following component will only be visible to users with the `org:billing` role.
 
-<Tabs items={["Next.js", "React", "Astro"]}>
+<Tabs items={["Next.js", "React", "Astro", "Vue"]}>
   <Tab>
     ```jsx
     import { Protect } from '@clerk/nextjs'
@@ -150,13 +167,30 @@ While authorization by `permission` is recommended, for convenience, `<Protect>`
     </Protect>
     ```
   </Tab>
+
+  <Tab>
+    ```vue
+    <script setup lang="ts">
+    import { Protect } from '@clerk/vue'
+    </script>
+
+    <template>
+      <Protect role="org:billing">
+        <template #fallback>
+          <p>Only a member of the Billing department can access this content.</p>
+        </template>
+        <slot />
+      </Protect>
+    </template>
+    ```
+  </Tab>
 </Tabs>
 
 ### Render content conditionally
 
 The following example uses `<Protect>`'s `condition` prop to conditionally render its children if the user has the correct role.
 
-<Tabs items={["Next.js", "Astro"]}>
+<Tabs items={["Next.js", "Astro", "Vue"]}>
   <Tab>
     ```tsx {{ filename: 'app/dashboard/settings/layout.tsx' }}
     import type { PropsWithChildren } from 'react'
@@ -187,4 +221,21 @@ The following example uses `<Protect>`'s `condition` prop to conditionally rende
     </Protect>
     ```
   </Tab>
+
+  <Tab>
+    ```vue
+    <script setup>
+    import { Protect } from '@clerk/vue'
+    </script>
+
+    <template>
+      <Protect :condition="(has) => has({ role: 'org:admin' }) || has({ role: 'org:billing_manager' })">
+        <template #fallback>
+          <p>Only an Admin or Billing Manager can access this content.</p>
+        </template>
+        <p>Visible content.</p>
+      </Protect>
+    </template>
+    ```
+  </Tab>
 </Tabs>