feat(astro,vue,nuxt): Introduce APIKeys component (#7225)

Author: wobsoriano

.changeset/gentle-hats-hope.md

@@ -0,0 +1,7 @@
+---
+"@clerk/astro": minor
+"@clerk/nuxt": minor
+"@clerk/vue": minor
+---
+
+Introduce `<APIKeys />` component

packages/astro/src/astro-components/index.ts

@@ -31,3 +31,4 @@ export { default as CreateOrganization } from './interactive/CreateOrganization.
 export { default as GoogleOneTap } from './interactive/GoogleOneTap.astro';
 export { default as Waitlist } from './interactive/Waitlist.astro';
 export { default as PricingTable } from './interactive/PricingTable.astro';
+export { default as APIKeys } from './interactive/APIKeys.astro';

packages/astro/src/astro-components/interactive/APIKeys.astro

@@ -0,0 +1,11 @@
+---
+import type { APIKeysProps } from '@clerk/shared/types';
+type Props = APIKeysProps;
+
+import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro';
+---
+
+<InternalUIComponentRenderer
+  {...Astro.props}
+  component='api-keys'
+/>

packages/astro/src/internal/mount-clerk-astro-js-components.ts

@@ -20,6 +20,7 @@ const mountAllClerkAstroJSComponents = () => {
     'google-one-tap': 'openGoogleOneTap',
     waitlist: 'mountWaitlist',
     'pricing-table': 'mountPricingTable',
+    'api-keys': 'mountAPIKeys',
   } as const satisfies Record<InternalUIComponentId, keyof Clerk>;
 
   Object.entries(mountFns).forEach(([category, mountFn]) => {

packages/astro/src/types.ts

@@ -72,4 +72,5 @@ export type InternalUIComponentId =
   | 'user-profile'
   | 'google-one-tap'
   | 'waitlist'
-  | 'pricing-table';
+  | 'pricing-table'
+  | 'api-keys';

packages/nuxt/src/module.ts

@@ -169,6 +169,8 @@ export default defineNuxtModule<ModuleOptions>({
       'SignedIn',
       'SignedOut',
       'Waitlist',
+      // API Keys Components
+      'APIKeys',
     ];
     components.forEach(component => {
       void addComponent({

packages/nuxt/src/runtime/components/index.ts

@@ -30,4 +30,5 @@ export {
   SignOutButton,
   SignInWithMetamaskButton,
   PricingTable,
+  APIKeys,
 } from '@clerk/vue';

packages/vue/src/components/index.ts

@@ -5,6 +5,7 @@ export { default as Waitlist } from './ui-components/Waitlist.vue';
 export { default as CreateOrganization } from './ui-components/CreateOrganization.vue';
 export { default as OrganizationList } from './ui-components/OrganizationList.vue';
 export { default as PricingTable } from './ui-components/PricingTable.vue';
+export { default as APIKeys } from './ui-components/APIKeys.vue';
 export { UserProfile } from './ui-components/UserProfile';
 export { OrganizationProfile } from './ui-components/OrganizationProfile';
 export { OrganizationSwitcher } from './ui-components/OrganizationSwitcher';

packages/vue/src/components/ui-components/APIKeys.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { ClerkHostRenderer } from '../ClerkHostRenderer';
+import type { APIKeysProps } from '@clerk/shared/types';
+import { useClerk } from '../../composables';
+
+const clerk = useClerk();
+const props = defineProps<APIKeysProps>();
+</script>
+
+<template>
+  <ClerkHostRenderer
+    :mount="clerk?.mountAPIKeys"
+    :unmount="clerk?.unmountAPIKeys"
+    :update-props="(clerk as any)?.__unstable__updateProps"
+    :props="props"
+  />
+</template>