chore: add i18n

Author: blouflashdb

.vscode/settings.json

@@ -83,5 +83,9 @@
     "scss",
     "pcss",
     "postcss"
+  ],
+  "i18n-ally.localesPaths": [
+    "i18n",
+    "i18n/locales"
   ]
 }

app/pages/index.vue

@@ -2,6 +2,7 @@
 const runtimeConfig = useRuntimeConfig()
 const colors = ['#f87171', '#fb923c', '#fbbf24', '#facc15', '#a3e635', '#4ade80', '#34d399', '#2dd4bf', '#22d3ee', '#38bdf8', '#60a5fa', '#818cf8', '#a78bfa', '#c084fc', '#e879f9', '#f472b6', '#fb7185']
 const color = useState('color', () => colors[Math.floor(Math.random() * colors.length)])
+const { t } = useI18n()
 </script>
 
 <template>
@@ -10,7 +11,7 @@ const color = useState('color', () => colors[Math.floor(Math.random() * colors.l
       {{ runtimeConfig.public.helloText }}
     </h1>
     <NuxtLink to="/" external>
-      refresh
+      {{ t('Refresh') }}
     </NuxtLink>
   </div>
 </template>

i18n/locales/de.json

@@ -0,0 +1,3 @@
+{
+  "Refresh": "Aktualisieren"
+}

i18n/locales/en.json

@@ -0,0 +1,3 @@
+{
+  "Refresh": "Refresh"
+}

i18n/locales/es.json

@@ -0,0 +1,3 @@
+{
+  "Refresh": "Refrescar"
+}

nuxt.config.ts

@@ -5,6 +5,7 @@ export default defineNuxtConfig({
     '@nuxthub/core',
     '@nuxt/eslint',
     '@unocss/nuxt',
+    '@nuxtjs/i18n',
   ],
 
   // https://devtools.nuxt.com
@@ -30,4 +31,26 @@ export default defineNuxtConfig({
       standalone: false,
     },
   },
+
+  // https://i18n.nuxtjs.org
+  i18n: {
+    locales: [
+      {
+        code: 'en',
+        iso: 'en-US',
+        file: 'en.json',
+      },
+      {
+        code: 'de',
+        iso: 'de-DE',
+        file: 'de.json',
+      },
+      {
+        code: 'es',
+        iso: 'es-ES',
+        file: 'es.json',
+      },
+    ],
+    defaultLocale: 'en',
+  },
 })