fix(nuxt): support NUXT_PUBLIC_CLERK_JS_URL and NUXT_PUBLIC_CLERK_UI_URL env vars

Nuxt converts camelCase runtime config keys to env var names by inserting underscores before uppercase letters. The keys clerkJSUrl/clerkUiUrl were being converted to NUXT_PUBLIC_CLERK_CLERK_J_S_URL which is not what users expect. Renamed the runtime config keys to jsUrl/uiUrl so they correctly map to NUXT_PUBLIC_CLERK_JS_URL and NUXT_PUBLIC_CLERK_UI_URL, then map them back to clerkJSUrl/clerkUiUrl when passing to the Vue plugin. This allows users to set these values via environment variables using the expected naming convention.

Author: nikosdouvlis

packages/nuxt/src/global.d.ts

@@ -16,7 +16,18 @@ declare module 'nuxt/schema' {
  };
  }
  interface PublicRuntimeConfig {
- clerk: PluginOptions;
+ clerk: Omit<PluginOptions, 'clerkJSUrl' | 'clerkUiUrl'> & {
+ /**
+ * The URL that `@clerk/clerk-js` should be hot-loaded from.
+ * Supports NUXT_PUBLIC_CLERK_JS_URL env var.
+ */
+ jsUrl?: string;
+ /**
+ * The URL that `@clerk/ui` should be hot-loaded from.
+ * Supports NUXT_PUBLIC_CLERK_UI_URL env var.
+ */
+ uiUrl?: string;
+ };
  }
 }
 

packages/nuxt/src/module.ts

@@ -64,8 +64,10 @@ export default defineNuxtModule<ModuleOptions>({
  signUpForceRedirectUrl: options.signUpForceRedirectUrl,
  signUpUrl: options.signUpUrl,
  domain: options.domain,
- clerkJSUrl: options.clerkJSUrl,
- clerkUiUrl: options.clerkUiUrl,
+ // Using jsUrl/uiUrl instead of clerkJSUrl/clerkUiUrl to support
+ // NUXT_PUBLIC_CLERK_JS_URL and NUXT_PUBLIC_CLERK_UI_URL env vars.
+ jsUrl: options.clerkJSUrl,
+ uiUrl: options.clerkUiUrl,
  clerkJSVariant: options.clerkJSVariant,
  clerkJSVersion: options.clerkJSVersion,
  isSatellite: options.isSatellite,

packages/nuxt/src/runtime/plugin.ts

@@ -17,9 +17,13 @@ export default defineNuxtPlugin(nuxtApp => {
  }
 
  const runtimeConfig = useRuntimeConfig();
+ const clerkConfig = runtimeConfig.public.clerk ?? {};
 
  nuxtApp.vueApp.use(clerkPlugin as any, {
- ...(runtimeConfig.public.clerk ?? {}),
+ ...clerkConfig,
+ // Map jsUrl/uiUrl to clerkJSUrl/clerkUiUrl as expected by the Vue plugin
+ clerkJSUrl: clerkConfig.jsUrl,
+ clerkUiUrl: clerkConfig.uiUrl,
  sdkMetadata: {
  name: PACKAGE_NAME,
  version: PACKAGE_VERSION,