💄 Optimize experience of multilang

app/layouts/default.vue

@@ -4,9 +4,9 @@
       class="navbar bg-transparent shadow-lg fixed top-0 left-0 right-0 backdrop-blur-2xl z-1000 h-[64px]"
     >
       <div class="container mx-auto flex items-center justify-between px-5">
-        <nuxt-link to="/">
+        <nuxt-link-locale to="/">
           <nuxt-img src="/favicon.png" alt="Solsynth" class="w-8 h-8" />
-        </nuxt-link>
+        </nuxt-link-locale>
 
         <n-menu
           v-if="breakpoints.isGreaterOrEqual('md')"
@@ -64,15 +64,15 @@
         <a href="https://solian.app" target="_blank" class="link link-hover">{{
           t("layout.default.footer.solarNetwork")
         }}</a>
-        <nuxt-link to="/products" class="link link-hover">{{
+        <nuxt-link-locale to="/products" class="link link-hover">{{
           t("layout.default.footer.catalog")
-        }}</nuxt-link>
+        }}</nuxt-link-locale>
       </nav>
       <nav>
         <h6 class="footer-title">{{ t("layout.default.footer.company") }}</h6>
-        <nuxt-link to="/about" class="link link-hover">{{
+        <nuxt-link-locale to="/about" class="link link-hover">{{
           t("layout.default.footer.about")
-        }}</nuxt-link>
+        }}</nuxt-link-locale>
         <a
           href="https://github.com/Solsynth"
           target="_blank"
@@ -82,18 +82,18 @@
       </nav>
       <nav>
         <h6 class="footer-title">{{ t("layout.default.footer.legal") }}</h6>
-        <nuxt-link to="/terms/user-agreement" class="link link-hover">{{
+        <nuxt-link-locale to="/terms/user-agreement" class="link link-hover">{{
           t("layout.default.footer.tos")
-        }}</nuxt-link>
+        }}</nuxt-link-locale>
-        <nuxt-link to="/terms/privacy-policy" class="link link-hover">{{
+        <nuxt-link-locale to="/terms/privacy-policy" class="link link-hover">{{
           t("layout.default.footer.privacy")
-        }}</nuxt-link>
+        }}</nuxt-link-locale>
-        <nuxt-link to="/terms/refund-policy" class="link link-hover">{{
+        <nuxt-link-locale to="/terms/refund-policy" class="link link-hover">{{
           t("layout.default.footer.refund")
-        }}</nuxt-link>
+        }}</nuxt-link-locale>
-        <nuxt-link to="/terms" class="link link-hover">{{
+        <nuxt-link-locale to="/terms" class="link link-hover">{{
           t("layout.default.footer.allDocs")
-        }}</nuxt-link>
+        }}</nuxt-link-locale>
       </nav>
     </footer>
   </div>
@@ -124,7 +124,7 @@ const localeDropdownOptions = computed(() => {
 });
 
 const handleLocaleSelect = (key: string) => {
-  router.push(switchLocalePath(key));
+  router.push(switchLocalePath(key as any));
 };
 
 const route = useRoute();
@@ -146,7 +146,9 @@ function renderIcon(icon: any) {
 }
 
 function renderLabel(label: string, route: string) {
-  return () => h(RouterLink, { to: route }, { default: () => label });
+  const localePrefix = locale.value == "en" ? "" : `/${locale.value}`;
+  return () =>
+    h(RouterLink, { to: localePrefix + route }, { default: () => label });
 }
 
 function renderExternalLabel(label: string, url: string) {
@@ -159,7 +161,8 @@ const menuOptions = computed<MenuOption[]>(() => {
     recentProducts.value?.map((product: any) => {
       const id = product.stem.split("/").pop();
       const hasPage = product.hasPage;
-      const url = hasPage ? `/products/${id}` : product.url;
+      const localePrefix = locale.value == "en" ? "" : `/${locale.value}`;
+      const url = hasPage ? `${localePrefix}/products/${id}` : product.url;
 
       return {
         label: hasPage

app/pages/index.vue

@@ -11,10 +11,11 @@
 
       <nuxt-img src="/favicon.png" class="w-32 h-32 mb-8 animate-float" />
       <h1 class="text-6xl font-extrabold mb-6 tracking-tight">
-        {{ t('page.index.hero.we') }} <span ref="typedElement" class="text-primary" />
+        {{ t("page.index.hero.we") }}
+        <span ref="typedElement" class="text-primary" />
       </h1>
       <p class="text-2xl mb-10 opacity-80 max-w-2xl">
-        {{ t('page.index.hero.subtitle') }}
+        {{ t("page.index.hero.subtitle") }}
       </p>
       <n-space justify="center" size="large">
         <n-button
@@ -25,10 +26,10 @@
           href="#products"
           class="px-8 text-lg font-bold shadow-lg shadow-primary/30 hover:shadow-primary/50 transition-shadow"
         >
-          {{ t('page.index.hero.explore') }}
+          {{ t("page.index.hero.explore") }}
         </n-button>
         <n-button size="large" round tag="a" href="/about" class="px-8 text-lg">
-          {{ t('page.index.hero.about') }}
+          {{ t("page.index.hero.about") }}
         </n-button>
       </n-space>
 
@@ -44,9 +45,11 @@
     <!-- Products Section -->
     <div id="products" class="scroll-mt-24">
       <div class="text-center mb-16">
-        <h2 class="text-4xl font-bold mb-4">{{ t('page.index.creations.title') }}</h2>
+        <h2 class="text-4xl font-bold mb-4">
+          {{ t("page.index.creations.title") }}
+        </h2>
         <p class="text-xl opacity-70 max-w-2xl mx-auto">
-          {{ t('page.index.creations.subtitle') }}
+          {{ t("page.index.creations.subtitle") }}
         </p>
       </div>
 
@@ -91,14 +94,14 @@
               >
                 <n-icon :component="LaunchRound" color="black"></n-icon>
               </n-button>
-              <nuxt-link
+              <nuxt-link-locale
                 v-if="product.hasPage"
                 :to="`/products/${product.stem.split('/').pop()}`"
               >
                 <n-button circle color="white" size="small">
                   <n-icon :component="InfoRound" color="black"></n-icon>
                 </n-button>
-              </nuxt-link>
+              </nuxt-link-locale>
             </div>
 
             <div class="absolute bottom-0 left-0 right-0 p-6">
@@ -132,12 +135,14 @@
           class="flex flex-col md:flex-row items-center gap-12 relative z-10 p-8"
         >
           <div class="flex-1">
-            <h2 class="text-3xl font-bold mb-4">{{ t('page.index.about.title') }}</h2>
+            <h2 class="text-3xl font-bold mb-4">
+              {{ t("page.index.about.title") }}
+            </h2>
             <p class="text-lg opacity-80 mb-6 leading-relaxed">
-              {{ t('page.index.about.subtitle') }}
+              {{ t("page.index.about.subtitle") }}
             </p>
             <n-button type="primary" ghost size="large" tag="a" href="/about">
-              {{ t('page.index.about.readStory') }}
+              {{ t("page.index.about.readStory") }}
               <template #icon>
                 <n-icon :component="ChevronRightOutlined"></n-icon>
               </template>
@@ -185,7 +190,7 @@ const typedElement = ref(null);
 const typed = shallowRef(null);
 
 useHead({
-  title: t('page.index.title'),
+  title: t("page.index.title"),
   titleTemplate: "%s",
 });
 

app/pages/products/index.vue

@@ -2,7 +2,7 @@
   <div class="container max-w-xl mx-auto my-16 px-8">
     <h1 class="text-4xl font-bold mb-8">Our Products</h1>
 
-    <nuxt-link
+    <nuxt-link-locale
       v-for="product in products"
       :key="product.url"
       :to="
@@ -41,7 +41,7 @@
           </div>
         </template>
       </n-card>
-    </nuxt-link>
+    </nuxt-link-locale>
   </div>
 </template>
 
@@ -49,7 +49,7 @@
 import { NCard } from "naive-ui";
 
 const { data: products } = await useAsyncData("products", () =>
-  queryCollection("products").all()
+  queryCollection("products").all(),
 );
 
 useHead({