From 1c5104581685a5a3d1d6c0b30dd406ac27ac3653 Mon Sep 17 00:00:00 2001
From: Robert Soriano <sorianorobertc@gmail.com>
Date: Tue, 3 Dec 2024 08:49:44 -0800
Subject: [PATCH] chore(vue): Add custom menu items to `<UserButton />` (#4693)

---
 .changeset/moody-snails-smell.md              |   5 +
 integration/presets/vue.ts                    |   6 +-
 integration/templates/vue-vite/src/App.vue    |   5 +-
 .../src/components/CustomUserButton.vue       |  32 ++++++
 integration/tests/vue/components.test.ts      |  45 ++++++++
 packages/vue/src/components/uiComponents.ts   |  94 +++++++++++++++-
 packages/vue/src/errors/messages.ts           |  15 +++
 packages/vue/src/keys.ts                      |  10 +-
 packages/vue/src/types.ts                     |  42 +++++++-
 .../__tests__/useCustomElementPortal.test.ts  |  29 +++++
 .../__tests__/useCustomMenuItems.test.ts      | 102 ++++++++++++++++++
 packages/vue/src/utils/componentValidation.ts |   9 ++
 .../vue/src/utils/useCustomElementPortal.ts   |  40 +++++++
 packages/vue/src/utils/useCustomMenuItems.ts  |  95 ++++++++++++++++
 14 files changed, 519 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/moody-snails-smell.md
 create mode 100644 integration/templates/vue-vite/src/components/CustomUserButton.vue
 create mode 100644 packages/vue/src/utils/__tests__/useCustomElementPortal.test.ts
 create mode 100644 packages/vue/src/utils/__tests__/useCustomMenuItems.test.ts
 create mode 100644 packages/vue/src/utils/componentValidation.ts
 create mode 100644 packages/vue/src/utils/useCustomElementPortal.ts
 create mode 100644 packages/vue/src/utils/useCustomMenuItems.ts

diff --git a/.changeset/moody-snails-smell.md b/.changeset/moody-snails-smell.md
new file mode 100644
index 0000000000..bdf814b8fd
--- /dev/null
+++ b/.changeset/moody-snails-smell.md
@@ -0,0 +1,5 @@
+---
+"@clerk/vue": patch
+---
+
+Add support for custom menu items to `<UserButton />`
diff --git a/integration/presets/vue.ts b/integration/presets/vue.ts
index ca8be4cf2a..3d9cc9e280 100644
--- a/integration/presets/vue.ts
+++ b/integration/presets/vue.ts
@@ -6,9 +6,9 @@ const vite = applicationConfig()
   .useTemplate(templates['vue-vite'])
   .setEnvFormatter('public', key => `VITE_${key}`)
   .addScript('setup', 'pnpm install')
-  .addScript('dev', 'npm run dev')
-  .addScript('build', 'npm run build')
-  .addScript('serve', 'npm run preview')
+  .addScript('dev', 'pnpm dev')
+  .addScript('build', 'pnpm build')
+  .addScript('serve', 'pnpm preview')
   .addDependency('@clerk/vue', '*');
 
 export const vue = {
diff --git a/integration/templates/vue-vite/src/App.vue b/integration/templates/vue-vite/src/App.vue
index 2d04a9aa09..ca35a2979f 100644
--- a/integration/templates/vue-vite/src/App.vue
+++ b/integration/templates/vue-vite/src/App.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { SignedIn, SignedOut, UserButton, OrganizationSwitcher, ClerkLoaded, ClerkLoading } from '@clerk/vue';
+import { SignedIn, SignedOut, OrganizationSwitcher, ClerkLoaded, ClerkLoading } from '@clerk/vue';
+import CustomUserButton from './components/CustomUserButton.vue';
 </script>
 
 <template>
@@ -9,7 +10,7 @@ import { SignedIn, SignedOut, UserButton, OrganizationSwitcher, ClerkLoaded, Cle
         <p class="title">Vue Clerk Integration test</p>
       </div>
       <SignedIn>
-        <UserButton />
+        <CustomUserButton />
         <OrganizationSwitcher />
       </SignedIn>
       <SignedOut>
diff --git a/integration/templates/vue-vite/src/components/CustomUserButton.vue b/integration/templates/vue-vite/src/components/CustomUserButton.vue
new file mode 100644
index 0000000000..c973ec12ed
--- /dev/null
+++ b/integration/templates/vue-vite/src/components/CustomUserButton.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { UserButton } from '@clerk/vue';
+import { ref } from 'vue';
+
+const isActionClicked = ref(false);
+</script>
+
+<template>
+  <UserButton>
+    <UserButton.MenuItems>
+      <UserButton.Action label="signOut" />
+      <UserButton.Action label="manageAccount" />
+      <UserButton.Link
+        label="Custom link"
+        href="/profile"
+      >
+        <template #labelIcon>
+          <div>Icon</div>
+        </template>
+      </UserButton.Link>
+      <UserButton.Action
+        label="Custom action"
+        @click="isActionClicked = true"
+      >
+        <template #labelIcon>
+          <div>Icon</div>
+        </template>
+      </UserButton.Action>
+    </UserButton.MenuItems>
+  </UserButton>
+  <div>Is action clicked: {{ isActionClicked }}</div>
+</template>
diff --git a/integration/tests/vue/components.test.ts b/integration/tests/vue/components.test.ts
index 0587eef0aa..af6c01f4ae 100644
--- a/integration/tests/vue/components.test.ts
+++ b/integration/tests/vue/components.test.ts
@@ -53,6 +53,51 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withCustomRoles] })('basic te
     await u.po.userButton.toHaveVisibleMenuItems([/Manage account/i, /Sign out$/i]);
   });
 
+  test('render user button with custom menu items', 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();
+    await u.po.userButton.toggleTrigger();
+    await u.po.userButton.waitForPopover();
+
+    // Check if custom menu items are visible
+    await u.po.userButton.toHaveVisibleMenuItems([/Custom link/i, /Custom action/i]);
+
+    // Click custom action
+    await u.page.getByRole('menuitem', { name: /Custom action/i }).click();
+    await expect(u.page.getByText('Is action clicked: true')).toBeVisible();
+
+    // Trigger the popover again
+    await u.po.userButton.toggleTrigger();
+    await u.po.userButton.waitForPopover();
+
+    // Click custom link and check navigation
+    await u.page.getByRole('menuitem', { name: /Custom link/i }).click();
+    await u.page.waitForAppUrl('/profile');
+  });
+
+  test('reorders default user button menu items and functions as expected', 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();
+    await u.po.userButton.toggleTrigger();
+    await u.po.userButton.waitForPopover();
+
+    // First item should now be the sign out button
+    await u.page.getByRole('menuitem').first().click();
+    await u.po.expect.toBeSignedOut();
+  });
+
   test('render user profile and current user data', async ({ page, context }) => {
     const u = createTestUtils({ app, page, context });
     await u.page.goToRelative('/sign-in');
diff --git a/packages/vue/src/components/uiComponents.ts b/packages/vue/src/components/uiComponents.ts
index 46b05b50d2..26afc92924 100644
--- a/packages/vue/src/components/uiComponents.ts
+++ b/packages/vue/src/components/uiComponents.ts
@@ -9,10 +9,20 @@ import type {
   UserButtonProps,
   UserProfileProps,
   WaitlistProps,
+  Without,
 } from '@clerk/types';
-import { computed, defineComponent, h, onScopeDispose, ref, watchEffect } from 'vue';
+import { computed, defineComponent, h, inject, onScopeDispose, provide, ref, watchEffect } from 'vue';
 
 import { useClerk } from '../composables/useClerk';
+import { errorThrower } from '../errors/errorThrower';
+import {
+  userButtonMenuActionRenderedError,
+  userButtonMenuItemsRenderedError,
+  userButtonMenuLinkRenderedError,
+} from '../errors/messages';
+import { UserButtonInjectionKey, UserButtonMenuItemsInjectionKey } from '../keys';
+import type { CustomPortalsRendererProps, UserButtonActionProps, UserButtonLinkProps } from '../types';
+import { useUserButtonCustomMenuItems } from '../utils/useCustomMenuItems';
 import { ClerkLoaded } from './controlComponents';
 
 type AnyObject = Record<string, any>;
@@ -24,6 +34,10 @@ interface MountProps {
   props?: AnyObject;
 }
 
+const CustomPortalsRenderer = defineComponent((props: CustomPortalsRendererProps) => {
+  return () => [...(props?.customPagesPortals ?? []), ...(props?.customMenuItemsPortals ?? [])];
+});
+
 /**
  * A utility component that handles mounting and unmounting of Clerk UI components.
  * The component only mounts when Clerk is fully loaded and automatically
@@ -69,16 +83,90 @@ export const UserProfile = defineComponent((props: UserProfileProps) => {
     });
 });
 
-export const UserButton = defineComponent((props: UserButtonProps) => {
+type UserButtonPropsWithoutCustomMenuItems = Without<UserButtonProps, 'customMenuItems'>;
+
+const _UserButton = defineComponent((props: UserButtonPropsWithoutCustomMenuItems, { slots }) => {
   const clerk = useClerk();
 
-  return () =>
+  const { customMenuItems, customMenuItemsPortals, addCustomMenuItem } = useUserButtonCustomMenuItems();
+
+  const finalProps = computed<UserButtonProps>(() => ({
+    ...props,
+    customMenuItems: customMenuItems.value,
+    // TODO: Add custom pages
+  }));
+
+  provide(UserButtonInjectionKey, {
+    addCustomMenuItem,
+  });
+
+  return () => [
     h(Portal, {
       mount: clerk.value?.mountUserButton,
       unmount: clerk.value?.unmountUserButton,
       updateProps: (clerk.value as any)?.__unstable__updateProps,
+      props: finalProps.value,
+    }),
+    h(CustomPortalsRenderer, {
+      // TODO: Add custom pages portals
+      customMenuItemsPortals: customMenuItemsPortals.value,
+    }),
+    slots.default?.(),
+  ];
+});
+
+const MenuItems = defineComponent((_, { slots }) => {
+  const ctx = inject(UserButtonInjectionKey);
+
+  if (!ctx) {
+    return errorThrower.throw(userButtonMenuItemsRenderedError);
+  }
+
+  provide(UserButtonMenuItemsInjectionKey, ctx);
+  return () => slots.default?.();
+});
+
+export const MenuAction = defineComponent(
+  (props: UserButtonActionProps, { slots }) => {
+    const ctx = inject(UserButtonMenuItemsInjectionKey);
+    if (!ctx) {
+      return errorThrower.throw(userButtonMenuActionRenderedError);
+    }
+
+    ctx.addCustomMenuItem({
+      props,
+      slots,
+      component: MenuAction,
+    });
+
+    return () => null;
+  },
+  { name: 'MenuAction' },
+);
+
+export const MenuLink = defineComponent(
+  (props: UserButtonLinkProps, { slots }) => {
+    const ctx = inject(UserButtonMenuItemsInjectionKey);
+    if (!ctx) {
+      return errorThrower.throw(userButtonMenuLinkRenderedError);
+    }
+
+    ctx.addCustomMenuItem({
       props,
+      slots,
+      component: MenuLink,
     });
+
+    return () => null;
+  },
+  { name: 'MenuLink' },
+);
+
+export const UserButton = Object.assign(_UserButton, {
+  MenuItems,
+  Action: MenuAction,
+  Link: MenuLink,
+  // TODO: Add custom pages
 });
 
 export const GoogleOneTap = defineComponent((props: GoogleOneTapProps) => {
diff --git a/packages/vue/src/errors/messages.ts b/packages/vue/src/errors/messages.ts
index 786d1ec0d7..aad303f809 100644
--- a/packages/vue/src/errors/messages.ts
+++ b/packages/vue/src/errors/messages.ts
@@ -6,3 +6,18 @@ export const invalidStateError =
 
 export const useAuthHasRequiresRoleOrPermission =
   'Missing parameters. `has` from `useAuth` requires a permission or role key to be passed. Example usage: `has({permission: "org:posts:edit"})`';
+
+export const userButtonMenuActionRenderedError =
+  '<UserButton.Action /> component needs to be a direct child of `<UserButton.MenuItems />`.';
+
+export const userButtonMenuLinkRenderedError =
+  '<UserButton.Link /> component needs to be a direct child of `<UserButton.MenuItems />`.';
+
+export const userButtonMenuItemLinkWrongProps =
+  'Missing requirements. <UserButton.Link /> component requires props: href, label and slot: labelIcon';
+
+export const userButtonMenuItemActionWrongProps =
+  'Missing requirements. <UserButton.Action /> component requires props: label and slot: labelIcon';
+
+export const userButtonMenuItemsRenderedError =
+  '<UserButton.MenuItems /> component needs to be a direct child of `<UserButton />`.';
diff --git a/packages/vue/src/keys.ts b/packages/vue/src/keys.ts
index 1a6a9e0a01..1958d1ad57 100644
--- a/packages/vue/src/keys.ts
+++ b/packages/vue/src/keys.ts
@@ -1,5 +1,13 @@
 import type { InjectionKey } from 'vue';
 
-import type { VueClerkInjectionKeyType } from './types';
+import type { AddCustomMenuItemParams, VueClerkInjectionKeyType } from './types';
 
 export const ClerkInjectionKey = Symbol('clerk') as InjectionKey<VueClerkInjectionKeyType>;
+
+export const UserButtonInjectionKey = Symbol('UserButton') as InjectionKey<{
+  addCustomMenuItem(params: AddCustomMenuItemParams): void;
+}>;
+
+export const UserButtonMenuItemsInjectionKey = Symbol('UserButton.MenuItems') as InjectionKey<{
+  addCustomMenuItem(params: AddCustomMenuItemParams): void;
+}>;
diff --git a/packages/vue/src/types.ts b/packages/vue/src/types.ts
index 64230c0c79..ed1a5c71aa 100644
--- a/packages/vue/src/types.ts
+++ b/packages/vue/src/types.ts
@@ -4,13 +4,14 @@ import type {
   Clerk,
   ClerkOptions,
   ClientResource,
+  CustomMenuItem,
   OrganizationCustomPermissionKey,
   OrganizationCustomRoleKey,
   OrganizationResource,
   UserResource,
   Without,
 } from '@clerk/types';
-import type { ComputedRef, ShallowRef } from 'vue';
+import type { Component, ComputedRef, ShallowRef, Slot, VNode } from 'vue';
 
 export interface VueClerkInjectionKeyType {
   clerk: ShallowRef<Clerk | null>;
@@ -41,6 +42,45 @@ export interface BrowserClerk extends HeadlessBrowserClerk {
   components: any;
 }
 
+export interface CustomPortalsRendererProps {
+  customPagesPortals?: VNode[];
+  customMenuItemsPortals?: VNode[];
+}
+
+export type CustomItemOrPageWithoutHandler<T> = Without<T, 'mount' | 'unmount' | 'mountIcon' | 'unmountIcon'>;
+
+export type AddCustomMenuItemParams = {
+  props: CustomItemOrPageWithoutHandler<CustomMenuItem>;
+  slots: {
+    labelIcon?: Slot;
+  };
+  component: Component;
+};
+
+type ButtonActionProps<T extends string> =
+  | {
+      label: string;
+      onClick: () => void;
+      open?: never;
+    }
+  | {
+      label: T;
+      onClick?: never;
+      open?: never;
+    }
+  | {
+      label: string;
+      onClick?: never;
+      open: string;
+    };
+
+export type UserButtonActionProps = ButtonActionProps<'manageAccount' | 'signOut'>;
+
+export type UserButtonLinkProps = {
+  href: string;
+  label: string;
+};
+
 declare global {
   interface Window {
     Clerk: BrowserClerk;
diff --git a/packages/vue/src/utils/__tests__/useCustomElementPortal.test.ts b/packages/vue/src/utils/__tests__/useCustomElementPortal.test.ts
new file mode 100644
index 0000000000..8589d69a86
--- /dev/null
+++ b/packages/vue/src/utils/__tests__/useCustomElementPortal.test.ts
@@ -0,0 +1,29 @@
+import { h, Teleport } from 'vue';
+
+import { useCustomElementPortal } from '../useCustomElementPortal';
+
+describe('useCustomElementPortal', () => {
+  it('should return empty array when no element is mounted', () => {
+    const { portals } = useCustomElementPortal();
+    expect(portals.value).toEqual([]);
+  });
+
+  it('should add/remove element to portal list', () => {
+    const { mount, unmount, portals } = useCustomElementPortal();
+
+    const el = document.createElement('div');
+    el.id = 'test-portal';
+    const slot = () => [h('div', 'Test Content')];
+
+    mount(el, slot);
+
+    expect(portals.value).toHaveLength(1);
+
+    expect(portals.value[0].type).toBe(Teleport);
+    expect(portals.value[0].props!.to).toBe(el);
+
+    unmount(el);
+
+    expect(portals.value).toHaveLength(0);
+  });
+});
diff --git a/packages/vue/src/utils/__tests__/useCustomMenuItems.test.ts b/packages/vue/src/utils/__tests__/useCustomMenuItems.test.ts
new file mode 100644
index 0000000000..853a50a1f8
--- /dev/null
+++ b/packages/vue/src/utils/__tests__/useCustomMenuItems.test.ts
@@ -0,0 +1,102 @@
+import { vi } from 'vitest';
+import { h } from 'vue';
+
+import { MenuAction, MenuLink } from '../../components/uiComponents';
+import { useUserButtonCustomMenuItems } from '../useCustomMenuItems';
+
+describe('useUserButtonCustomMenuItems', () => {
+  const labelIconSlot = () => [h('div', 'Icon')];
+
+  it('should return empty arrays when no children are provided', () => {
+    const { customMenuItems, customMenuItemsPortals } = useUserButtonCustomMenuItems();
+    expect(customMenuItems.value).toEqual([]);
+    expect(customMenuItemsPortals.value).toEqual([]);
+  });
+
+  it('should process valid action items', async () => {
+    const { customMenuItems, addCustomMenuItem } = useUserButtonCustomMenuItems();
+
+    addCustomMenuItem({
+      props: {
+        label: 'Custom Action',
+        onClick() {},
+      },
+      slots: {
+        labelIcon: labelIconSlot,
+      },
+      component: MenuAction,
+    });
+
+    expect(customMenuItems.value).toHaveLength(1);
+    expect(customMenuItems.value[0].label).toBe('Custom Action');
+    expect(customMenuItems.value[0].onClick).toBeDefined();
+  });
+
+  it('should process valid link items', async () => {
+    const { customMenuItems, addCustomMenuItem } = useUserButtonCustomMenuItems();
+
+    addCustomMenuItem({
+      props: {
+        label: 'Custom Link',
+        href: 'https://example.com',
+      },
+      slots: {
+        labelIcon: labelIconSlot,
+      },
+      component: MenuLink,
+    });
+
+    expect(customMenuItems.value).toHaveLength(1);
+    expect(customMenuItems.value[0].label).toBe('Custom Link');
+    expect(customMenuItems.value[0].href).toBe('https://example.com');
+  });
+
+  it('should process reorder items', async () => {
+    const { customMenuItems, addCustomMenuItem } = useUserButtonCustomMenuItems();
+    addCustomMenuItem({
+      props: {
+        label: 'manageAccount',
+      },
+      slots: {},
+      component: MenuAction,
+    });
+    addCustomMenuItem({
+      props: {
+        label: 'signOut',
+      },
+      slots: {},
+      component: MenuAction,
+    });
+
+    expect(customMenuItems.value).toHaveLength(2);
+    expect(customMenuItems.value[0].label).toBe('manageAccount');
+    expect(customMenuItems.value[1].label).toBe('signOut');
+  });
+
+  it('should process valid MenuAction items and call onClick when triggered', () => {
+    const mockOnClick = vi.fn();
+    const { customMenuItems, addCustomMenuItem } = useUserButtonCustomMenuItems();
+    addCustomMenuItem({
+      props: {
+        label: 'Custom Action',
+        onClick: mockOnClick,
+      },
+      slots: {
+        labelIcon: labelIconSlot,
+      },
+      component: MenuAction,
+    });
+
+    expect(customMenuItems.value).toHaveLength(1);
+
+    const menuItem = customMenuItems.value[0];
+    expect(menuItem).toBeDefined();
+    expect(menuItem.label).toBe('Custom Action');
+    expect(menuItem.onClick).toBeDefined();
+
+    if (menuItem.onClick) {
+      menuItem.onClick();
+      expect(mockOnClick).toHaveBeenCalledTimes(1);
+    }
+  });
+});
diff --git a/packages/vue/src/utils/componentValidation.ts b/packages/vue/src/utils/componentValidation.ts
new file mode 100644
index 0000000000..b29ae8548d
--- /dev/null
+++ b/packages/vue/src/utils/componentValidation.ts
@@ -0,0 +1,9 @@
+import { type Component } from 'vue';
+
+export const isThatComponent = (v: any, component: Component): v is Component => {
+  return !!v && isRenderFunction(v) && v.name === component.name;
+};
+
+const isRenderFunction = (v: any): v is Component => {
+  return 'name' in v && 'setup' in v;
+};
diff --git a/packages/vue/src/utils/useCustomElementPortal.ts b/packages/vue/src/utils/useCustomElementPortal.ts
new file mode 100644
index 0000000000..8b196cd2bb
--- /dev/null
+++ b/packages/vue/src/utils/useCustomElementPortal.ts
@@ -0,0 +1,40 @@
+import type { Slot } from 'vue';
+import { computed, h, ref, Teleport } from 'vue';
+
+interface RawPortal {
+  id: string;
+  el: HTMLDivElement;
+  slot: Slot;
+}
+
+export const useCustomElementPortal = () => {
+  const rawPortals = ref<RawPortal[]>([]);
+  const portals = computed(() => {
+    return rawPortals.value.map(item => {
+      return h(Teleport, { to: item.el }, item.slot());
+    });
+  });
+
+  const mount = (el: HTMLDivElement, slot: Slot) => {
+    rawPortals.value.push({
+      id: el.id,
+      el,
+      slot,
+    });
+  };
+
+  const unmount = (el: HTMLDivElement | undefined) => {
+    if (el) {
+      const index = rawPortals.value.findIndex(portal => portal.id === el.id);
+      if (index !== -1) {
+        rawPortals.value.splice(index, 1);
+      }
+    }
+  };
+
+  return {
+    portals,
+    mount,
+    unmount,
+  };
+};
diff --git a/packages/vue/src/utils/useCustomMenuItems.ts b/packages/vue/src/utils/useCustomMenuItems.ts
new file mode 100644
index 0000000000..cb905f21d9
--- /dev/null
+++ b/packages/vue/src/utils/useCustomMenuItems.ts
@@ -0,0 +1,95 @@
+import { logErrorInDevMode } from '@clerk/shared/utils';
+import type { CustomMenuItem } from '@clerk/types';
+import { ref } from 'vue';
+
+import { MenuAction, MenuLink } from '../components/uiComponents';
+import { userButtonMenuItemActionWrongProps, userButtonMenuItemLinkWrongProps } from '../errors/messages';
+import type { AddCustomMenuItemParams, UserButtonActionProps, UserButtonLinkProps } from '../types';
+import { isThatComponent } from './componentValidation';
+import { useCustomElementPortal } from './useCustomElementPortal';
+
+export const useUserButtonCustomMenuItems = () => {
+  const customMenuItems = ref<CustomMenuItem[]>([]);
+  const { portals: customMenuItemsPortals, mount, unmount } = useCustomElementPortal();
+  const reorderItemsLabels = ['manageAccount', 'signOut'];
+
+  function addCustomMenuItem(params: AddCustomMenuItemParams) {
+    const { props, component, slots } = params;
+    const { label, onClick, open, href } = props;
+
+    if (isThatComponent(component, MenuAction)) {
+      if (isReorderItem(props, slots, reorderItemsLabels)) {
+        // This is a reordering item
+        customMenuItems.value.push({ label });
+      } else if (isCustomMenuItem(props, slots)) {
+        const baseItem: CustomMenuItem = {
+          label,
+          mountIcon(el) {
+            mount(el, slots.labelIcon!);
+          },
+          unmountIcon: unmount,
+        };
+
+        if (onClick !== undefined) {
+          customMenuItems.value.push({
+            ...baseItem,
+            onClick,
+            open,
+          });
+        } else if (open !== undefined) {
+          customMenuItems.value.push({
+            ...baseItem,
+            open: open.startsWith('/') ? open : `/${open}`,
+          });
+        } else {
+          // Handle the case where neither onClick nor open is defined
+          logErrorInDevMode('Custom menu item must have either onClick or open property');
+          return;
+        }
+      } else {
+        logErrorInDevMode(userButtonMenuItemActionWrongProps);
+        return;
+      }
+    }
+
+    if (isThatComponent(component, MenuLink)) {
+      if (isExternalLink(props, slots)) {
+        customMenuItems.value.push({
+          label,
+          href,
+          mountIcon(el) {
+            mount(el, slots.labelIcon!);
+          },
+          unmountIcon: unmount,
+        });
+      } else {
+        logErrorInDevMode(userButtonMenuItemLinkWrongProps);
+        return;
+      }
+    }
+  }
+
+  return {
+    customMenuItems,
+    customMenuItemsPortals,
+    addCustomMenuItem,
+  };
+};
+
+const isReorderItem = (props: any, slots: AddCustomMenuItemParams['slots'], validItems: string[]): boolean => {
+  const { label, onClick } = props;
+  const { labelIcon } = slots;
+  return !onClick && !labelIcon && validItems.some(v => v === label);
+};
+
+const isCustomMenuItem = (props: any, slots: AddCustomMenuItemParams['slots']): props is UserButtonActionProps => {
+  const { label, onClick, open } = props;
+  const { labelIcon } = slots;
+  return !!labelIcon && !!label && (typeof onClick === 'function' || typeof open === 'string');
+};
+
+const isExternalLink = (props: any, slots: AddCustomMenuItemParams['slots']): props is UserButtonLinkProps => {
+  const { label, href } = props;
+  const { labelIcon } = slots;
+  return !!href && !!labelIcon && !!label;
+};