feat: clerk localization and no language routes

app/components/app/LanguageSwitcher.vue

@@ -6,23 +6,20 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '~/components/ui/select'
-import { Languages } from 'lucide-vue-next'
+} from "~/components/ui/select";
+import { Languages } from "lucide-vue-next";
 
-const { locale, locales, setLocale } = useI18n()
-const { t } = useI18n()
+const { locale, locales, setLocale } = useI18n();
+const { t } = useI18n();
 
-const switchLocalePath = useSwitchLocalePath()
-
-const availableLocales = computed(() => locales.value)
+const availableLocales = computed(() => locales.value);
 
 const currentLocale = computed({
   get: () => locale.value,
   set: (value) => {
-    const path = switchLocalePath(value)
-    navigateTo(path)
+    setLocale(value);
   },
-})
+});
 </script>
 
 <template>

app/layouts/default.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import SignInDialog from "~/components/app/SignInDialog.vue";
 import ThemeDropdown from "~/components/ui/ThemeDropdown.vue";
-import LanguageSwitcher from "~/components/LanguageSwitcher.vue";
+import LanguageSwitcher from "~/components/app/LanguageSwitcher.vue";
 import "vue-sonner/style.css";
 import { Toaster } from "@/components/ui/sonner";
 
@@ -12,32 +12,35 @@ const { t } = useI18n();
   <div>
     <header class="flex justify-between items-center p-4">
       <div class="flex items-center space-x-6">
-        <NuxtLink to="/" class="text-xl font-semibold hover:opacity-80 transition-opacity">
+        <NuxtLink
+          to="/"
+          class="text-xl font-semibold hover:opacity-80 transition-opacity"
+        >
           helium
         </NuxtLink>
         <nav class="flex space-x-4">
-          <NuxtLink 
-            to="/" 
+          <NuxtLink
+            to="/"
             class="text-sm font-medium hover:text-primary transition-colors"
             active-class="text-primary"
           >
-            {{ t('home') }}
+            {{ t("home") }}
           </NuxtLink>
-          <NuxtLink 
-            to="/stream" 
+          <NuxtLink
+            to="/stream"
             class="text-sm font-medium hover:text-primary transition-colors"
             active-class="text-primary"
           >
-            {{ t('stream') }}
+            {{ t("stream") }}
           </NuxtLink>
           <ClientOnly>
             <SignedIn>
-              <NuxtLink 
-                to="/presets" 
+              <NuxtLink
+                to="/presets"
                 class="text-sm font-medium hover:text-primary transition-colors"
                 active-class="text-primary"
               >
-                {{ t('presets') }}
+                {{ t("presets") }}
               </NuxtLink>
             </SignedIn>
           </ClientOnly>

app/plugins/clerk-locale.client.ts

@@ -0,0 +1,44 @@
+import { updateClerkOptions } from "#imports";
+import { esES } from "@clerk/localizations";
+import { shadcn } from "@clerk/themes";
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const i18n = nuxtApp.$i18n as any;
+
+  if (!i18n) return;
+
+  nuxtApp.hook("app:mounted", () => {
+    const checkClerk = () => {
+      try {
+        const testUpdate = () => {
+          updateClerkOptions({
+            localization: i18n.locale.value === "es" ? esES : undefined,
+            appearance: {
+              theme: shadcn,
+            },
+          });
+        };
+
+        testUpdate();
+
+        watch(
+          () => i18n.locale.value,
+          (newLocale) => {
+            const clerkLocale = newLocale === "es" ? esES : undefined;
+
+            updateClerkOptions({
+              localization: clerkLocale,
+              appearance: {
+                theme: shadcn,
+              },
+            });
+          },
+        );
+      } catch (e) {
+        setTimeout(checkClerk, 100);
+      }
+    };
+
+    checkClerk();
+  });
+});

nuxt.config.ts

@@ -1,5 +1,6 @@
 import tailwindcss from "@tailwindcss/vite";
 import { shadcn } from "@clerk/themes";
+import { esES } from "@clerk/localizations";
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   compatibilityDate: "2025-07-15",
@@ -34,7 +35,7 @@ export default defineNuxtConfig({
     ],
     defaultLocale: "en",
     langDir: "locales",
-    strategy: "prefix_except_default",
+    strategy: "no_prefix",
     detectBrowserLanguage: {
       useCookie: true,
       cookieKey: "i18n_locale",
@@ -60,9 +61,6 @@ export default defineNuxtConfig({
       websocket: true,
     },
   },
-  clerk: {
-    appearance: {
-      theme: shadcn,
-    },
-  },
+  // moved clerk config to clerk-locale.client.ts
+  clerk: {},
 });

package.json

@@ -12,6 +12,7 @@
     "db:migrate": "drizzle-kit generate && drizzle-kit migrate"
   },
   "dependencies": {
+    "@clerk/localizations": "^3.34.0",
     "@clerk/nuxt": "^1.13.10",
     "@clerk/themes": "^2.4.46",
     "@nuxtjs/i18n": "^10.2.1",

pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@clerk/localizations':
+        specifier: ^3.34.0
+        version: 3.34.0(react@19.2.3)
       '@clerk/nuxt':
         specifier: ^1.13.10
         version: 1.13.10(magicast@0.5.0)(react@19.2.3)(vue@3.5.26(typescript@5.9.3))
@@ -262,6 +265,10 @@ packages:
     resolution: {integrity: sha512-cw4CK6ZHgeFROirlIOawelqRBxZAyH6v3GPSYZEEzYAL0WWUHx7cMXzoQcTMruH7w6UM7s3Ox+uUcINESWkQPA==}
     engines: {node: '>=18.17.0'}
 
+  '@clerk/localizations@3.34.0':
+    resolution: {integrity: sha512-LGlxDuwFRfJnUttbHYTShqklGVqbXSp7B5zjir31pPQG1MrJS5LjVx8M0E9i0OZEHec8SU/4EoCOMX07Dk6Jfw==}
+    engines: {node: '>=18.17.0'}
+
   '@clerk/nuxt@1.13.10':
     resolution: {integrity: sha512-zaw1Coc3In8/y3O3zEcwaydcvAeVMZdmTt9D+wkpvZGiUGDHfKipQRwuFpw92HhSTUD4LjeJ2h/XbCScKZnepg==}
     engines: {node: '>=18.17.0'}
@@ -5226,6 +5233,13 @@ snapshots:
       - react
       - react-dom
 
+  '@clerk/localizations@3.34.0(react@19.2.3)':
+    dependencies:
+      '@clerk/types': 4.101.10(react@19.2.3)
+    transitivePeerDependencies:
+      - react
+      - react-dom
+
   '@clerk/nuxt@1.13.10(magicast@0.5.0)(react@19.2.3)(vue@3.5.26(typescript@5.9.3))':
     dependencies:
       '@clerk/backend': 2.29.0(react@19.2.3)