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();
+  });
+});