feat: Use Locale Prefix for Nuxt Studio (#110)

Author: HugoRCD

app/assets/style/animation.css

@@ -1,3 +1,19 @@
+.list-move,
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.5s ease;
+}
+
+.list-enter-from,
+.list-leave-to {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.list-leave-active {
+  position: absolute;
+}
+
 .fade-enter-active,
 .fade-leave-active {
   transition: opacity .2s;
@@ -47,4 +63,4 @@
 
 [data-animation-controller="false"] [data-animate] {
   animation: none;
-}
+}

app/components/Logo.vue

@@ -10,7 +10,7 @@ defineProps({
 </script>
 
 <template>
-  <NuxtLink
+  <NuxtLinkLocale
     to="/"
     class="flex shrink-0 items-center"
     aria-label="Go back to home page"
@@ -25,5 +25,5 @@ defineProps({
     >
       {{ appName }}
     </span>
-  </NuxtLink>
+  </NuxtLinkLocale>
 </template>

app/components/content/Writing.vue

@@ -100,7 +100,7 @@ const toggleTag = (tag: string) => {
         :key="article.path"
       >
         <ArticleCard
-          :title="article.title!"
+          :title="article.title"
           :date="article.date"
           :image="article.image"
           :path="article.path"
@@ -120,21 +120,3 @@ const toggleTag = (tag: string) => {
     </div>
   </section>
 </template>
-
-<style>
-.list-move,
-.list-enter-active,
-.list-leave-active {
-  transition: all 0.5s ease;
-}
-
-.list-enter-from,
-.list-leave-to {
-  opacity: 0;
-  transform: translateY(30px);
-}
-
-.list-leave-active {
-  position: absolute;
-}
-</style>

app/components/home/CTA.vue

@@ -10,7 +10,7 @@ const { t } = useI18n()
         :shortcuts="['⌘', 'O']"
       >
         <SpotlightButton>
-          <NuxtLink
+          <NuxtLinkLocale
             class="font-mona relative flex items-center justify-center gap-2 bg-gradient-to-b from-white/25 to-white bg-clip-text text-lg font-medium text-transparent transition-all duration-200"
             to="/contact"
           >
@@ -19,7 +19,7 @@ const { t } = useI18n()
               name="heroicons-envelope"
               class="size-5 text-white/80"
             />
-          </NuxtLink>
+          </NuxtLinkLocale>
         </SpotlightButton>
       </UTooltip>
       <MeetingButton />

app/components/home/Projects.vue

@@ -35,10 +35,10 @@ const { data: projects } = await useAsyncData('projects', async () => {
         </span>
       </NuxtLink>
     </div>
-    <div @click="useRouter().push('/works')">
+    <NuxtLinkLocale to="/works">
       <span class="font-newsreader italic text-white-shadow cursor-pointer">
         {{ $t("global.see_more") }}
       </span>
-    </div>
+    </NuxtLinkLocale>
   </div>
 </template>

app/components/layout/NavItem.vue

@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import type { Navigation } from '~/utils/useNavigation'
-
 defineProps({
   isText: {
     type: Boolean,
@@ -9,6 +7,9 @@ defineProps({
 })
 
 const navigation = getNavigation('home') as Record<string, Navigation>
+
+const route = useRoute()
+const localePath = useLocalePath()
 </script>
 
 <template>
@@ -27,11 +28,11 @@ const navigation = getNavigation('home') as Record<string, Navigation>
             :key="item.name"
             :aria-label="item.name + ' navigation link'"
             :class="[
-              item.to === $route.path
+              localePath(item.to) === route.path
                 ? 'border border-white/5 bg-zinc-900/10 text-white/75 shadow-2xl shadow-white/50 backdrop-blur-3xl text-shadow-sm'
                 : 'text-muted',
             ]"
-            :to="item.to"
+            :to="localePath(item.to)"
             class="flex items-center rounded-full border border-transparent px-4 py-1 transition-all duration-300 ease-in-out hover:border-white/5 hover:bg-zinc-900/50 hover:backdrop-blur-3xl sm:px-6"
           >
             <UIcon

app/components/layout/Navbar.vue

@@ -1,36 +1,33 @@
 <script setup lang="ts">
-const { locale: current, setLocaleCookie } = useI18n()
-
-const locales = [
-  { code: 'en', name: 'English' },
-  { code: 'fr', name: 'Français' },
-]
+const { locale: current, setLocaleCookie, locales } = useI18n()
 
 const currentLocale = computed(() => {
-  return locales.find(locale => locale.code === current.value)
+  return locales.value.find(locale => locale.code === current.value)
 })
 
 watch(current, (newLocale) => {
   setLocaleCookie(newLocale)
 })
+
+const switchLocalePath = useSwitchLocalePath()
 </script>
 
 <template>
   <div class="z-99 flex items-center gap-3 rounded-lg border border-white/10 bg-zinc-900/90 px-3 py-1 backdrop-blur-xl">
     <ClientOnly>
-      <div
+      <NuxtLink
         v-for="locale in locales"
-        :key="locale"
+        :key="locale.code"
         class="cursor-pointer select-none"
-        @click="$i18n.locale = locale.code"
+        :to="switchLocalePath(locale.code)"
       >
         <span
           class="font-semibold"
-          :class="locale.code === currentLocale.code ? 'text-white' : 'text-neutral-500'"
+          :class="locale.code === currentLocale?.code ? 'text-white' : 'text-neutral-500'"
         >
           {{ locale.code }}
         </span>
-      </div>
+      </NuxtLink>
       <template #fallback>
         <div class="h-2 w-5" />
       </template>

app/components/settings/LanguageToggle.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <SettingsLanguageToggle class="fixed bottom-20 right-3 z-50 sm:bottom-4" />
+    <SettingsLanguageToggle class="fixed right-1 z-50 top-1" />
     <LayoutNavbar class="fixed bottom-0 z-50 flex sm:bottom-auto sm:top-0" />
     <div class="sm:mt-[50px]">
       <slot />

app/layouts/default.vue

@@ -42,7 +42,7 @@ defineOgImage({
       :page
       :is-writing="route.path.includes('/articles/')"
     />
-    <NuxtLink
+    <NuxtLinkLocale
       to="/writing"
       class="mx-auto my-8 flex cursor-pointer items-center gap-2 px-4 text-muted hover:text-primary transition-colors duration-200 sm:max-w-2xl md:max-w-3xl lg:max-w-4xl"
     >
@@ -53,7 +53,7 @@ defineOgImage({
       <span class="text-sm font-extralight">
         {{ $t("navigation.writing") }}
       </span>
-    </NuxtLink>
+    </NuxtLinkLocale>
     <article class="writing mx-auto px-4 sm:max-w-2xl md:max-w-3xl lg:max-w-4xl">
       <h1>
         {{ page?.title }}