feat: add basic i18n support

components/header.vue

@@ -12,12 +12,7 @@
     </div>
     <div class="flex space-x-4">
       <ThemePicker class="my-auto" />
-      <NSelect
-        v-model="selectedLanguage"
-        :options="languages"
-        default-value="en"
-        class="w-16"
-      />
+      <LanguagePicker />
     </div>
   </div>
 </template>
@@ -33,16 +28,4 @@ function toggleMenu () {
   isOpen.value = !isOpen.value;
 }
 
-const selectedLanguage = ref('en');
-
-const languages = [
-  {
-    label: 'EN',
-    value: 'en',
-  },
-  {
-    label: 'DE',
-    value: 'de',
-  },
-];
 </script>

components/languagePicker.vue

@@ -0,0 +1,22 @@
+<template>
+  <NSelect
+    v-model="locale"
+    :options="languages"
+    default-value="en"
+    class="w-16"
+    @update:value="updateLocale"
+  />
+</template>
+
+<script setup lang="ts">
+const { locale, availableLocales } = useI18n();
+
+const languages = availableLocales.map(locale => ({
+  label: locale.toUpperCase(),
+  value: locale,
+}));
+
+function updateLocale (newLocale:string) {
+  locale.value = newLocale;
+}
+</script>

components/profile/project/item.vue

@@ -13,15 +13,15 @@
         :name="props.name"
         :image-path="props.project.image"
       />
-      <ProfileProjectFact :title="'Role'" :value="props.project.role" />
+      <ProfileProjectFact :title="t('project.role')" :value="props.project.role" />
       <ProfileProjectFact
         :title="'Description'"
         :value="props.project.description"
       />
       <!-- TODO move description to a dedicated space -->
       <ProfileProjectFact
         v-if="props.project.technologies"
-        :title="'Technologies'"
+        :title="t('project.technologies')"
         :value="props.project.technologies"
       />
       <!-- TODO embed link nicely -->
@@ -42,6 +42,8 @@
 <script setup lang="ts">
 import type { Project } from '~/server/profile.types';
 
+const { t } = useI18n();
+
 const props = defineProps<{ project: Project; name: string }>();
 
 function stringifyTimeframe (timeframe: Project['timeframe']) {

i18n.config.ts

@@ -0,0 +1,11 @@
+import { en } from './locales/en';
+import { de } from './locales/de';
+
+export default defineI18nConfig(() => ({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en,
+    de,
+  },
+}));

locales/de.ts

@@ -0,0 +1,6 @@
+export const de = {
+  project: {
+    role: 'Rolle',
+    technologies: 'Technologien',
+  },
+};

locales/en.ts

@@ -0,0 +1,6 @@
+export const en = {
+  project: {
+    role: 'Role',
+    technologies: 'Technologies',
+  },
+};

nuxt.config.ts

@@ -33,4 +33,6 @@ export default defineNuxtConfig({
   tailwindcss: {
     exposeConfig: true,
   },
+  i18n: {
+  },
 });