From e1e0911c81c3882a95620aec38dc8a98abdbca10 Mon Sep 17 00:00:00 2001
From: BobbyLin7 <bobbylin23@163.com>
Date: Thu, 30 Jul 2026 10:19:55 +0800
Subject: [PATCH] fix(*): resolve appearance against the Ui appearance type
 instead of Ui

`Appearance<T>` is generic over the theme type, but `@clerk/vue` and
`@clerk/astro` passed the `Ui` type into it. That resolved to
`Ui & GlobalAppearanceOptions & { signIn?: Ui, ... }`, which has none of
`theme`, `variables`, `elements` or `options`, so every appearance object
was rejected. `@clerk/nuxt` inherits this via `PluginOptions`.

Use `ExtractAppearanceType<TUi, Appearance>`, as `@clerk/react` already does.

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
---
 .changeset/tame-donuts-shake.md              | 6 ++++++
 packages/astro/src/types.ts                  | 6 +++---
 packages/vue/src/plugin.ts                   | 4 ++--
 packages/vue/src/utils/updateClerkOptions.ts | 4 ++--
 4 files changed, 13 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/tame-donuts-shake.md

diff --git a/.changeset/tame-donuts-shake.md b/.changeset/tame-donuts-shake.md
new file mode 100644
index 00000000000..a10461d753e
--- /dev/null
+++ b/.changeset/tame-donuts-shake.md
@@ -0,0 +1,6 @@
+---
+'@clerk/astro': patch
+'@clerk/vue': patch
+---
+
+Fix the `appearance` option rejecting valid properties such as `theme`, `variables`, and `elements` with a "does not exist in type `Appearance<Ui>`" TypeScript error. This also affects `@clerk/nuxt`, which derives its module options from `@clerk/vue`.
diff --git a/packages/astro/src/types.ts b/packages/astro/src/types.ts
index 57e482c4010..c6c563a68da 100644
--- a/packages/astro/src/types.ts
+++ b/packages/astro/src/types.ts
@@ -9,10 +9,10 @@ import type {
   Without,
 } from '@clerk/shared/types';
 import type { ClerkUIConstructor } from '@clerk/shared/ui';
-import type { Appearance, Ui } from '@clerk/ui/internal';
+import type { Appearance, ExtractAppearanceType, Ui } from '@clerk/ui/internal';
 
 type AstroClerkUpdateOptions<TUi extends Ui = Ui> = Pick<ClerkOptions, 'localization'> & {
-  appearance?: Appearance<TUi>;
+  appearance?: ExtractAppearanceType<TUi, Appearance>;
 };
 
 type AstroClerkIntegrationParams<TUi extends Ui = Ui> = Without<
@@ -29,7 +29,7 @@ type AstroClerkIntegrationParams<TUi extends Ui = Ui> = Without<
   | 'appearance'
 > &
   MultiDomainAndOrProxyPrimitives & {
-    appearance?: Appearance<TUi>;
+    appearance?: ExtractAppearanceType<TUi, Appearance>;
     /**
      * Controls prefetching of the `@clerk/ui` script.
      * - `false` - Skip prefetching the UI (for custom UIs using Control Components)
diff --git a/packages/vue/src/plugin.ts b/packages/vue/src/plugin.ts
index 7c6ff11109e..698c6eef1d5 100644
--- a/packages/vue/src/plugin.ts
+++ b/packages/vue/src/plugin.ts
@@ -13,7 +13,7 @@ import type {
   Without,
 } from '@clerk/shared/types';
 import type { ClerkUIConstructor } from '@clerk/shared/ui';
-import type { Appearance, Ui } from '@clerk/ui/internal';
+import type { Appearance, ExtractAppearanceType, Ui } from '@clerk/ui/internal';
 import type { Plugin } from 'vue';
 import { computed, ref, shallowRef, triggerRef } from 'vue';
 
@@ -30,7 +30,7 @@ export type PluginOptions<TUi extends Ui = Ui> = Without<
 > &
   MultiDomainAndOrProxy & {
     initialState?: InitialState;
-    appearance?: Appearance<TUi>;
+    appearance?: ExtractAppearanceType<TUi, Appearance>;
     /**
      * An object to use the bundled Clerk UI instead of loading from CDN.
      * Import `ui` from `@clerk/ui` and pass it here to bundle the UI with your application.
diff --git a/packages/vue/src/utils/updateClerkOptions.ts b/packages/vue/src/utils/updateClerkOptions.ts
index 998f9e58bf0..22a629f4d06 100644
--- a/packages/vue/src/utils/updateClerkOptions.ts
+++ b/packages/vue/src/utils/updateClerkOptions.ts
@@ -1,8 +1,8 @@
 import type { ClerkOptions } from '@clerk/shared/types';
-import type { Appearance, Ui } from '@clerk/ui/internal';
+import type { Appearance, ExtractAppearanceType, Ui } from '@clerk/ui/internal';
 
 type ClerkUpdateOptions<TUi extends Ui = Ui> = Pick<ClerkOptions, 'localization'> & {
-  appearance?: Appearance<TUi>;
+  appearance?: ExtractAppearanceType<TUi, Appearance>;
 };
 
 /**