apps/web/app/app.vue

@@ -1,7 +1,11 @@
 <script setup>
 const { t } = useI18n();
+const i18nHead = useLocaleHead();
 
 useHead({
+  htmlAttrs: {
+    lang: () => i18nHead.value.htmlAttrs.lang,
+  },
   meta: [{ name: "viewport", content: "width=device-width, initial-scale=1" }],
   link: [{ rel: "icon", href: "/favicon.ico" }],
 });

apps/web/app/components/AppHeader.vue

@@ -11,7 +11,7 @@ function handleLocaleChange(value: string) {
 <template>
   <UHeader>
     <template #left>
-      <NuxtLink to="/">
+      <NuxtLink to="/" :aria-label="t('nav.home')">
         <AppLogo class="w-auto h-6 shrink-0" />
       </NuxtLink>
 

apps/web/i18n/locales/en.json

@@ -4,6 +4,7 @@
     "description": "Project management made simple."
   },
   "nav": {
+    "home": "Home",
     "projects": "Projects"
   },
   "projects": {

apps/web/i18n/locales/fr.json

@@ -4,6 +4,7 @@
     "description": "La gestion de projets simplifiée."
   },
   "nav": {
+    "home": "Accueil",
     "projects": "Projets"
   },
   "projects": {

apps/web/nuxt.config.ts

@@ -1,9 +1,13 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  modules: ["@nuxt/eslint", "@nuxt/ui", "@nuxtjs/i18n"],
+  modules: ["@nuxt/eslint", "@nuxt/ui", "@nuxtjs/i18n", "@nuxt/a11y"],
 
   devtools: {
     enabled: true,
+
+    timeline: {
+      enabled: true,
+    },
   },
 
   css: ["~/assets/css/main.css"],
@@ -26,6 +30,7 @@ export default defineNuxtConfig({
   },
 
   i18n: {
+    baseUrl: process.env.NUXT_PUBLIC_SITE_URL ?? "http://localhost:3000",
     locales: [
       { code: "en", language: "en", name: "English", file: "en.json" },
       { code: "fr", language: "fr", name: "Français", file: "fr.json" },