refactor: change router links for nuxt

shopware · Mar 17, 2023 · e951d93 · e951d93
1 parent 1b19c5c
commit e951d93
Show file tree

Hide file tree

Showing 13 changed files with 49 additions and 59 deletions.
diff --git a/.changeset/angry-moles-double.md b/.changeset/angry-moles-double.md
@@ -0,0 +1,5 @@
+---
+"vue-demo-store": patch
+---
+
+Replaced `RouterLink` with `NuxtLink` for prefetch performance gain
diff --git a/templates/vue-demo-store/components/checkout/CheckoutSideCart.vue b/templates/vue-demo-store/components/checkout/CheckoutSideCart.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { RouterLink } from "vue-router";
 const isOpen = inject("isSidebarOpen");
 
 const { cartItems, totalPrice, isEmpty } = useCart();
@@ -110,14 +109,14 @@ const { cartItems, totalPrice, isEmpty } = useCart();
                   Checkout
                 </NuxtLink>
 
-                <RouterLink
+                <NuxtLink
                   class="flex items-center justify-center py-3 text-sm font-medium text-brand-dark"
                   to="/checkout/cart"
                   data-testid="cart-checkout-shopping-cart"
                   @click="isOpen = false"
                 >
                   Go to shopping cart
-                </RouterLink>
+                </NuxtLink>
               </div>
               <div
                 class="mt-6 flex justify-center text-center text-sm text-brand-dark"

diff --git a/templates/vue-demo-store/components/errors/RoutingNotFound.vue b/templates/vue-demo-store/components/errors/RoutingNotFound.vue
@@ -1,6 +1,4 @@
-<script setup lang="ts">
-import { RouterLink } from "vue-router";
-</script>
+<script setup lang="ts"></script>
 
 <template>
   <section class="container mx-auto text-center my-20">
@@ -9,11 +7,11 @@ import { RouterLink } from "vue-router";
       We are sorry, the page you're looking for could not be found. It may no
       longer exist or may have been moved.
     </p>
-    <RouterLink
+    <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="/"
     >
       Back to homepage
-    </RouterLink>
+    </NuxtLink>
   </section>
 </template>
diff --git a/templates/vue-demo-store/components/layout/LayoutCheckoutHeader.vue b/templates/vue-demo-store/components/layout/LayoutCheckoutHeader.vue
@@ -1,6 +1,4 @@
-<script setup lang="ts">
-import { RouterLink } from "vue-router";
-</script>
+<script setup lang="ts"></script>
 
 <template>
   <div class="relative bg-white">
@@ -9,7 +7,7 @@ import { RouterLink } from "vue-router";
         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">
-          <RouterLink to="/">
+          <NuxtLink to="/">
             <span class="sr-only">Shopware</span>
             <img
               class="h-8 w-auto sm:h-10"
@@ -18,7 +16,7 @@ import { RouterLink } from "vue-router";
               width="40px"
               height="40px"
             />
-          </RouterLink>
+          </NuxtLink>
         </div>
         <AccountMenu />
       </div>

diff --git a/templates/vue-demo-store/components/layout/LayoutFooter.vue b/templates/vue-demo-store/components/layout/LayoutFooter.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { RouterLink } from "vue-router";
 import { getTranslatedProperty } from "@shopware-pwa/helpers-next";
 
 const { navigationElements } = useNavigation({ type: "footer-navigation" });
@@ -18,10 +17,10 @@ const gridColumns = computed<number>(() =>
         :class="`grid grid-cols-2 md:grid-cols-${gridColumns}`"
       >
         <div class="hidden md:block">
-          <RouterLink to="/">
+          <NuxtLink to="/">
             <span class="sr-only">Shopware</span>
             <img class="h-15 w-auto sm:h-15" src="/logo.svg" alt="Logo" />
-          </RouterLink>
+          </NuxtLink>
         </div>
         <div
           v-for="navigationElement in navigationElements"
@@ -37,12 +36,12 @@ const gridColumns = computed<number>(() =>
                 :key="navigationChild.id"
                 class="pb-3 md:pb-1"
               >
-                <RouterLink
+                <NuxtLink
                   :to="'/' + navigationChild.seoUrls[0]?.seoPathInfo"
                   class="text-base font-normal text-gray-500 hover:text-gray-900"
                 >
                   {{ getTranslatedProperty(navigationChild, "name") }}
-                </RouterLink>
+                </NuxtLink>
               </li>
             </ul>
           </template>

diff --git a/templates/vue-demo-store/components/layout/LayoutHeader.vue b/templates/vue-demo-store/components/layout/LayoutHeader.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { RouterLink } from "vue-router";
-
 const { count } = useCart();
 const { count: wishlistCount } = useWishlist();
 const isSidebarOpen = inject("isSidebarOpen");
@@ -14,7 +12,7 @@ const isSidebarOpen = inject("isSidebarOpen");
       >
         <div class="flex justify-start lg:flex-1 w-full md:w-1/3 lg:w-1/12">
           <div class="order-2 lg:order-1 ml-4 lg:ml-0">
-            <RouterLink to="/">
+            <NuxtLink to="/">
               <span class="sr-only">Shopware</span>
               <img
                 class="h-8 w-auto sm:h-10"
@@ -23,7 +21,7 @@ const isSidebarOpen = inject("isSidebarOpen");
                 width="40px"
                 height="40px"
               />
-            </RouterLink>
+            </NuxtLink>
           </div>
           <div class="order-1 lg:order-2 py-3 lg:p-0">
             <LayoutSideMenu />

diff --git a/templates/vue-demo-store/components/layout/LayoutSideMenu.vue b/templates/vue-demo-store/components/layout/LayoutSideMenu.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { RouterLink } from "vue-router";
 import {
   getCategoryUrl,
   getCategoryImageUrl,
@@ -67,7 +66,7 @@ const toggleCollapse = (navigationElement: Category) => {
                     v-for="navigationElement in navigationElements"
                     :key="navigationElement.id"
                   >
-                    <RouterLink
+                    <NuxtLink
                       :to="getCategoryUrl(navigationElement)"
                       class="flex items-center w-full px-5 py-3 text-base font-normal text-gray-900 break-all hover:bg-gray-100"
                       @click="isSideMenuOpened = false"
@@ -89,7 +88,7 @@ const toggleCollapse = (navigationElement: Category) => {
                           ]"
                         />
                       </button>
-                    </RouterLink>
+                    </NuxtLink>
 
                     <div
                       v-if="
@@ -117,15 +116,15 @@ const toggleCollapse = (navigationElement: Category) => {
                         v-for="childElement in navigationElement.children"
                         :key="childElement.id"
                       >
-                        <RouterLink
+                        <NuxtLink
                           :to="getCategoryUrl(childElement)"
                           class="flex items-center p-3 text-base font-normal text-gray-500 break-all hover:bg-gray-100 pl-11"
                           @click="isSideMenuOpened = false"
                         >
                           <span>
                             {{ childElement.name }}
                           </span>
-                        </RouterLink>
+                        </NuxtLink>
                       </li>
                     </ul>
                   </li>

diff --git a/templates/vue-demo-store/components/layout/LayoutStoreSearch.vue b/templates/vue-demo-store/components/layout/LayoutStoreSearch.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { RouterLink } from "vue-router";
 import { getProductUrl } from "@shopware-pwa/helpers-next";
 
 import { onClickOutside, useFocus, useMagicKeys } from "@vueuse/core";
@@ -93,15 +92,15 @@ watch(enter, (value) => {
       v-if="showSuggest"
       class="absolute border-gray-100 border-t-1 duration-300 left-0 mt-2 overflow-hidden right-0 rounded-b-md shadow-md transition-height w-auto z-1"
     >
-      <RouterLink
+      <NuxtLink
         v-for="product in getProducts.slice(0, displayTotal)"
         :key="product.id"
         :to="getProductUrl(product)"
         data-testid="layout-search-suggest-link"
         @click="[(active = false), (isSideMenuOpened = false)]"
       >
         <ProductSuggestSearch :product="product" />
-      </RouterLink>
+      </NuxtLink>
 
       <div
         class="h-11 text-sm rounded-b-md p-3 text-center transition"
@@ -113,15 +112,15 @@ watch(enter, (value) => {
           class="w-80 h-40 bg-brand-light blur-2xl fixed animate-spin"
         />
         <div v-else>
-          <RouterLink
+          <NuxtLink
             v-if="getTotal > 0"
             :to="`/search?query=${typingQuery}`"
             @click="[(active = false), (isSideMenuOpened = false)]"
           >
             See <span v-if="getTotal !== 1">all</span> {{ getTotal }}
             <span v-if="getTotal !== 1">results</span>
             <span v-if="getTotal == 1">result</span>
-          </RouterLink>
+          </NuxtLink>
           <div v-else>No results :(</div>
         </div>
       </div>

diff --git a/templates/vue-demo-store/components/layout/LayoutTopNavigation.vue b/templates/vue-demo-store/components/layout/LayoutTopNavigation.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { RouterLink } from "vue-router";
 import {
   getTranslatedProperty,
   getSmallestThumbnailUrl,
@@ -23,12 +22,12 @@ onClickOutside(menuHtmlElement, () => (currentMenuPosition.value = null));
       class="relative hover:bg-gray-50 hover:rounded-lg"
       @mouseover="currentMenuPosition = navigationElement.id"
     >
-      <RouterLink
+      <NuxtLink
         :to="'/' + navigationElement.seoUrls?.[0]?.seoPathInfo"
         class="text-base font-medium text-gray-500 hover:text-gray-900 p-2 inline-block"
       >
         {{ getTranslatedProperty(navigationElement, "name") }}
-      </RouterLink>
+      </NuxtLink>
 
       <!--
             Flyout menu, show/hide based on flyout menu state.
@@ -62,7 +61,7 @@ onClickOutside(menuHtmlElement, () => (currentMenuPosition.value = null));
                 }"
                 class="relative grid gap-6 bg-white px-3 py-2 sm:gap-6 sm:p-3"
               >
-                <RouterLink
+                <NuxtLink
                   v-if="
                     typeof childElement?.seoUrls?.[0]?.seoPathInfo !==
                     'undefined'
@@ -94,7 +93,7 @@ onClickOutside(menuHtmlElement, () => (currentMenuPosition.value = null));
                       alt="Category image"
                     />
                   </div>
-                </RouterLink>
+                </NuxtLink>
                 <div v-else class="px-4 py-2 sm:py-3">
                   <p class="text-base font-medium text-gray-500">
                     {{ getTranslatedProperty(childElement, "name") }}

diff --git a/templates/vue-demo-store/components/product/ProductCard.vue b/templates/vue-demo-store/components/product/ProductCard.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { RouterLink } from "vue-router";
 import { BoxLayout, DisplayMode } from "@shopware-pwa/composables-next";
 import {
   getProductName,
@@ -102,13 +101,13 @@ const ratingAverage: Ref<number> = computed(() =>
     <div class="mt-4 flex flex-col justify-between flex-1">
       <div>
         <h3 class="text-base font-bold text-gray-700">
-          <RouterLink
+          <NuxtLink
             class="line-clamp-2 h-12"
             :to="getProductUrl(product)"
             data-testid="product-box-product-name-link"
           >
             {{ getProductName({ product }) }}
-          </RouterLink>
+          </NuxtLink>
         </h3>
         <div
           v-if="layoutType === 'standard'"
@@ -157,14 +156,14 @@ const ratingAverage: Ref<number> = computed(() =>
       >
         Add to cart
       </button>
-      <RouterLink v-else :to="getProductUrl(product)">
+      <NuxtLink v-else :to="getProductUrl(product)">
         <button
           class="mt-3 w-full justify-center py-2 px-4 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"
           data-testid="product-box-product-show-details"
         >
           Details
         </button>
-      </RouterLink>
+      </NuxtLink>
     </div>
   </div>
 </template>
diff --git a/templates/vue-demo-store/layouts/account.vue b/templates/vue-demo-store/layouts/account.vue
@@ -5,7 +5,6 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { RouterLink } from "vue-router";
 useAuthGuardRedirection();
 
 // Navigation for Account page
@@ -54,51 +53,51 @@ provide("swNavigation-footer-navigation", footerData);
                 </h1>
                 <ul class="space-y-2">
                   <li>
-                    <RouterLink
+                    <NuxtLink
                       to="/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 />
                       <span class="ml-3">Account Overview</span>
-                    </RouterLink>
+                    </NuxtLink>
                   </li>
                   <li>
-                    <RouterLink
+                    <NuxtLink
                       to="/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 />
                       <span class="ml-3">My profile</span>
-                    </RouterLink>
+                    </NuxtLink>
                   </li>
                   <li>
-                    <RouterLink
+                    <NuxtLink
                       to="/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 />
                       <span class="ml-3">My address</span>
-                    </RouterLink>
+                    </NuxtLink>
                   </li>
                   <li>
-                    <RouterLink
+                    <NuxtLink
                       to="/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 />
                       <span class="ml-3">Payment</span>
-                    </RouterLink>
+                    </NuxtLink>
                   </li>
                 </ul>
                 <ul class="pt-4 mt-4 space-y-2 border-t border-gray-200">
                   <li>
-                    <RouterLink
+                    <NuxtLink
                       to="/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 />
                       <span class="ml-3">Order history</span>
-                    </RouterLink>
+                    </NuxtLink>
                   </li>
                   <li>
                     <button

diff --git a/templates/vue-demo-store/pages/checkout/cart.vue b/templates/vue-demo-store/pages/checkout/cart.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { RouterLink } from "vue-router";
 definePageMeta({ layout: "checkout" });
 
 const { cartItems, subtotal, totalPrice, shippingTotal } = useCart();
@@ -59,13 +58,13 @@ export default {
           <CheckoutPromotionCode />
         </div>
 
-        <RouterLink
+        <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"
           to="/checkout"
           data-testid="cart-checkout-link"
         >
           Checkout
-        </RouterLink>
+        </NuxtLink>
       </aside>
     </div>
   </div>