Translate all portfolio

app/pages/uses.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
-const description = 'Software I use, gadgets I love, and other things I recommend. Here’s a big list of all of my favorite stuff.'
-useSeoMeta({
-  title: 'Things I use',
-  description
+const { t } = useI18n({
+  useScope: 'local'
 })
 
-const { data: items } = await useAsyncData('uses', () =>
-  queryContent('/uses').find()
+useSeoMeta({
+  title: 'Things I use',
+  description: t('description')
+})
+
+const { data: items } = await useAsyncData('uses', () => queryContent('/uses').find()
 )
+
 const hardware = items.value!.filter(item => item.category === 'hardware')
 const software = items.value!.filter(item => item.category === 'software')
 const ide = items.value!.filter(item => item.category === 'ide')
@@ -17,18 +20,18 @@ const stack = items.value!.filter(item => item.category === 'stack')
 <template>
   <main>
     <AppTitle
-      :description="description"
-      title="Uses"
+      :description="t('description')"
+      :title="t('title')"
     />
     <div class="mt-12 space-y-24">
-      <UsesList title="Hardware">
+      <UsesList :title="t('hardware')">
         <UsesItem
           v-for="(item, id) in hardware"
           :key="id"
           :item="item"
         />
       </UsesList>
-      <UsesList title="Software">
+      <UsesList :title="t('software')">
         <UsesItem
           v-for="(item, id) in software"
           :key="id"
@@ -37,7 +40,7 @@ const stack = items.value!.filter(item => item.category === 'stack')
       </UsesList>
       <ul class="space-y-8">
         <UDivider
-          label="IDE & Font"
+          :label="t('ide')"
           size="xs"
         />
         <li class="relative">
@@ -47,7 +50,7 @@ const stack = items.value!.filter(item => item.category === 'stack')
             class="mx-auto md:w-4/5"
           />
           <p class="mt-2 text-sm italic flex gap-2 justify-center items-center">
-            My IntelliJ Idea Ultimate IDE
+            {{ t('intellij') }}
           </p>
         </li>
         <UsesItem
@@ -56,7 +59,7 @@ const stack = items.value!.filter(item => item.category === 'stack')
           :item="item"
         />
       </ul>
-      <UsesList title="Stack">
+      <UsesList :title="t('stack')">
         <UsesItem
           v-for="(item, id) in stack"
           :key="id"
@@ -66,3 +69,26 @@ const stack = items.value!.filter(item => item.category === 'stack')
     </div>
   </main>
 </template>
+
+<i18n lang="json">
+{
+  "en": {
+    "title": "Uses",
+    "description": "Software I use, gadgets I love, and other things I recommend. Here’s a big list of all of my favorite stuff.",
+    "hardware": "Hardware",
+    "software": "Software",
+    "ide": "IDE & Font",
+    "stack": "Stack",
+    "intellij": "My IntelliJ Idea Ultimate IDE"
+  },
+  "fr": {
+    "title": "Mes usages",
+    "description": "Logiciels que j'utilise, gadgets que j'adore et autres choses que je recommande. Voici une grande liste de toutes mes choses préférées.",
+    "hardware": "Matériel",
+    "software": "Logiciel",
+    "ide": "IDE & Police",
+    "stack": "Stack",
+    "intellij": "Mon IDE IntelliJ Idea Ultimate"
+  }
+}
+</i18n>