Added base i18n support

app.vue

@@ -5,9 +5,6 @@ useHead({
   titleTemplate: (titleChunk) => {
     return titleChunk ? `${titleChunk} — TTTools` : "TTTools";
   },
-  htmlAttrs: {
-    lang: "fr"
-  },
   meta: [
     { name: "charset", content: "UTF-8" },
     { name: "viewport", content: "width=device-width, initial-scale=1.0" },

components/global/user/CTA.vue

@@ -11,6 +11,8 @@ const user = useSupabaseUser()
 const userMeta = computed(() => user.value?.user_metadata)
 const profileUrl: string = `${useRequestURL().origin}/my/`
 
+const { locale, setLocale } = useI18n()
+
 const menuOpened = ref<boolean>(false)
 
 function closeMenu() {
@@ -70,8 +72,8 @@ function pushRoute(to: AvailableRoutes) {
           <PhUserCircle size="18" />
         </UiButton>
       </UiDropdownMenuTrigger>
-      <UiDropdownMenuContent class="w-fit p-0" :align="'start'" :side="'top'" :side-offset="10" :align-offset="25" :collision-padding="40">
 
+      <UiDropdownMenuContent class="min-w-48 w-fit p-0" :align="'start'" :side="'top'" :side-offset="10" :align-offset="25" :collision-padding="40">
         <template v-if="user">
           <p class="p-2 text-xs opacity-75">Connecté en tant que {{ user?.email }}</p>
 
@@ -81,6 +83,7 @@ function pushRoute(to: AvailableRoutes) {
           </UiDropdownMenuItem>
 
           <UiDropdownMenuSeparator />
+        </template>
 
         <UiDropdownMenuSub>
           <UiDropdownMenuSubTrigger class="p-0 rounded-none">
@@ -132,10 +135,22 @@ function pushRoute(to: AvailableRoutes) {
           <UiDropdownMenuPortal>
             <UiDropdownMenuSubContent>
               <UiDropdownMenuSubContent>
-                  <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none">
+                <UiDropdownMenuItem
+                  class="flex gap-[.5ch] items-center rounded-none"
+                  :class="cn({ 'text-emerald-600': locale === 'fr' })"
+                  @select.prevent="setLocale('fr')"
+                >
+                  <PhCheckCircle v-if="locale === 'fr'" size="20" weight="fill" />
+                  <img v-else src="/images/flag-fr.png" width="20" alt="" loading="eager">
                   <span>Français</span>
                 </UiDropdownMenuItem>
-                  <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none">
+                <UiDropdownMenuItem
+                  class="flex gap-[.5ch] items-center rounded-none"
+                  :class="cn({ 'text-emerald-600': locale === 'en' })"
+                  @select.prevent="setLocale('en')"
+                >
+                  <PhCheckCircle v-if="locale === 'en'" size="20" weight="fill" />
+                  <img v-else src="/images/flag-uk.png" width="20" alt="" loading="eager">
                   <span>English</span>
                 </UiDropdownMenuItem>
               </UiDropdownMenuSubContent>
@@ -145,6 +160,7 @@ function pushRoute(to: AvailableRoutes) {
 
         <UiDropdownMenuSeparator />
 
+        <template v-if="user">
           <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="pushRoute('/my/settings')">
             <PhGear size="20" weight="fill" />
             <span>Compte</span>
@@ -155,12 +171,10 @@ function pushRoute(to: AvailableRoutes) {
           </UiDropdownMenuItem>
         </template>
 
-        <template v-else>
+        <UiDropdownMenuItem v-if="!user" class="flex gap-[.5ch] items-center rounded-none" @click="handleGoogleLogin">
-          <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="handleGoogleLogin">
           <PhGear size="20" weight="fill" />
           <span>Connexion</span>
         </UiDropdownMenuItem>
-        </template>
       </UiDropdownMenuContent>
     </UiDropdownMenu>
   </ClientOnly>

i18n.config.ts

@@ -0,0 +1,12 @@
+export default defineI18nConfig(() => ({
+  legacy: false,
+  locale: "fr",
+  messages: {
+    en: {
+      welcome: "Welcome"
+    },
+    fr: {
+      welcome: "Bienvenue"
+    }
+  }
+}))

nuxt.config.ts

@@ -9,10 +9,15 @@ export default defineNuxtConfig({
     "@nuxtjs/tailwindcss",
     "@nuxtjs/color-mode",
     "@nuxt/eslint",
-    "shadcn-nuxt"
+    "shadcn-nuxt",
+    "@nuxtjs/i18n"
   ],
   css: ["~/assets/main.css"],
 
+  i18n: {
+    vueI18n: "./i18n.config.ts"
+  },
+
   supabase: {
     redirectOptions: {
       login: "/",

package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@nuxt/eslint": "^0.3.12",
+    "@nuxtjs/i18n": "^8.5.1",
     "@phosphor-icons/vue": "^2.2.1",
     "@pinia/nuxt": "^0.5.1",
     "@vueuse/core": "^10.9.0",