From 3cd5a0e092b2a59791694e57ba351c96f0b1f479 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Mon, 10 Feb 2025 19:02:53 -0800
Subject: [PATCH 1/5] feat: Add organization custom pages and links via
 OrganizationSwitcher

---
 integration/templates/vue-vite/src/App.vue    |  3 +-
 .../templates/vue-vite/src/views/Home.vue     |  5 ++-
 .../custom-pages/OrganizationProfile.vue      | 36 +++++++++++++++-
 integration/tests/vue/components.test.ts      | 42 ++++++++++++++++++-
 packages/vue/src/components/index.ts          |  3 +-
 .../ui-components/OrganizationSwitcher.vue    | 17 --------
 .../OrganizationSwitcher.vue                  | 40 ++++++++++++++++++
 .../OrganizationSwitcher/index.ts             |  7 ++++
 8 files changed, 127 insertions(+), 26 deletions(-)
 delete mode 100644 packages/vue/src/components/ui-components/OrganizationSwitcher.vue
 create mode 100644 packages/vue/src/components/ui-components/OrganizationSwitcher/OrganizationSwitcher.vue
 create mode 100644 packages/vue/src/components/ui-components/OrganizationSwitcher/index.ts

diff --git a/integration/templates/vue-vite/src/App.vue b/integration/templates/vue-vite/src/App.vue
index ca35a2979fb..f913f45b9e4 100644
--- a/integration/templates/vue-vite/src/App.vue
+++ b/integration/templates/vue-vite/src/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { SignedIn, SignedOut, OrganizationSwitcher, ClerkLoaded, ClerkLoading } from '@clerk/vue';
+import { SignedIn, SignedOut, ClerkLoaded, ClerkLoading } from '@clerk/vue';
 import CustomUserButton from './components/CustomUserButton.vue';
 </script>
 
@@ -11,7 +11,6 @@ import CustomUserButton from './components/CustomUserButton.vue';
       </div>
       <SignedIn>
         <CustomUserButton />
-        <OrganizationSwitcher />
       </SignedIn>
       <SignedOut>
         <RouterLink to="/sign-in">Sign in</RouterLink>
diff --git a/integration/templates/vue-vite/src/views/Home.vue b/integration/templates/vue-vite/src/views/Home.vue
index 7292d404521..e12e3680290 100644
--- a/integration/templates/vue-vite/src/views/Home.vue
+++ b/integration/templates/vue-vite/src/views/Home.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
-import { useAuth } from '@clerk/vue';
+import { SignedIn, OrganizationSwitcher, useAuth } from '@clerk/vue';
 
 const { isSignedIn } = useAuth();
 </script>
 
 <template>
+  <SignedIn>
+    <OrganizationSwitcher />
+  </SignedIn>
   <div>
     <ul>
       <li v-if="isSignedIn"><RouterLink to="/profile">Profile</RouterLink></li>
diff --git a/integration/templates/vue-vite/src/views/custom-pages/OrganizationProfile.vue b/integration/templates/vue-vite/src/views/custom-pages/OrganizationProfile.vue
index b2799065eff..52f510fcfa1 100644
--- a/integration/templates/vue-vite/src/views/custom-pages/OrganizationProfile.vue
+++ b/integration/templates/vue-vite/src/views/custom-pages/OrganizationProfile.vue
@@ -1,9 +1,41 @@
 <script setup lang="ts">
-import { OrganizationProfile } from '@clerk/vue';
+import { OrganizationProfile, OrganizationSwitcher } from '@clerk/vue';
+import { useRoute } from 'vue-router';
+
+// Added a dedicatedPage query param to conditionally render the OrganizationProfile
+// as for some reason, the menu items in the OrganizationSwitcher
+// goes out of bounds in test environment.
+const route = useRoute();
+const dedicatedPage = route.query.dedicatedPage === 'true';
 </script>
 
 <template>
-  <OrganizationProfile>
+  <div>is dedicated page: {{ dedicatedPage }}</div>
+  <OrganizationSwitcher>
+    <OrganizationSwitcher.OrganizationProfilePage
+      v-if="!dedicatedPage"
+        label="Terms"
+        url="terms"
+      >
+        <template #labelIcon>
+          <div>Icon</div>
+        </template>
+        <div>
+          <h1>Custom Terms Page</h1>
+          <p>This is the custom terms page</p>
+        </div>
+      </OrganizationSwitcher.OrganizationProfilePage>
+      <OrganizationSwitcher.OrganizationProfileLink
+        v-if="!dedicatedPage"
+        label="Homepage"
+        url="/"
+      >
+        <template #labelIcon>
+          <div>Icon</div>
+        </template>
+      </OrganizationSwitcher.OrganizationProfileLink>
+  </OrganizationSwitcher>
+  <OrganizationProfile v-if="dedicatedPage">
     <OrganizationProfile.Page
       label="Terms"
       url="terms"
diff --git a/integration/tests/vue/components.test.ts b/integration/tests/vue/components.test.ts
index b0eedadd61d..29bfeff9b91 100644
--- a/integration/tests/vue/components.test.ts
+++ b/integration/tests/vue/components.test.ts
@@ -148,15 +148,18 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withCustomRoles] })('basic te
     await u.page.waitForAppUrl('/');
   });
 
-  test('render organization profile with custom pages and links', async ({ page, context }) => {
+  test('render organization profile with custom pages and links in a dedicated page', 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.goToRelative('/custom-pages/organization-profile');
+    await u.page.goToRelative('/custom-pages/organization-profile?dedicatedPage=true');
+
     await u.po.organizationSwitcher.waitForMounted();
+
+    console.log(await u.page.content());
     await u.po.organizationSwitcher.waitForAnOrganizationToSelected();
 
     // Check if custom pages and links are visible
@@ -176,6 +179,41 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withCustomRoles] })('basic te
     await u.page.waitForAppUrl('/');
   });
 
+  test('render organization profile with custom pages and links inside organization switcher', 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.goToRelative('/custom-pages/organization-profile?dedicatedPage=false');
+
+    // console.log(await u.page.content())
+
+    await u.po.organizationSwitcher.waitForMounted();
+    await u.po.organizationSwitcher.waitForAnOrganizationToSelected();
+
+    // Open organization profile inside organization switcher
+    await u.po.organizationSwitcher.toggleTrigger();
+    await u.page.waitForSelector('.cl-organizationSwitcherPopoverCard', { state: 'visible' });
+    await u.page.locator('.cl-button__manageOrganization').click();
+
+    // Check if custom pages and links are visible
+    await expect(u.page.getByRole('button', { name: /Terms/i })).toBeVisible();
+    await expect(u.page.getByRole('button', { name: /Homepage/i })).toBeVisible();
+
+    // Navigate to custom page
+    await u.page.getByRole('button', { name: /Terms/i }).click();
+    await expect(u.page.getByRole('heading', { name: 'Custom Terms Page' })).toBeVisible();
+
+    // Click custom link and check navigation
+    await u.page.getByRole('button', { name: /Homepage/i }).click();
+    await u.page.waitForAppUrl('/');
+  });
+
   test('redirects to sign-in when unauthenticated', async ({ page, context }) => {
     const u = createTestUtils({ app, page, context });
     await u.page.goToRelative('/profile');
diff --git a/packages/vue/src/components/index.ts b/packages/vue/src/components/index.ts
index c17dcaf87bc..0d0d7740c84 100644
--- a/packages/vue/src/components/index.ts
+++ b/packages/vue/src/components/index.ts
@@ -2,13 +2,12 @@ export { default as SignIn } from './ui-components/SignIn.vue';
 export { default as SignUp } from './ui-components/SignUp.vue';
 export { default as GoogleOneTap } from './ui-components/GoogleOneTap.vue';
 export { default as Waitlist } from './ui-components/Waitlist.vue';
-export { default as OrganizationSwitcher } from './ui-components/OrganizationSwitcher.vue';
 export { default as CreateOrganization } from './ui-components/CreateOrganization.vue';
 export { default as OrganizationList } from './ui-components/OrganizationList.vue';
 export { UserProfile } from './ui-components/UserProfile';
 export { OrganizationProfile } from './ui-components/OrganizationProfile';
+export { OrganizationSwitcher } from './ui-components/OrganizationSwitcher';
 export { UserButton } from './ui-components/UserButton';
-
 export {
   ClerkLoaded,
   ClerkLoading,
diff --git a/packages/vue/src/components/ui-components/OrganizationSwitcher.vue b/packages/vue/src/components/ui-components/OrganizationSwitcher.vue
deleted file mode 100644
index 96f30b39f7c..00000000000
--- a/packages/vue/src/components/ui-components/OrganizationSwitcher.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import { useClerk } from '../../composables';
-import type { OrganizationSwitcherProps } from '@clerk/types';
-import { ClerkHostRenderer } from '../ClerkHostRenderer';
-
-const clerk = useClerk();
-const props = defineProps<OrganizationSwitcherProps>();
-</script>
-
-<template>
-  <ClerkHostRenderer
-    :mount="clerk?.mountOrganizationSwitcher"
-    :unmount="clerk?.unmountOrganizationSwitcher"
-    :update-props="(clerk as any)?.__unstable__updateProps"
-    :props="props"
-  />
-</template>
diff --git a/packages/vue/src/components/ui-components/OrganizationSwitcher/OrganizationSwitcher.vue b/packages/vue/src/components/ui-components/OrganizationSwitcher/OrganizationSwitcher.vue
new file mode 100644
index 00000000000..af8b4992657
--- /dev/null
+++ b/packages/vue/src/components/ui-components/OrganizationSwitcher/OrganizationSwitcher.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { useClerk } from '../../../composables';
+import type { OrganizationSwitcherProps, OrganizationProfileProps } from '@clerk/types';
+import { ClerkHostRenderer } from '../../ClerkHostRenderer';
+import { useOrganizationProfileCustomPages } from '../../../utils/useCustomPages';
+import { computed, provide } from 'vue';
+import { OrganizationProfileInjectionKey } from '../../../keys';
+
+const clerk = useClerk();
+
+type Props = Omit<OrganizationSwitcherProps, 'organizationProfileProps' | '__experimental_asStandalone'> & {
+  organizationProfileProps?: Pick<OrganizationProfileProps, 'appearance'>;
+};
+const props = defineProps<Props>();
+
+const { customPages, customPagesPortals, addCustomPage } = useOrganizationProfileCustomPages();
+
+const finalProps = computed<Props>(() => ({
+  ...props,
+  organizationProfileProps: {
+    ...(props.organizationProfileProps || {}),
+    customPages: customPages.value,
+  },
+}));
+
+provide(OrganizationProfileInjectionKey, {
+  addCustomPage,
+});
+</script>
+
+<template>
+  <ClerkHostRenderer
+    :mount="clerk?.mountOrganizationSwitcher"
+    :unmount="clerk?.unmountOrganizationSwitcher"
+    :update-props="(clerk as any)?.__unstable__updateProps"
+    :props="finalProps"
+  />
+  <CustomPortalsRenderer :custom-pages-portals="customPagesPortals" />
+  <slot />
+</template>
diff --git a/packages/vue/src/components/ui-components/OrganizationSwitcher/index.ts b/packages/vue/src/components/ui-components/OrganizationSwitcher/index.ts
new file mode 100644
index 00000000000..6125bb5f81e
--- /dev/null
+++ b/packages/vue/src/components/ui-components/OrganizationSwitcher/index.ts
@@ -0,0 +1,7 @@
+import { OrganizationProfileLink, OrganizationProfilePage } from '../OrganizationProfile';
+import _OrganizationSwitcher from './OrganizationSwitcher.vue';
+
+export const OrganizationSwitcher = Object.assign(_OrganizationSwitcher, {
+  OrganizationProfilePage,
+  OrganizationProfileLink,
+});

From a12b2d5cdb69dac10caa4b588b7b782cafc489f9 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Tue, 11 Feb 2025 08:56:50 -0800
Subject: [PATCH 2/5] fix tests and missing imports

---
 .../custom-pages/OrganizationProfile.vue      | 41 +++++++++----------
 integration/tests/vue/components.test.ts      |  8 +---
 .../OrganizationSwitcher.vue                  |  2 +-
 3 files changed, 22 insertions(+), 29 deletions(-)

diff --git a/integration/templates/vue-vite/src/views/custom-pages/OrganizationProfile.vue b/integration/templates/vue-vite/src/views/custom-pages/OrganizationProfile.vue
index 52f510fcfa1..c02188e9c6a 100644
--- a/integration/templates/vue-vite/src/views/custom-pages/OrganizationProfile.vue
+++ b/integration/templates/vue-vite/src/views/custom-pages/OrganizationProfile.vue
@@ -10,30 +10,29 @@ const dedicatedPage = route.query.dedicatedPage === 'true';
 </script>
 
 <template>
-  <div>is dedicated page: {{ dedicatedPage }}</div>
   <OrganizationSwitcher>
     <OrganizationSwitcher.OrganizationProfilePage
       v-if="!dedicatedPage"
-        label="Terms"
-        url="terms"
-      >
-        <template #labelIcon>
-          <div>Icon</div>
-        </template>
-        <div>
-          <h1>Custom Terms Page</h1>
-          <p>This is the custom terms page</p>
-        </div>
-      </OrganizationSwitcher.OrganizationProfilePage>
-      <OrganizationSwitcher.OrganizationProfileLink
-        v-if="!dedicatedPage"
-        label="Homepage"
-        url="/"
-      >
-        <template #labelIcon>
-          <div>Icon</div>
-        </template>
-      </OrganizationSwitcher.OrganizationProfileLink>
+      label="Terms"
+      url="terms"
+    >
+      <template #labelIcon>
+        <div>Icon</div>
+      </template>
+      <div>
+        <h1>Custom Terms Page</h1>
+        <p>This is the custom terms page</p>
+      </div>
+    </OrganizationSwitcher.OrganizationProfilePage>
+    <OrganizationSwitcher.OrganizationProfileLink
+      v-if="!dedicatedPage"
+      label="Homepage"
+      url="/"
+    >
+      <template #labelIcon>
+        <div>Icon</div>
+      </template>
+    </OrganizationSwitcher.OrganizationProfileLink>
   </OrganizationSwitcher>
   <OrganizationProfile v-if="dedicatedPage">
     <OrganizationProfile.Page
diff --git a/integration/tests/vue/components.test.ts b/integration/tests/vue/components.test.ts
index 1141b657590..6d43643efa5 100644
--- a/integration/tests/vue/components.test.ts
+++ b/integration/tests/vue/components.test.ts
@@ -186,10 +186,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withCustomRoles] })('basic te
     await u.po.expect.toBeSignedIn();
 
     await u.page.goToRelative('/custom-pages/organization-profile?dedicatedPage=true');
-
     await u.po.organizationSwitcher.waitForMounted();
-
-    console.log(await u.page.content());
     await u.po.organizationSwitcher.waitForAnOrganizationToSelected();
 
     // Check if custom pages and links are visible
@@ -209,7 +206,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withCustomRoles] })('basic te
     await u.page.waitForAppUrl('/');
   });
 
-  test('render organization profile with custom pages and links inside organization switcher', async ({
+  test('render organization profile with custom pages and links inside an organization switcher', async ({
     page,
     context,
   }) => {
@@ -220,9 +217,6 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withCustomRoles] })('basic te
     await u.po.expect.toBeSignedIn();
 
     await u.page.goToRelative('/custom-pages/organization-profile?dedicatedPage=false');
-
-    // console.log(await u.page.content())
-
     await u.po.organizationSwitcher.waitForMounted();
     await u.po.organizationSwitcher.waitForAnOrganizationToSelected();
 
diff --git a/packages/vue/src/components/ui-components/OrganizationSwitcher/OrganizationSwitcher.vue b/packages/vue/src/components/ui-components/OrganizationSwitcher/OrganizationSwitcher.vue
index af8b4992657..4d693197085 100644
--- a/packages/vue/src/components/ui-components/OrganizationSwitcher/OrganizationSwitcher.vue
+++ b/packages/vue/src/components/ui-components/OrganizationSwitcher/OrganizationSwitcher.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useClerk } from '../../../composables';
 import type { OrganizationSwitcherProps, OrganizationProfileProps } from '@clerk/types';
-import { ClerkHostRenderer } from '../../ClerkHostRenderer';
+import { ClerkHostRenderer, CustomPortalsRenderer } from '../../ClerkHostRenderer';
 import { useOrganizationProfileCustomPages } from '../../../utils/useCustomPages';
 import { computed, provide } from 'vue';
 import { OrganizationProfileInjectionKey } from '../../../keys';

From 246506ff8ef8c437bd7dd38429abb51ae910a997 Mon Sep 17 00:00:00 2001
From: Robert Soriano <sorianorobertc@gmail.com>
Date: Tue, 11 Feb 2025 12:21:09 -0800
Subject: [PATCH 3/5] chore: add changeset

---
 .changeset/unlucky-readers-sleep.md | 35 +++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 .changeset/unlucky-readers-sleep.md

diff --git a/.changeset/unlucky-readers-sleep.md b/.changeset/unlucky-readers-sleep.md
new file mode 100644
index 00000000000..e9dc4079a9d
--- /dev/null
+++ b/.changeset/unlucky-readers-sleep.md
@@ -0,0 +1,35 @@
+---
+"@clerk/vue": minor
+---
+
+Add support for `<OrganizationProfile>` custom pages and links through `<OrganizationSwitcher>`
+
+Example:
+
+```vue
+<script setup lang="ts">
+import { OrganizationSwitcher } from '@clerk/vue'
+import Icon from './Icon.vue'
+</script>
+
+<template>
+  <header>
+    <OrganizationSwitcher>
+      <OrganizationSwitcher.OrganizationProfilePage label="Custom Page" url="custom">
+        <template #labelIcon>
+          <Icon />
+        </template>
+        <div>
+          <h1>Custom Organization Profile Page</h1>
+          <p>This is the custom organization profile page</p>
+        </div>
+      </OrganizationSwitcher.OrganizationProfilePage>
+      <OrganizationSwitcher.OrganizationProfileLink label="Homepage" url="/">
+        <template #labelIcon>
+          <Icon />
+        </template>
+      </OrganizationSwitcher.OrganizationProfileLink>
+    </OrganizationSwitcher>
+  </header>
+</template>
+```

From 457c98926fc43e1f9c7531b7c654cf059d3c88c1 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Tue, 11 Feb 2025 15:10:02 -0800
Subject: [PATCH 4/5] test: remove unused query params

---
 .../custom-pages/OrganizationProfile.vue      | 31 +++----------------
 integration/tests/vue/components.test.ts      |  4 +--
 2 files changed, 7 insertions(+), 28 deletions(-)

diff --git a/integration/templates/vue-vite/src/views/custom-pages/OrganizationProfile.vue b/integration/templates/vue-vite/src/views/custom-pages/OrganizationProfile.vue
index c02188e9c6a..f1606fc71a3 100644
--- a/integration/templates/vue-vite/src/views/custom-pages/OrganizationProfile.vue
+++ b/integration/templates/vue-vite/src/views/custom-pages/OrganizationProfile.vue
@@ -1,21 +1,10 @@
 <script setup lang="ts">
 import { OrganizationProfile, OrganizationSwitcher } from '@clerk/vue';
-import { useRoute } from 'vue-router';
-
-// Added a dedicatedPage query param to conditionally render the OrganizationProfile
-// as for some reason, the menu items in the OrganizationSwitcher
-// goes out of bounds in test environment.
-const route = useRoute();
-const dedicatedPage = route.query.dedicatedPage === 'true';
 </script>
 
 <template>
   <OrganizationSwitcher>
-    <OrganizationSwitcher.OrganizationProfilePage
-      v-if="!dedicatedPage"
-      label="Terms"
-      url="terms"
-    >
+    <OrganizationSwitcher.OrganizationProfilePage label="Terms" url="terms">
       <template #labelIcon>
         <div>Icon</div>
       </template>
@@ -24,21 +13,14 @@ const dedicatedPage = route.query.dedicatedPage === 'true';
         <p>This is the custom terms page</p>
       </div>
     </OrganizationSwitcher.OrganizationProfilePage>
-    <OrganizationSwitcher.OrganizationProfileLink
-      v-if="!dedicatedPage"
-      label="Homepage"
-      url="/"
-    >
+    <OrganizationSwitcher.OrganizationProfileLink label="Homepage" url="/">
       <template #labelIcon>
         <div>Icon</div>
       </template>
     </OrganizationSwitcher.OrganizationProfileLink>
   </OrganizationSwitcher>
-  <OrganizationProfile v-if="dedicatedPage">
-    <OrganizationProfile.Page
-      label="Terms"
-      url="terms"
-    >
+  <OrganizationProfile>
+    <OrganizationProfile.Page label="Terms" url="terms">
       <template #labelIcon>
         <div>Icon</div>
       </template>
@@ -47,10 +29,7 @@ const dedicatedPage = route.query.dedicatedPage === 'true';
         <p>This is the custom terms page</p>
       </div>
     </OrganizationProfile.Page>
-    <OrganizationProfile.Link
-      label="Homepage"
-      url="/"
-    >
+    <OrganizationProfile.Link label="Homepage" url="/">
       <template #labelIcon>
         <div>Icon</div>
       </template>
diff --git a/integration/tests/vue/components.test.ts b/integration/tests/vue/components.test.ts
index 6d43643efa5..603aba71c58 100644
--- a/integration/tests/vue/components.test.ts
+++ b/integration/tests/vue/components.test.ts
@@ -185,7 +185,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withCustomRoles] })('basic te
     await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
     await u.po.expect.toBeSignedIn();
 
-    await u.page.goToRelative('/custom-pages/organization-profile?dedicatedPage=true');
+    await u.page.goToRelative('/custom-pages/organization-profile');
     await u.po.organizationSwitcher.waitForMounted();
     await u.po.organizationSwitcher.waitForAnOrganizationToSelected();
 
@@ -216,7 +216,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withCustomRoles] })('basic te
     await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
     await u.po.expect.toBeSignedIn();
 
-    await u.page.goToRelative('/custom-pages/organization-profile?dedicatedPage=false');
+    await u.page.goToRelative('/custom-pages/organization-profile');
     await u.po.organizationSwitcher.waitForMounted();
     await u.po.organizationSwitcher.waitForAnOrganizationToSelected();
 

From e05e0ca97ea15f9ba68ebaabd4d4afaa45382781 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Wed, 12 Feb 2025 07:00:02 -0800
Subject: [PATCH 5/5] chore: run format

---
 .../custom-pages/OrganizationProfile.vue      | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/integration/templates/vue-vite/src/views/custom-pages/OrganizationProfile.vue b/integration/templates/vue-vite/src/views/custom-pages/OrganizationProfile.vue
index f1606fc71a3..907e6b56f64 100644
--- a/integration/templates/vue-vite/src/views/custom-pages/OrganizationProfile.vue
+++ b/integration/templates/vue-vite/src/views/custom-pages/OrganizationProfile.vue
@@ -4,7 +4,10 @@ import { OrganizationProfile, OrganizationSwitcher } from '@clerk/vue';
 
 <template>
   <OrganizationSwitcher>
-    <OrganizationSwitcher.OrganizationProfilePage label="Terms" url="terms">
+    <OrganizationSwitcher.OrganizationProfilePage
+      label="Terms"
+      url="terms"
+    >
       <template #labelIcon>
         <div>Icon</div>
       </template>
@@ -13,14 +16,20 @@ import { OrganizationProfile, OrganizationSwitcher } from '@clerk/vue';
         <p>This is the custom terms page</p>
       </div>
     </OrganizationSwitcher.OrganizationProfilePage>
-    <OrganizationSwitcher.OrganizationProfileLink label="Homepage" url="/">
+    <OrganizationSwitcher.OrganizationProfileLink
+      label="Homepage"
+      url="/"
+    >
       <template #labelIcon>
         <div>Icon</div>
       </template>
     </OrganizationSwitcher.OrganizationProfileLink>
   </OrganizationSwitcher>
   <OrganizationProfile>
-    <OrganizationProfile.Page label="Terms" url="terms">
+    <OrganizationProfile.Page
+      label="Terms"
+      url="terms"
+    >
       <template #labelIcon>
         <div>Icon</div>
       </template>
@@ -29,7 +38,10 @@ import { OrganizationProfile, OrganizationSwitcher } from '@clerk/vue';
         <p>This is the custom terms page</p>
       </div>
     </OrganizationProfile.Page>
-    <OrganizationProfile.Link label="Homepage" url="/">
+    <OrganizationProfile.Link
+      label="Homepage"
+      url="/"
+    >
       <template #labelIcon>
         <div>Icon</div>
       </template>