fix(vue): Include missing UserProfileLink component inside <UserButton /> component

.changeset/grumpy-kangaroos-ring.md

@@ -0,0 +1,26 @@
+---
+'@clerk/vue': patch
+---
+
+Adds ability to render custom `<UserProfile>` links inside `<UserButton>` component.
+
+Example:
+
+```vue
+<script setup>
+import { UserButton } from '@clerk/vue'
+</script>
+
+<template>
+  <UserButton>
+    <UserButton.UserProfileLink
+      label="Homepage"
+      url="/"
+    >
+      <template #labelIcon>
+        <div>Icon</div>
+      </template>
+    </UserButton.UserProfileLink>
+  </UserButton>
+</template>
+```

integration/templates/vue-vite/src/components/CustomUserButton.vue

@@ -47,6 +47,14 @@ const isActionClicked = ref(false);
         <p>This is the custom terms page</p>
       </div>
     </UserButton.UserProfilePage>
+    <UserButton.UserProfileLink
+      label="Homepage"
+      url="/"
+    >
+      <template #labelIcon>
+        <div>Icon</div>
+      </template>
+    </UserButton.UserProfileLink>
   </UserButton>
   <div>Is action clicked: {{ isActionClicked }}</div>
 </template>

integration/tests/vue/components.test.ts

@@ -108,6 +108,36 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withCustomRoles] })('basic te
     await u.po.expect.toBeSignedOut();
   });
 
+  test('render custom user profile pages and links inside user button', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+    await u.page.goToRelative('/sign-in');
+    await u.po.signIn.waitForMounted();
+    await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+    await u.po.expect.toBeSignedIn();
+
+    await u.page.waitForAppUrl('/');
+    await u.po.userButton.waitForMounted();
+
+    // Open UserProfile modal through UserButton
+    await u.po.userButton.toggleTrigger();
+    await u.po.userButton.waitForPopover();
+    await u.page.getByRole('menuitem', { name: /Manage account/i }).click();
+    await u.po.userProfile.waitForUserProfileModal();
+
+    // Verify custom pages and links are visible in the UserProfile
+    await expect(u.page.getByRole('button', { name: /Terms/i })).toBeVisible();
+    await expect(u.page.getByRole('button', { name: /Homepage/i })).toBeVisible();
+
+    // Test custom UserProfilePage is accessible and renders correctly
+    await u.page.getByRole('button', { name: /Terms/i }).click();
+    await expect(u.page.getByRole('heading', { name: 'Custom Terms Page' })).toBeVisible();
+    await expect(u.page.getByText('This is the custom terms page')).toBeVisible();
+
+    // Test UserProfileLink navigation works
+    await u.page.getByRole('button', { name: /Homepage/i }).click();
+    await u.page.waitForAppUrl('/');
+  });
+
   test('render user profile and current user data', async ({ page, context }) => {
     const u = createTestUtils({ app, page, context });
     await u.page.goToRelative('/sign-in');

packages/vue/src/components/ui-components/UserButton/index.ts

@@ -8,7 +8,7 @@ import {
 } from '../../../errors/messages';
 import { UserButtonInjectionKey, UserButtonMenuItemsInjectionKey } from '../../../keys';
 import type { UserButtonActionProps, UserButtonLinkProps } from '../../../types';
-import { UserProfilePage } from '../UserProfile';
+import { UserProfileLink, UserProfilePage } from '../UserProfile';
 import _UserButton from './UserButton.vue';
 
 const MenuItems = defineComponent((_, { slots }) => {
@@ -63,4 +63,5 @@ export const UserButton = Object.assign(_UserButton, {
   Action: MenuAction,
   Link: MenuLink,
   UserProfilePage,
+  UserProfileLink,
 });