feat: add i18n support (en, es, de)

Author: onmax

app/pages/index.vue

@@ -36,6 +36,38 @@ function removeCategory(categoryId: string) {
       />
     </div>
 
+    <!-- Language Selector -->
+    <DevOnly>
+      <div fixed top-16 right-16 z-50>
+        <SelectRoot v-model="$i18n.locale.value">
+          <SelectTrigger
+            bg-white outline="~ 1.5 neutral-300" rounded-8 shadow-sm cursor-pointer
+            flex="~ items-center gap-8" f-px-md py-8 text-f-sm font-medium
+          >
+            <SelectValue placeholder="Language" />
+            <Icon name="i-tabler:chevron-down" />
+          </SelectTrigger>
+          <SelectContent
+            position="popper" bg-white outline="~ 1.5 neutral-200" rounded-8
+            shadow z-50 max-h-256 of-auto
+          >
+            <SelectViewport f-p-xs>
+              <SelectItem
+                v-for="locale in $i18n.locales.value"
+                :key="locale.code"
+                :value="locale.code"
+                flex="~ items-center gap-8" text="f-sm neutral-800 data-[highlighted]:neutral-900"
+                bg="data-[highlighted]:neutral-50" py-10 outline-none rounded-6 cursor-pointer
+                transition-colors f-px-md
+              >
+                {{ locale.name }}
+              </SelectItem>
+            </SelectViewport>
+          </SelectContent>
+        </SelectRoot>
+      </div>
+    </DevOnly>
+
     <div mx-auto max-w-640 relative z-1 f-px-md>
       <div f-mb-2xl>
         <h1 text="neutral-900 f-2xl" font-bold f-mb-xs>

i18n/locales/de.json

@@ -0,0 +1,3 @@
+{
+  "welcome": "Willkommen"
+}

i18n/locales/en.json

@@ -0,0 +1,3 @@
+{
+  "welcome": "Welcome"
+}

i18n/locales/es.json

@@ -0,0 +1,3 @@
+{
+  "welcome": "Bienvenido"
+}

nuxt.config.ts

@@ -14,6 +14,7 @@ export default defineNuxtConfig({
     '@nuxt/icon',
     'reka-ui/nuxt',
     '@nuxt/image',
+    '@nuxtjs/i18n',
   ],
   hub: {
     database: true,
@@ -50,5 +51,21 @@ export default defineNuxtConfig({
     collections: ['tabler'],
     customCollections: [nimiqIcons],
   },
+  i18n: {
+    locales: [
+      { code: 'en', language: 'en-US', name: 'English', file: 'en.json' },
+      { code: 'es', language: 'es-ES', name: 'Español', file: 'es.json' },
+      { code: 'de', language: 'de-DE', name: 'Deutsch', file: 'de.json' },
+    ],
+    defaultLocale: 'en',
+    lazy: true,
+    langDir: 'locales',
+    strategy: 'no_prefix',
+    detectBrowserLanguage: {
+      useCookie: true,
+      cookieKey: 'i18n_redirected',
+      redirectOn: 'root',
+    },
+  },
   compatibilityDate: '2025-10-01',
 })

package.json

@@ -23,6 +23,7 @@
     "@nuxt/icon": "catalog:",
     "@nuxt/image": "catalog:",
     "@nuxthub/core": "catalog:",
+    "@nuxtjs/i18n": "^10.1.0",
     "@vueuse/nuxt": "catalog:",
     "consola": "catalog:",
     "drizzle-orm": "catalog:",

plugins/i18n-locale.client.ts

@@ -0,0 +1,38 @@
+export default defineNuxtPlugin(() => {
+  const { locale, locales } = useI18n()
+  const route = useRoute()
+
+  // Get available locale codes
+  const availableLocales = (locales.value as { code: string }[]).map(l => l.code)
+
+  // Check for locale in query param
+  const queryLocale = route.query.locale as string | undefined
+
+  if (queryLocale && availableLocales.includes(queryLocale)) {
+    // If query param exists and is valid, save to localStorage and set locale
+    localStorage.setItem('user-locale', queryLocale)
+    locale.value = queryLocale
+  }
+  else {
+    // Check localStorage for saved locale
+    const savedLocale = localStorage.getItem('user-locale')
+    if (savedLocale && availableLocales.includes(savedLocale)) {
+      locale.value = savedLocale
+    }
+  }
+
+  // Watch for query param changes
+  watch(() => route.query.locale, (newLocale) => {
+    if (newLocale && typeof newLocale === 'string' && availableLocales.includes(newLocale)) {
+      localStorage.setItem('user-locale', newLocale)
+      locale.value = newLocale
+    }
+  })
+
+  // Watch for locale changes (including from selector) and save to localStorage
+  watch(locale, (newLocale) => {
+    if (newLocale && availableLocales.includes(newLocale)) {
+      localStorage.setItem('user-locale', newLocale)
+    }
+  })
+})