From b9a20044d3df04370c62ab392b5144a62fbb57a9 Mon Sep 17 00:00:00 2001
From: Maciej D <7597086+mdanilowicz@users.noreply.github.com>
Date: Tue, 18 Jul 2023 15:33:04 +0200
Subject: [PATCH] feat: add new link builder (#322)

---
 .changeset/strong-toes-add.md                 |  5 ++++
 .changeset/wild-bees-laugh.md                 |  5 ++++
 apps/docs/src/getting-started/languages.md    |  5 ++--
 .../src/useInternationalization.ts            | 30 ++++++++++++++++++-
 templates/vue-demo-store/app.vue              |  2 +-
 .../components/account/AccountLoginForm.vue   |  3 +-
 .../components/account/AccountMenu.vue        |  4 +--
 .../components/checkout/CheckoutSideCart.vue  |  5 ++--
 .../components/errors/RoutingNotFound.vue     |  3 +-
 .../components/layout/LayoutBreadcrumbs.vue   |  5 ++--
 .../layout/LayoutCheckoutHeader.vue           |  3 +-
 .../components/layout/LayoutFooter.vue        |  5 ++--
 .../components/layout/LayoutHeader.vue        |  5 ++--
 .../components/layout/LayoutSideMenu.vue      |  5 ++--
 .../components/layout/LayoutStoreSearch.vue   |  5 ++--
 .../components/layout/LayoutTopNavigation.vue |  5 ++--
 .../components/product/ProductCard.vue        |  7 +++--
 templates/vue-demo-store/layouts/account.vue  | 11 +++----
 .../vue-demo-store/pages/account/index.vue    |  9 +++---
 .../vue-demo-store/pages/account/recover.vue  |  5 ++--
 .../vue-demo-store/pages/checkout/cart.vue    |  3 +-
 .../vue-demo-store/pages/checkout/index.vue   |  3 +-
 .../pages/checkout/success/[id]/unpaid.vue    |  3 +-
 templates/vue-demo-store/pages/error.vue      |  3 +-
 templates/vue-demo-store/pages/login.vue      |  5 ++--
 .../vue-demo-store/pages/reset-password.vue   |  3 +-
 templates/vue-demo-store/pages/wishlist.vue   |  3 +-
 27 files changed, 105 insertions(+), 45 deletions(-)
 create mode 100644 .changeset/strong-toes-add.md
 create mode 100644 .changeset/wild-bees-laugh.md

diff --git a/.changeset/strong-toes-add.md b/.changeset/strong-toes-add.md
new file mode 100644
index 000000000..2a5ba1aaa
--- /dev/null
+++ b/.changeset/strong-toes-add.md
@@ -0,0 +1,5 @@
+---
+"vue-demo-store": minor
+---
+
+Replace `localePath` with `formatLink`
diff --git a/.changeset/wild-bees-laugh.md b/.changeset/wild-bees-laugh.md
new file mode 100644
index 000000000..8eccd88c9
--- /dev/null
+++ b/.changeset/wild-bees-laugh.md
@@ -0,0 +1,5 @@
+---
+"@shopware-pwa/composables-next": minor
+---
+
+Add `formatLink` method to the `useInternationalization` composable
diff --git a/apps/docs/src/getting-started/languages.md b/apps/docs/src/getting-started/languages.md
index bb7092bb9..555adecf6 100644
--- a/apps/docs/src/getting-started/languages.md
+++ b/apps/docs/src/getting-started/languages.md
@@ -104,15 +104,16 @@ www.example2.com     // DE site
 
 ## Routing
 
-When you are using _prefix_ domain languages, you have to use `useLocalePath()` composable for building URLs.
+When you are using _prefix_ domain languages, you have to use `formatLink()` method from `useInternationalization` composable for building URLs.
 The main task of this composable is to add a prefix to URL if needed.
 
 ```vue
 <script setup lang="ts">
 const localePath = useLocalePath();
+const { formatLink } = useInternationalization(localePath);
 </script>
 <template>
-  <NuxtLink :to="localePath('/account')"> Account</NuxtLink>
+  <NuxtLink :to="formatLink('/account')"> Account</NuxtLink>
 </template>
 ```
 
diff --git a/packages/composables/src/useInternationalization.ts b/packages/composables/src/useInternationalization.ts
index e0693e026..02f906a97 100644
--- a/packages/composables/src/useInternationalization.ts
+++ b/packages/composables/src/useInternationalization.ts
@@ -61,6 +61,16 @@ export type UseInternationalizationReturn = {
    * Current prefix from the context
    */
   currentPrefix: Ref<string>;
+  /**
+   * Add prefix to the Url
+   * @param {string | RouteObject} link
+   */
+  formatLink(link: string | RouteObject): string | RouteObject;
+};
+
+export type RouteObject = {
+  path: string;
+  [key: string]: any;
 };
 
 /**
@@ -68,7 +78,9 @@ export type UseInternationalizationReturn = {
  * @public
  * @category Context & Language
  */
-export function useInternationalization(): UseInternationalizationReturn {
+export function useInternationalization(
+  pathResolver?: Function,
+): UseInternationalizationReturn {
   const { devStorefrontUrl } = useShopwareContext();
   const { apiInstance } = useShopwareContext();
 
@@ -114,6 +126,21 @@ export function useInternationalization(): UseInternationalizationReturn {
       : url;
   }
 
+  function formatLink(link: string | RouteObject) {
+    if (!pathResolver) return link;
+
+    if (typeof link === "string") {
+      return pathResolver(link);
+    }
+
+    if (link.path) {
+      link.path = pathResolver(link.path);
+      return link;
+    }
+
+    return link;
+  }
+
   return {
     getAvailableLanguages,
     getStorefrontUrl,
@@ -121,6 +148,7 @@ export function useInternationalization(): UseInternationalizationReturn {
     getLanguageCodeFromId,
     getLanguageIdFromCode,
     replaceToDevStorefront,
+    formatLink,
     languages: _storeLanguages,
     currentLanguage: _storeCurrentLanguage,
     currentPrefix: _storeCurrentPrefix,
diff --git a/templates/vue-demo-store/app.vue b/templates/vue-demo-store/app.vue
index 7116a2174..d74bc3203 100644
--- a/templates/vue-demo-store/app.vue
+++ b/templates/vue-demo-store/app.vue
@@ -80,7 +80,7 @@ if (languages.value?.elements.length && router.currentRoute.value.name) {
   const sessionLanguage = getLanguageCodeFromId(languageIdChain.value);
 
   // If languages are not the same, set one from prefix
-  if (sessionLanguage !== prefix && sessionLanguage !== getDefaultLocale()) {
+  if (sessionLanguage !== prefix) {
     await changeLanguage(
       getLanguageIdFromCode(prefix ? prefix : getDefaultLocale()),
     );
diff --git a/templates/vue-demo-store/components/account/AccountLoginForm.vue b/templates/vue-demo-store/components/account/AccountLoginForm.vue
index 7aa1d257a..73e8fc0a8 100644
--- a/templates/vue-demo-store/components/account/AccountLoginForm.vue
+++ b/templates/vue-demo-store/components/account/AccountLoginForm.vue
@@ -12,6 +12,7 @@ const { refreshSessionContext } = useSessionContext();
 const { mergeWishlistProducts } = useWishlist();
 const { pushSuccess } = useNotifications();
 const localePath = useLocalePath();
+const { formatLink } = useInternationalization(localePath);
 const loginErrors = ref<string[]>([]);
 
 const formData = ref({
@@ -22,7 +23,7 @@ const formData = ref({
 
 const goToRegister = () => {
   emits("close");
-  router.push(localePath("/register"));
+  router.push(formatLink("/register"));
 };
 
 const invokeLogin = async (): Promise<void> => {
diff --git a/templates/vue-demo-store/components/account/AccountMenu.vue b/templates/vue-demo-store/components/account/AccountMenu.vue
index ddd188197..49aeab2b9 100644
--- a/templates/vue-demo-store/components/account/AccountMenu.vue
+++ b/templates/vue-demo-store/components/account/AccountMenu.vue
@@ -3,7 +3,7 @@ const { isLoggedIn, logout, user } = useUser();
 
 const loginModalController = useModal();
 const localePath = useLocalePath();
-
+const { formatLink } = useInternationalization(localePath);
 const isAccountMenuOpen = ref(false);
 
 async function invokeLogout() {
@@ -79,7 +79,7 @@ async function invokeLogout() {
                 >
                   <NuxtLink
                     id="user-menu-item-1"
-                    :to="localePath('/account')"
+                    :to="formatLink('/account')"
                     data-testid="header-my-account-link"
                     class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left"
                     tabindex="-1"
diff --git a/templates/vue-demo-store/components/checkout/CheckoutSideCart.vue b/templates/vue-demo-store/components/checkout/CheckoutSideCart.vue
index 84dd5e063..aebc3b76b 100644
--- a/templates/vue-demo-store/components/checkout/CheckoutSideCart.vue
+++ b/templates/vue-demo-store/components/checkout/CheckoutSideCart.vue
@@ -5,6 +5,7 @@ const props = defineProps<{
 
 const { cartItems, totalPrice, isEmpty } = useCart();
 const localePath = useLocalePath();
+const { formatLink } = useInternationalization(localePath);
 </script>
 
 <template>
@@ -67,7 +68,7 @@ const localePath = useLocalePath();
             'bg-gray': isEmpty,
             'hover:bg-gray': isEmpty,
           }"
-          :to="localePath(isEmpty ? '' : '/checkout')"
+          :to="formatLink(isEmpty ? '' : '/checkout')"
           data-testid="cart-checkout-link"
         >
           Checkout
@@ -75,7 +76,7 @@ const localePath = useLocalePath();
 
         <NuxtLink
           class="flex items-center justify-center py-3 text-sm font-medium text-brand-dark"
-          :to="localePath(`/checkout/cart`)"
+          :to="formatLink(`/checkout/cart`)"
           data-testid="cart-checkout-shopping-cart"
           @click="props.controller.close"
         >
diff --git a/templates/vue-demo-store/components/errors/RoutingNotFound.vue b/templates/vue-demo-store/components/errors/RoutingNotFound.vue
index 46bb3cd90..d739e6932 100644
--- a/templates/vue-demo-store/components/errors/RoutingNotFound.vue
+++ b/templates/vue-demo-store/components/errors/RoutingNotFound.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 const localePath = useLocalePath();
+const { formatLink } = useInternationalization(localePath);
 </script>
 
 <template>
@@ -10,7 +11,7 @@ const localePath = useLocalePath();
     </p>
     <NuxtLink
       class="inline-flex justify-center items-center py-2 px-4 text-base font-medium text-center text-white bg-brand-primary rounded-lg hover:bg-gray-400"
-      :to="localePath(`/`)"
+      :to="formatLink(`/`)"
     >
       {{ $t("backToHomepage") }}
     </NuxtLink>
diff --git a/templates/vue-demo-store/components/layout/LayoutBreadcrumbs.vue b/templates/vue-demo-store/components/layout/LayoutBreadcrumbs.vue
index 8432f24c1..d2d507f31 100644
--- a/templates/vue-demo-store/components/layout/LayoutBreadcrumbs.vue
+++ b/templates/vue-demo-store/components/layout/LayoutBreadcrumbs.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 const { breadcrumbs } = useBreadcrumbs();
 const localePath = useLocalePath();
+const { formatLink } = useInternationalization(localePath);
 </script>
 <template>
   <nav
@@ -10,7 +11,7 @@ const localePath = useLocalePath();
     <ol class="inline-flex items-center space-x-1 md:space-x-3">
       <li class="inline-flex items-center">
         <NuxtLink
-          :to="localePath(`/`)"
+          :to="formatLink(`/`)"
           class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
         >
           <div class="w-5 h-5 i-carbon-home mr-2" />
@@ -25,7 +26,7 @@ const localePath = useLocalePath();
       >
         <NuxtLink
           v-if="breadcrumb.path"
-          :to="localePath(breadcrumb.path)"
+          :to="formatLink(breadcrumb.path)"
           class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
         >
           {{ breadcrumb.name }}
diff --git a/templates/vue-demo-store/components/layout/LayoutCheckoutHeader.vue b/templates/vue-demo-store/components/layout/LayoutCheckoutHeader.vue
index 2d72e909d..37471b3c6 100644
--- a/templates/vue-demo-store/components/layout/LayoutCheckoutHeader.vue
+++ b/templates/vue-demo-store/components/layout/LayoutCheckoutHeader.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 const localePath = useLocalePath();
+const { formatLink } = useInternationalization(localePath);
 </script>
 
 <template>
@@ -9,7 +10,7 @@ const localePath = useLocalePath();
         class="flex justify-between items-center border-b-2 border-gray-100 py-6 md:justify-start md:space-x-10"
       >
         <div class="flex justify-start lg:w-0 lg:flex-1 space-x-4 md:space-x-0">
-          <NuxtLink :to="localePath(`/`)">
+          <NuxtLink :to="formatLink(`/`)">
             <span class="sr-only">Shopware</span>
             <img
               class="h-8 w-auto sm:h-10"
diff --git a/templates/vue-demo-store/components/layout/LayoutFooter.vue b/templates/vue-demo-store/components/layout/LayoutFooter.vue
index 2f0270550..06e36e2be 100644
--- a/templates/vue-demo-store/components/layout/LayoutFooter.vue
+++ b/templates/vue-demo-store/components/layout/LayoutFooter.vue
@@ -6,6 +6,7 @@ import {
 
 const { navigationElements } = useNavigation({ type: "footer-navigation" });
 const localePath = useLocalePath();
+const { formatLink } = useInternationalization(localePath);
 
 const gridColumns = computed<number>(() =>
   navigationElements.value
@@ -22,7 +23,7 @@ const gridColumns = computed<number>(() =>
         :class="`grid grid-cols-2 md:grid-cols-${gridColumns}`"
       >
         <div class="hidden md:block">
-          <NuxtLink :to="localePath(`/`)">
+          <NuxtLink :to="formatLink(`/`)">
             <span class="sr-only">Shopware</span>
             <img class="h-15 w-auto sm:h-15" src="/logo.svg" alt="Logo" />
           </NuxtLink>
@@ -47,7 +48,7 @@ const gridColumns = computed<number>(() =>
                       ? '_blank'
                       : ''
                   "
-                  :to="localePath(getCategoryRoute(navigationChild))"
+                  :to="formatLink(getCategoryRoute(navigationChild))"
                   class="text-base font-normal text-gray-500 hover:text-gray-900"
                 >
                   {{ getTranslatedProperty(navigationChild, "name") }}
diff --git a/templates/vue-demo-store/components/layout/LayoutHeader.vue b/templates/vue-demo-store/components/layout/LayoutHeader.vue
index 5336f7fee..956a0e643 100644
--- a/templates/vue-demo-store/components/layout/LayoutHeader.vue
+++ b/templates/vue-demo-store/components/layout/LayoutHeader.vue
@@ -2,6 +2,7 @@
 const { count } = useCart();
 const { count: wishlistCount } = useWishlist();
 const localePath = useLocalePath();
+const { formatLink } = useInternationalization(localePath);
 
 const sidebarController = useModal();
 </script>
@@ -12,7 +13,7 @@ const sidebarController = useModal();
       <div class="flex items-center border-b-2 border-gray-100 py-6 space-x-4">
         <div class="flex justify-start items-center min-w-10 lg:min-w-12">
           <div class="order-2 lg:order-1 ml-4 lg:ml-0">
-            <NuxtLink :to="localePath(`/`)">
+            <NuxtLink :to="formatLink(`/`)">
               <span class="sr-only">Shopware</span>
               <img
                 class="h-10 w-10 lg:h-12 lg:w-12"
@@ -42,7 +43,7 @@ const sidebarController = useModal();
               class="group -m-2 p-2 flex items-center relative text-center"
               aria-label="wishlist"
               data-testid="wishlist-button"
-              :to="localePath(`/wishlist`)"
+              :to="formatLink(`/wishlist`)"
             >
               <div
                 class="w-7 h-7 i-carbon-favorite text-gray-600 hover:text-brand-primary hover:animate-count-infinite hover:animate-heart-beat"
diff --git a/templates/vue-demo-store/components/layout/LayoutSideMenu.vue b/templates/vue-demo-store/components/layout/LayoutSideMenu.vue
index 6b06550b3..188f6b7a2 100644
--- a/templates/vue-demo-store/components/layout/LayoutSideMenu.vue
+++ b/templates/vue-demo-store/components/layout/LayoutSideMenu.vue
@@ -9,6 +9,7 @@ const { navigationElements } = useNavigation();
 
 const sideMenuController = useSideMenuModal();
 const localePath = useLocalePath();
+const { formatLink } = useInternationalization(localePath);
 const expandedIds = ref<Array<string>>([]);
 
 function isCollapsed(navigationelement: Category): boolean {
@@ -54,7 +55,7 @@ const toggleCollapse = (navigationElement: Category) => {
               class="flex flex-col flex-1 w-full"
             >
               <NuxtLink
-                :to="localePath(getCategoryRoute(navigationElement))"
+                :to="formatLink(getCategoryRoute(navigationElement))"
                 class="flex items-center px-5 py-3 text-base font-normal text-gray-900 break-all hover:bg-gray-100"
                 @click="sideMenuController.close"
               >
@@ -104,7 +105,7 @@ const toggleCollapse = (navigationElement: Category) => {
                   :key="childElement.id"
                 >
                   <NuxtLink
-                    :to="localePath(getCategoryRoute(childElement))"
+                    :to="formatLink(getCategoryRoute(childElement))"
                     class="flex items-center p-3 text-base font-normal text-gray-500 break-all hover:bg-gray-100 pl-11"
                     @click="sideMenuController.close"
                   >
diff --git a/templates/vue-demo-store/components/layout/LayoutStoreSearch.vue b/templates/vue-demo-store/components/layout/LayoutStoreSearch.vue
index 11aa6bc3c..53e3369e4 100644
--- a/templates/vue-demo-store/components/layout/LayoutStoreSearch.vue
+++ b/templates/vue-demo-store/components/layout/LayoutStoreSearch.vue
@@ -24,6 +24,7 @@ const active = ref(false);
 const searchContainer = ref(null);
 const searchInput = ref();
 const localePath = useLocalePath();
+const { formatLink } = useInternationalization(localePath);
 
 watch(active, (value) => {
   const { focused } = useFocus(searchInput);
@@ -101,7 +102,7 @@ watch(enter, (value) => {
       <NuxtLink
         v-for="product in getProducts.slice(0, displayTotal)"
         :key="product.id"
-        :to="localePath(getProductRoute(product))"
+        :to="formatLink(getProductRoute(product))"
         data-testid="layout-search-suggest-link"
         @click="[(active = false), $emit('link-clicked')]"
       >
@@ -121,7 +122,7 @@ watch(enter, (value) => {
           <NuxtLink
             v-if="getTotal > 0"
             data-testid="layout-search-result-box-more-link"
-            :to="localePath({ path: `/search`, query: { query: typingQuery } })"
+            :to="formatLink({ path: `/search`, query: { query: typingQuery } })"
             @click="[(active = false), $emit('link-clicked')]"
           >
             {{ $t("search.see") }}
diff --git a/templates/vue-demo-store/components/layout/LayoutTopNavigation.vue b/templates/vue-demo-store/components/layout/LayoutTopNavigation.vue
index 8e8e0b2f4..ea1fd5ed2 100644
--- a/templates/vue-demo-store/components/layout/LayoutTopNavigation.vue
+++ b/templates/vue-demo-store/components/layout/LayoutTopNavigation.vue
@@ -9,6 +9,7 @@ const currentMenuPosition = ref<string | null>(null);
 
 const menuHtmlElement = ref(null);
 const localePath = useLocalePath();
+const { formatLink } = useInternationalization(localePath);
 
 onClickOutside(menuHtmlElement, () => (currentMenuPosition.value = null));
 </script>
@@ -33,7 +34,7 @@ onClickOutside(menuHtmlElement, () => (currentMenuPosition.value = null));
             ? '_blank'
             : ''
         "
-        :to="localePath(getCategoryRoute(navigationElement))"
+        :to="formatLink(getCategoryRoute(navigationElement))"
         class="text-base font-medium text-gray-500 hover:text-gray-900 p-2 inline-block"
       >
         {{ getTranslatedProperty(navigationElement, "name") }}
@@ -72,7 +73,7 @@ onClickOutside(menuHtmlElement, () => (currentMenuPosition.value = null));
                 class="relative grid gap-6 bg-white px-3 py-2 sm:gap-6 sm:p-3"
               >
                 <NuxtLink
-                  :to="localePath(getCategoryRoute(childElement))"
+                  :to="formatLink(getCategoryRoute(childElement))"
                   :target="
                     childElement.externalLink || childElement.linkNewTab
                       ? '_blank'
diff --git a/templates/vue-demo-store/components/product/ProductCard.vue b/templates/vue-demo-store/components/product/ProductCard.vue
index cdc6fe951..c86b67387 100644
--- a/templates/vue-demo-store/components/product/ProductCard.vue
+++ b/templates/vue-demo-store/components/product/ProductCard.vue
@@ -16,6 +16,7 @@ const { pushSuccess, pushError } = useNotifications();
 const { t } = useI18n();
 const { codeErrorsNotification } = useCartNotification();
 const localePath = useLocalePath();
+const { formatLink } = useInternationalization(localePath);
 
 const props = withDefaults(
   defineProps<{
@@ -96,7 +97,7 @@ const srcPath = computed(() => {
       ]"
     >
       <RouterLink
-        :to="localePath(getProductRoute(product))"
+        :to="formatLink(getProductRoute(product))"
         class="overflow-hidden"
       >
         <img
@@ -154,7 +155,7 @@ const srcPath = computed(() => {
     <div class="px-4 pb-4">
       <RouterLink
         class="line-clamp-2"
-        :to="localePath(getProductRoute(product))"
+        :to="formatLink(getProductRoute(product))"
         data-testid="product-box-product-name-link"
       >
         <h5
@@ -191,7 +192,7 @@ const srcPath = computed(() => {
         </button>
         <RouterLink
           v-else
-          :to="localePath(getProductRoute(product))"
+          :to="formatLink(getProductRoute(product))"
           class="justify-center py-2 px-3 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-black hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transform transition duration-400 hover:scale-120"
         >
           <span data-testid="product-box-product-show-details"> Details </span>
diff --git a/templates/vue-demo-store/layouts/account.vue b/templates/vue-demo-store/layouts/account.vue
index 762a0d149..892d8e579 100644
--- a/templates/vue-demo-store/layouts/account.vue
+++ b/templates/vue-demo-store/layouts/account.vue
@@ -16,6 +16,7 @@ const { loadNavigationElements } = useNavigation();
 const { logout } = useUser();
 const router = useRouter();
 const localePath = useLocalePath();
+const { formatLink } = useInternationalization(localePath);
 
 const { data } = await useAsyncData("mainNavigation", () => {
   return loadNavigationElements({ depth: 2 });
@@ -58,7 +59,7 @@ provide("swNavigation-footer-navigation", footerData);
                 <ul class="space-y-2 list-none pl-0">
                   <li>
                     <NuxtLink
-                      :to="localePath(`/account`)"
+                      :to="formatLink(`/account`)"
                       class="flex items-center px-0 md:px-2 py-2 rounded-lg hover:text-brand-primary hover:bg-gray-100 is-active"
                     >
                       <div i-carbon-dashboard text-xl inline-block />
@@ -67,7 +68,7 @@ provide("swNavigation-footer-navigation", footerData);
                   </li>
                   <li>
                     <NuxtLink
-                      :to="localePath(`/account/profile`)"
+                      :to="formatLink(`/account/profile`)"
                       class="flex items-center px-0 md:px-2 py-2 rounded-lg hover:text-brand-primary hover:bg-gray-100 is-active"
                     >
                       <div i-carbon-user text-xl inline-block />
@@ -76,7 +77,7 @@ provide("swNavigation-footer-navigation", footerData);
                   </li>
                   <li>
                     <NuxtLink
-                      :to="localePath(`/account/address`)"
+                      :to="formatLink(`/account/address`)"
                       class="flex items-center px-0 md:px-2 py-2 rounded-lg hover:text-brand-primary hover:bg-gray-100"
                     >
                       <div i-carbon-home text-xl inline-block />
@@ -85,7 +86,7 @@ provide("swNavigation-footer-navigation", footerData);
                   </li>
                   <li>
                     <NuxtLink
-                      :to="localePath(`/account/payment`)"
+                      :to="formatLink(`/account/payment`)"
                       class="flex items-center px-0 md:px-2 py-2 rounded-lg hover:text-brand-primary hover:bg-gray-100"
                     >
                       <div i-carbon-wallet text-xl inline-block />
@@ -98,7 +99,7 @@ provide("swNavigation-footer-navigation", footerData);
                 >
                   <li>
                     <NuxtLink
-                      :to="localePath(`/account/order`)"
+                      :to="formatLink(`/account/order`)"
                       class="flex items-center px-0 md:px-2 py-2 rounded-lg hover:text-brand-primary hover:bg-gray-100"
                     >
                       <div i-carbon-order-details text-xl inline-block />
diff --git a/templates/vue-demo-store/pages/account/index.vue b/templates/vue-demo-store/pages/account/index.vue
index 2eab6e803..5f2a90520 100644
--- a/templates/vue-demo-store/pages/account/index.vue
+++ b/templates/vue-demo-store/pages/account/index.vue
@@ -29,6 +29,7 @@ const {
 const { pushSuccess, pushError } = useNotifications();
 const { t } = useI18n();
 const localePath = useLocalePath();
+const { formatLink } = useInternationalization(localePath);
 
 useBreadcrumbs([
   {
@@ -88,7 +89,7 @@ onBeforeMount(async () => {
           <NuxtLink
             class="justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-brand-primary hover:bg-brand-dark focus:outline-none focus:ring-2 focus:ring-brand-primary mt-auto"
             data-testid="my-account-change-profile-button"
-            :to="localePath(`/account/profile`)"
+            :to="formatLink(`/account/profile`)"
           >
             {{ $t("account.change") }}
           </NuxtLink>
@@ -106,7 +107,7 @@ onBeforeMount(async () => {
           <NuxtLink
             class="justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-brand-primary hover:bg-brand-dark focus:outline-none focus:ring-2 focus:ring-brand-primary mt-auto"
             data-testid="my-account-change-payment-method-button"
-            :to="localePath(`/account/payment`)"
+            :to="formatLink(`/account/payment`)"
           >
             {{ $t("account.change") }}
           </NuxtLink>
@@ -157,7 +158,7 @@ onBeforeMount(async () => {
           <NuxtLink
             class="justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-brand-primary hover:bg-brand-dark focus:outline-none focus:ring-2 focus:ring-brand-primary mt-auto"
             data-testid="my-account-change-default-billing-address-button"
-            :to="localePath(`/account/address`)"
+            :to="formatLink(`/account/address`)"
           >
             {{ $t("account.change") }}
           </NuxtLink>
@@ -180,7 +181,7 @@ onBeforeMount(async () => {
           <NuxtLink
             class="justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-brand-primary hover:bg-brand-dark focus:outline-none focus:ring-2 focus:ring-brand-primary mt-auto"
             data-testid="my-account-change-default-shipping-address-button"
-            :to="localePath(`/account/address`)"
+            :to="formatLink(`/account/address`)"
           >
             {{ $t("account.change") }}
           </NuxtLink>
diff --git a/templates/vue-demo-store/pages/account/recover.vue b/templates/vue-demo-store/pages/account/recover.vue
index e6cf8dc32..393a03a06 100644
--- a/templates/vue-demo-store/pages/account/recover.vue
+++ b/templates/vue-demo-store/pages/account/recover.vue
@@ -6,6 +6,7 @@ export default {
 <script setup lang="ts">
 const { t } = useI18n();
 const localePath = useLocalePath();
+const { formatLink } = useInternationalization(localePath);
 useBreadcrumbs([
   {
     name: t("breadcrumbs.accountOverview"),
@@ -27,13 +28,13 @@ useBreadcrumbs([
             {{ $t("recoveryPassword.label") }}
           </p>
           <NuxtLink
-            :to="localePath(`/register`)"
+            :to="formatLink(`/register`)"
             class="text-sm font-medium px-4 text-gray-600 focus:outline-none underline"
           >
             {{ $t("recoveryPassword.register") }}
           </NuxtLink>
           <NuxtLink
-            :to="localePath(`/login`)"
+            :to="formatLink(`/login`)"
             class="flex justify-center align-center text-sm font-medium text-gray-600 py-2 px-4 focus:outline-none underline"
           >
             {{ $t("recoveryPassword.orLogin") }}
diff --git a/templates/vue-demo-store/pages/checkout/cart.vue b/templates/vue-demo-store/pages/checkout/cart.vue
index 4413e77ef..abd40d4d9 100644
--- a/templates/vue-demo-store/pages/checkout/cart.vue
+++ b/templates/vue-demo-store/pages/checkout/cart.vue
@@ -3,6 +3,7 @@ definePageMeta({ layout: "checkout" });
 
 const { cartItems, subtotal, totalPrice, shippingTotal } = useCart();
 const localePath = useLocalePath();
+const { formatLink } = useInternationalization(localePath);
 const hasItems = computed(() => cartItems.value.length > 0);
 </script>
 
@@ -65,7 +66,7 @@ export default {
         <NuxtLink
           class="flex items-center justify-center rounded-md px-6 py-3 text-base font-medium text-white shadow-sm bg-brand-primary hover:bg-brand-dark"
           data-testid="cart-checkout-link"
-          :to="localePath(`/checkout`)"
+          :to="formatLink(`/checkout`)"
         >
           {{ $t("cart.checkout") }}
         </NuxtLink>
diff --git a/templates/vue-demo-store/pages/checkout/index.vue b/templates/vue-demo-store/pages/checkout/index.vue
index a1c289216..2a8d30046 100644
--- a/templates/vue-demo-store/pages/checkout/index.vue
+++ b/templates/vue-demo-store/pages/checkout/index.vue
@@ -21,6 +21,7 @@ const { getSalutations } = useSalutations();
 const { pushInfo } = useNotifications();
 const { t } = useI18n();
 const localePath = useLocalePath();
+const { formatLink } = useInternationalization(localePath);
 const {
   paymentMethods,
   shippingMethods,
@@ -946,7 +947,7 @@ const addAddressModalController = useModal();
       </h1>
       <NuxtLink
         class="inline-flex justify-center py-2 px-4 my-8 border border-transparent text-sm font-medium rounded-md text-white bg-brand-primary hover:bg-brand-dark focus:outline-none focus:ring-2 focus:ring-brand-light"
-        :to="localePath(`/`)"
+        :to="formatLink(`/`)"
         data-testid="checkout-go-home-link"
       >
         {{ $t("checkout.goToHomepage") }}
diff --git a/templates/vue-demo-store/pages/checkout/success/[id]/unpaid.vue b/templates/vue-demo-store/pages/checkout/success/[id]/unpaid.vue
index 1b2c76b0c..a3477fd6a 100644
--- a/templates/vue-demo-store/pages/checkout/success/[id]/unpaid.vue
+++ b/templates/vue-demo-store/pages/checkout/success/[id]/unpaid.vue
@@ -6,6 +6,7 @@ export default {
 <script setup lang="ts">
 const { params } = useRoute();
 const localePath = useLocalePath();
+const { formatLink } = useInternationalization(localePath);
 </script>
 <template>
   <div class="container mx-auto w-1/2 mb-24 mt-24 text-center">
@@ -23,7 +24,7 @@ const localePath = useLocalePath();
     </p>
     <div class="mt-12 text-center">
       <NuxtLink
-        :to="localePath(`/checkout/success/${params.id}`)"
+        :to="formatLink(`/checkout/success/${params.id}`)"
         class="inline-flex justify-center items-center py-2 px-4 text-base font-medium text-center text-white bg-brand-primary rounded-lg hover:bg-gray-400 focus:ring-4 focus:ring-brand-primary dark:focus:ring-brand-primary"
       >
         {{ $t("checkout.checkOrderDetails") }}
diff --git a/templates/vue-demo-store/pages/error.vue b/templates/vue-demo-store/pages/error.vue
index 041ba8c8b..08e670712 100644
--- a/templates/vue-demo-store/pages/error.vue
+++ b/templates/vue-demo-store/pages/error.vue
@@ -11,6 +11,7 @@ const props = withDefaults(
 );
 const { t } = useI18n();
 const localePath = useLocalePath();
+const { formatLink } = useInternationalization(localePath);
 
 const errorMessageMap: { [key: number]: string } = {
   404: t("errorPages.404"),
@@ -43,7 +44,7 @@ export default {
           {{ errorMessage }}
         </p>
         <NuxtLink
-          :to="localePath(`/`)"
+          :to="formatLink(`/`)"
           class="w-full lg:w-auto justify-center py-3 px-8 border shadow-sm text-sm font-medium rounded-md text-white bg-brand-light hover:bg-brand-dark focus:outline-none focus:ring-2 focus:ring-brand-primary"
         >
           {{ $t("goBackHome") }}
diff --git a/templates/vue-demo-store/pages/login.vue b/templates/vue-demo-store/pages/login.vue
index 788bc54c2..f987655ee 100644
--- a/templates/vue-demo-store/pages/login.vue
+++ b/templates/vue-demo-store/pages/login.vue
@@ -4,6 +4,7 @@ const { logout, isLoggedIn } = useUser();
 
 const redirectAfterLogin = (path = "/account") => push(path);
 const localePath = useLocalePath();
+const { formatLink } = useInternationalization(localePath);
 
 onBeforeMount(async () => {
   if (process.client && isLoggedIn.value) {
@@ -34,7 +35,7 @@ export default {
       <div class="flex items-center justify-end">
         <div class="text-sm">
           <NuxtLink
-            :to="localePath(`/account/recover`)"
+            :to="formatLink(`/account/recover`)"
             class="font-medium text-indigo-600 hover:text-indigo-500"
           >
             {{ $t("recoveryPassword.forgotPassword") }}
@@ -44,7 +45,7 @@ export default {
 
       <template #action>
         <NuxtLink
-          :to="localePath(`/register`)"
+          :to="formatLink(`/register`)"
           class="w-full flex justify-center py-2 px-4 border border-indigo-600 text-sm font-medium rounded-md text-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500"
         >
           {{ $t("account.signUp") }}
diff --git a/templates/vue-demo-store/pages/reset-password.vue b/templates/vue-demo-store/pages/reset-password.vue
index b78aec3c1..3d34c25d1 100644
--- a/templates/vue-demo-store/pages/reset-password.vue
+++ b/templates/vue-demo-store/pages/reset-password.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 const { t } = useI18n();
 const localePath = useLocalePath();
+const { formatLink } = useInternationalization(localePath);
 
 useBreadcrumbs([
   {
@@ -15,7 +16,7 @@ useBreadcrumbs([
     <AccountResetPasswordForm>
       <template #action>
         <NuxtLink
-          :to="localePath(`/`)"
+          :to="formatLink(`/`)"
           class="w-full flex justify-center py-2 px-4 border border-brand-primary text-sm font-medium rounded-md text-brand-primary focus:outline-none focus:ring-2 focus:ring-brand-primary"
         >
           {{ $t("returnToHomepage") }}
diff --git a/templates/vue-demo-store/pages/wishlist.vue b/templates/vue-demo-store/pages/wishlist.vue
index 1f21c379a..ec994bb2f 100644
--- a/templates/vue-demo-store/pages/wishlist.vue
+++ b/templates/vue-demo-store/pages/wishlist.vue
@@ -14,6 +14,7 @@ const products = ref<Product[]>([]);
 const isLoading = ref(false);
 const { t } = useI18n();
 const localePath = useLocalePath();
+const { formatLink } = useInternationalization(localePath);
 useBreadcrumbs([
   {
     name: t("breadcrumbs.wishlist"),
@@ -116,7 +117,7 @@ watch(
         </h1>
         <p class="my-4">{{ $t("wishlist.emptyText") }}</p>
         <NuxtLink
-          :to="localePath(`/`)"
+          :to="formatLink(`/`)"
           class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-brand-primary hover:bg-brand-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-primary"
           date-testid="wishlist-empty-continue-link"
         >