🌐 Localize more pages

pages/products/[...slug].vue

@@ -18,7 +18,7 @@
               size="small"
               class="mx-[-6px]"
             >
-              Archived
+              {{ t("productArchived") }}
             </v-chip>
           </v-col>
         </v-row>
@@ -41,10 +41,10 @@
         </template>
         <template #not-found>
           <v-empty-state
-              icon="mdi-flask-empty-remove-outline"
-              text="We haven't this product, yet."
-              title="Not Found"
-              class="no-content-placeholder"
+            icon="mdi-flask-empty-remove-outline"
+            text="We haven't this product, yet."
+            title="Not Found"
+            class="no-content-placeholder"
           >
             <template #actions>
               <v-btn prepend-icon="mdi-list-box" variant="plain" text="Back to index" to="/products" exact />
@@ -64,8 +64,10 @@
 </style>
 
 <script setup lang="ts">
-const route = useRoute();
-const { data: page } = await useAsyncData('page', queryContent(route.path).findOne)
+const route = useRoute()
+
+const { t } = useI18n()
+const { data: page } = await useAsyncData("page", queryContent(route.path).findOne)
 </script>
 
 <style scoped>

pages/products/index.vue

@@ -18,7 +18,7 @@
               size="small"
               class="mx-[-6px]"
             >
-              Archived
+              {{ t("productArchived") }}
             </v-chip>
           </v-col>
         </v-row>
@@ -29,9 +29,11 @@
 
 <script setup lang="ts">
 useHead({
-  title: 'Products',
+  title: "Products",
 })
 
+const { t } = useI18n()
+
 const { data: products } = await useAsyncData("products", () => queryContent("/products").find())
 </script>