From 3e8576ec635633acb61d72c30b7efbbf637d0f37 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Tue, 25 Feb 2025 18:14:31 -0800
Subject: [PATCH 1/7] feat(vue,nuxt): Introduce utility function to dynamically
 update Clerk options

---
 packages/nuxt/src/module.ts                  | 14 ++++++---
 packages/nuxt/src/runtime/client/index.ts    |  1 +
 packages/vue/src/index.ts                    |  1 +
 packages/vue/src/utils/index.ts              |  1 +
 packages/vue/src/utils/updateClerkOptions.ts | 31 ++++++++++++++++++++
 5 files changed, 44 insertions(+), 4 deletions(-)
 create mode 100644 packages/vue/src/utils/updateClerkOptions.ts

diff --git a/packages/nuxt/src/module.ts b/packages/nuxt/src/module.ts
index a39fb8c8369..8ac87696075 100644
--- a/packages/nuxt/src/module.ts
+++ b/packages/nuxt/src/module.ts
@@ -99,10 +99,16 @@ export default defineNuxtModule<ModuleOptions>({
 
     // Add auto-imports for Clerk components, composables and client utils
     addImportsDir(resolver.resolve('./runtime/composables'));
-    addImports({
-      name: 'createRouteMatcher',
-      from: resolver.resolve('./runtime/client'),
-    });
+    addImports([
+      {
+        name: 'createRouteMatcher',
+        from: resolver.resolve('./runtime/client'),
+      },
+      {
+        name: 'updateClerkOptions',
+        from: resolver.resolve('./runtime/client'),
+      },
+    ]);
 
     // eslint-disable-next-line @typescript-eslint/consistent-type-imports
     const components: Array<keyof typeof import('@clerk/vue')> = [
diff --git a/packages/nuxt/src/runtime/client/index.ts b/packages/nuxt/src/runtime/client/index.ts
index 209ae9608dc..631ad5718bf 100644
--- a/packages/nuxt/src/runtime/client/index.ts
+++ b/packages/nuxt/src/runtime/client/index.ts
@@ -1 +1,2 @@
 export { createRouteMatcher } from './routeMatcher';
+export { updateClerkOptions } from '@clerk/vue';
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
index 3c836dbbe50..dc70787fab9 100644
--- a/packages/vue/src/index.ts
+++ b/packages/vue/src/index.ts
@@ -6,6 +6,7 @@ export * from './components';
 export * from './composables';
 
 export { clerkPlugin } from './plugin';
+export { updateClerkOptions } from './utils';
 
 setErrorThrowerOptions({ packageName: PACKAGE_NAME });
 setClerkJsLoadingErrorPackageName(PACKAGE_NAME);
diff --git a/packages/vue/src/utils/index.ts b/packages/vue/src/utils/index.ts
index 3b0a7909589..c4a11a1afd8 100644
--- a/packages/vue/src/utils/index.ts
+++ b/packages/vue/src/utils/index.ts
@@ -1,3 +1,4 @@
 export * from './childrenUtils';
 export * from './toComputedRefs';
 export * from './useClerkLoaded';
+export * from './updateClerkOptions';
diff --git a/packages/vue/src/utils/updateClerkOptions.ts b/packages/vue/src/utils/updateClerkOptions.ts
new file mode 100644
index 00000000000..e6e2c6c495f
--- /dev/null
+++ b/packages/vue/src/utils/updateClerkOptions.ts
@@ -0,0 +1,31 @@
+import type { ClerkOptions } from '@clerk/types';
+
+import { useClerk } from '../composables/useClerk';
+
+type ClerkUpdateOptions = Pick<ClerkOptions, 'appearance' | 'localization'>;
+
+/**
+ * Updates Clerk's appearance and localization options at runtime.
+ *
+ * @param options - The Clerk options to update
+ *
+ * @example
+ * import { frFR } from '@clerk/localizations';
+ * import { dark } from '@clerk/themes';
+ *
+ * updateClerkOptions({
+ *   appearance: { baseTheme: dark },
+ *   localization: frFR
+ * });
+ */
+export function updateClerkOptions(options: ClerkUpdateOptions) {
+  const clerk = useClerk();
+
+  // @ts-expect-error - `__unstable__updateProps` is not exposed as public API from `@clerk/types`
+  void clerk.value.__unstable__updateProps({
+    options: {
+      locatization: options.localization,
+    },
+    appearance: options.appearance,
+  });
+}

From 882314c0b28519438a0207206c251a8c85eb2ee7 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Tue, 25 Feb 2025 18:31:29 -0800
Subject: [PATCH 2/7] chore: Use Clerk from window object

---
 packages/vue/src/utils/updateClerkOptions.ts | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/vue/src/utils/updateClerkOptions.ts b/packages/vue/src/utils/updateClerkOptions.ts
index e6e2c6c495f..fe51902b5f9 100644
--- a/packages/vue/src/utils/updateClerkOptions.ts
+++ b/packages/vue/src/utils/updateClerkOptions.ts
@@ -1,7 +1,5 @@
 import type { ClerkOptions } from '@clerk/types';
 
-import { useClerk } from '../composables/useClerk';
-
 type ClerkUpdateOptions = Pick<ClerkOptions, 'appearance' | 'localization'>;
 
 /**
@@ -19,10 +17,8 @@ type ClerkUpdateOptions = Pick<ClerkOptions, 'appearance' | 'localization'>;
  * });
  */
 export function updateClerkOptions(options: ClerkUpdateOptions) {
-  const clerk = useClerk();
-
   // @ts-expect-error - `__unstable__updateProps` is not exposed as public API from `@clerk/types`
-  void clerk.value.__unstable__updateProps({
+  void window.Clerk.__unstable__updateProps({
     options: {
       locatization: options.localization,
     },

From c7f3d694056e00f1806f0c81cd38f3db000250dd Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Tue, 25 Feb 2025 18:36:09 -0800
Subject: [PATCH 3/7] chore: fix typo

---
 packages/vue/src/utils/updateClerkOptions.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vue/src/utils/updateClerkOptions.ts b/packages/vue/src/utils/updateClerkOptions.ts
index fe51902b5f9..ad62a5976e7 100644
--- a/packages/vue/src/utils/updateClerkOptions.ts
+++ b/packages/vue/src/utils/updateClerkOptions.ts
@@ -20,7 +20,7 @@ export function updateClerkOptions(options: ClerkUpdateOptions) {
   // @ts-expect-error - `__unstable__updateProps` is not exposed as public API from `@clerk/types`
   void window.Clerk.__unstable__updateProps({
     options: {
-      locatization: options.localization,
+      localization: options.localization,
     },
     appearance: options.appearance,
   });

From eaeadb0f59a840eea3ef965a540d798992cdfc42 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Wed, 26 Feb 2025 09:12:04 -0800
Subject: [PATCH 4/7] chore: add test

---
 integration/presets/vue.ts                    |  3 ++-
 integration/templates/vue-vite/src/App.vue    |  2 ++
 .../src/components/LanguagePicker.vue         | 25 +++++++++++++++++++
 integration/tests/vue/components.test.ts      | 19 ++++++++++++++
 packages/vue/src/utils/updateClerkOptions.ts  |  2 +-
 5 files changed, 49 insertions(+), 2 deletions(-)
 create mode 100644 integration/templates/vue-vite/src/components/LanguagePicker.vue

diff --git a/integration/presets/vue.ts b/integration/presets/vue.ts
index 1003af19f58..2d6c75a3911 100644
--- a/integration/presets/vue.ts
+++ b/integration/presets/vue.ts
@@ -10,7 +10,8 @@ const vite = applicationConfig()
   .addScript('dev', 'pnpm dev')
   .addScript('build', 'pnpm build')
   .addScript('serve', 'pnpm preview')
-  .addDependency('@clerk/vue', linkPackage('vue'));
+  .addDependency('@clerk/vue', linkPackage('vue'))
+  .addDependency('@clerk/localizations', linkPackage('localizations'));
 
 export const vue = {
   vite,
diff --git a/integration/templates/vue-vite/src/App.vue b/integration/templates/vue-vite/src/App.vue
index f913f45b9e4..6477a90213f 100644
--- a/integration/templates/vue-vite/src/App.vue
+++ b/integration/templates/vue-vite/src/App.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { SignedIn, SignedOut, ClerkLoaded, ClerkLoading } from '@clerk/vue';
 import CustomUserButton from './components/CustomUserButton.vue';
+import LanguagePicker from './components/LanguagePicker.vue';
 </script>
 
 <template>
@@ -9,6 +10,7 @@ import CustomUserButton from './components/CustomUserButton.vue';
       <div style="flex-grow: 1">
         <p class="title">Vue Clerk Integration test</p>
       </div>
+      <LanguagePicker />
       <SignedIn>
         <CustomUserButton />
       </SignedIn>
diff --git a/integration/templates/vue-vite/src/components/LanguagePicker.vue b/integration/templates/vue-vite/src/components/LanguagePicker.vue
new file mode 100644
index 00000000000..c1ba96a01fa
--- /dev/null
+++ b/integration/templates/vue-vite/src/components/LanguagePicker.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { updateClerkOptions } from '@clerk/vue';
+
+const onChange = async (event: Event) => {
+  const value = (event.target as HTMLSelectElement).value;
+  let localization: Record<string, any> | undefined;
+
+  if (value === 'fr') {
+    localization = (await import('@clerk/localizations/fr-FR')).frFR;
+  } else {
+    localization = undefined;
+  }
+
+  updateClerkOptions({
+    localization,
+  });
+};
+</script>
+
+<template>
+  <select @change="onChange">
+    <option value="en">English</option>
+    <option value="fr">French</option>
+  </select>
+</template>
diff --git a/integration/tests/vue/components.test.ts b/integration/tests/vue/components.test.ts
index 603aba71c58..23aa03344d4 100644
--- a/integration/tests/vue/components.test.ts
+++ b/integration/tests/vue/components.test.ts
@@ -297,4 +297,23 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withCustomRoles] })('basic te
 
     await fakeAdmin.deleteIfExists();
   });
+
+  test('Update Clerk options on the fly with updateClerkOptions()', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+
+    // Navigate and wait for sign-in component to load
+    await u.page.goToRelative('/sign-in');
+    await u.po.signIn.waitForMounted();
+
+    // Verify initial English state
+    await expect(u.page.getByText('Welcome back! Please sign in to continue')).toBeVisible();
+
+    // Change to French and verify
+    await u.page.locator('select').selectOption({ label: 'French' });
+    await expect(u.page.getByText('pour continuer vers')).toBeVisible();
+
+    // Revert to English and verify
+    await u.page.locator('select').selectOption({ label: 'English' });
+    await expect(u.page.getByText('Welcome back! Please sign in to continue')).toBeVisible();
+  });
 });
diff --git a/packages/vue/src/utils/updateClerkOptions.ts b/packages/vue/src/utils/updateClerkOptions.ts
index ad62a5976e7..6c99084f23f 100644
--- a/packages/vue/src/utils/updateClerkOptions.ts
+++ b/packages/vue/src/utils/updateClerkOptions.ts
@@ -3,7 +3,7 @@ import type { ClerkOptions } from '@clerk/types';
 type ClerkUpdateOptions = Pick<ClerkOptions, 'appearance' | 'localization'>;
 
 /**
- * Updates Clerk's appearance and localization options at runtime.
+ * Updates Clerk's options at runtime.
  *
  * @param options - The Clerk options to update
  *

From fdfe37926ff0784b7246b5c01e5665dcbf571e3b Mon Sep 17 00:00:00 2001
From: Robert Soriano <sorianorobertc@gmail.com>
Date: Wed, 26 Feb 2025 09:24:25 -0800
Subject: [PATCH 5/7] chore: add changeset

---
 .changeset/fast-bananas-visit.md | 37 ++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 .changeset/fast-bananas-visit.md

diff --git a/.changeset/fast-bananas-visit.md b/.changeset/fast-bananas-visit.md
new file mode 100644
index 00000000000..8c5867a57eb
--- /dev/null
+++ b/.changeset/fast-bananas-visit.md
@@ -0,0 +1,37 @@
+---
+"@clerk/nuxt": minor
+"@clerk/vue": minor
+---
+
+Introduce `updateClerkOptions()` utility function to update Clerk options on the fly.
+
+Usage:
+
+```vue
+<script setup>
+import { updateClerkOptions } from '@clerk/vue'
+import { dark } from '@clerk/themes'
+import { frFR } from '@clerk/localizations'
+
+function enableDarkTheme() {
+  updateClerkOptions({
+    appearance: {
+      baseTheme: dark
+    }
+  })
+}
+
+function changeToFrench() {
+  updateClerkOptions({
+    localization: frFR
+  })
+}
+</script>
+
+<template>
+  <div>
+    <button @click="enableDarkTheme">Enable Dark Theme</button>
+    <button @click="changeToFrench">Change to French</button>
+  </div>
+</template>
+```

From 16c536977884de028b0c193864c042cceb34bfa2 Mon Sep 17 00:00:00 2001
From: Robert Soriano <sorianorobertc@gmail.com>
Date: Wed, 26 Feb 2025 09:25:11 -0800
Subject: [PATCH 6/7] chore: update changeset

---
 .changeset/fast-bananas-visit.md | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/.changeset/fast-bananas-visit.md b/.changeset/fast-bananas-visit.md
index 8c5867a57eb..57d06b1a827 100644
--- a/.changeset/fast-bananas-visit.md
+++ b/.changeset/fast-bananas-visit.md
@@ -29,9 +29,7 @@ function changeToFrench() {
 </script>
 
 <template>
-  <div>
-    <button @click="enableDarkTheme">Enable Dark Theme</button>
-    <button @click="changeToFrench">Change to French</button>
-  </div>
+  <button @click="enableDarkTheme">Enable Dark Theme</button>
+  <button @click="changeToFrench">Change to French</button>
 </template>
 ```

From 4cc5cc1b15acb3b6a364cedda6cfe35333ee5272 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Wed, 26 Feb 2025 10:22:25 -0800
Subject: [PATCH 7/7] chore: make sure window.Clerk is available

---
 packages/vue/src/utils/updateClerkOptions.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/vue/src/utils/updateClerkOptions.ts b/packages/vue/src/utils/updateClerkOptions.ts
index 6c99084f23f..c146e2045b0 100644
--- a/packages/vue/src/utils/updateClerkOptions.ts
+++ b/packages/vue/src/utils/updateClerkOptions.ts
@@ -17,6 +17,10 @@ type ClerkUpdateOptions = Pick<ClerkOptions, 'appearance' | 'localization'>;
  * });
  */
 export function updateClerkOptions(options: ClerkUpdateOptions) {
+  if (!window.Clerk) {
+    throw new Error('Missing Clerk instance');
+  }
+
   // @ts-expect-error - `__unstable__updateProps` is not exposed as public API from `@clerk/types`
   void window.Clerk.__unstable__updateProps({
     options: {