.

Author: w3bdesign

components/Cart/CartContents.vue

@@ -1,5 +1,11 @@
 <template>
-  <div v-if="cartItems.length">
+  <div v-if="isLoading">
+    <h2 class="mt-64 text-3xl text-center">Loading cart...</h2>
+  </div>
+  <div v-else-if="error">
+    <h2 class="mt-64 text-3xl text-center text-red-500">Error loading cart. Please try again.</h2>
+  </div>
+  <div v-else-if="cartItems.length">
     <h1 class="h-10 p-6 text-3xl font-bold text-center">Cart</h1>
     <section class="mt-10">
       <CartItem
@@ -23,11 +29,13 @@
  * @module CartContents
  * @returns {Object} The Vue.js component object.
  */
-import { computed } from 'vue';
+import { computed, ref, onMounted } from 'vue';
 import { useCart } from "@/store/useCart";
 import CommonButton from '@/components/common/CommonButton.vue';
 
 const cart = useCart();
+const isLoading = ref(true);
+const error = ref(null);
 
 const cartItems = computed(() => cart.cart);
 
@@ -45,6 +53,17 @@ const handleRemoveProduct = async (key) => {
     // without exposing the error details
   }
 };
+
+onMounted(async () => {
+  try {
+    await cart.refetch();
+  } catch (err) {
+    console.error('Error fetching cart:', err);
+    error.value = err;
+  } finally {
+    isLoading.value = false;
+  }
+});
 </script>
 
 <style scoped>

components/Layout/LayoutCart.vue

@@ -1,14 +1,17 @@
 <template>
-  <div v-if="cart.error">
-    <span class="text-xl text-red-500">
-      Error fetching cart. Please refresh the page.
-    </span>
-  </div>
-  <div v-else class="mt-4 lg:mt-0">
-    <NuxtLink to="/cart">
+  <div class="mt-4 lg:mt-0">
+    <div v-if="isLoading">
+      <span class="text-xl text-gray-500">Loading cart...</span>
+    </div>
+    <div v-else-if="error">
+      <span class="text-xl text-red-500">
+        Error fetching cart. Please refresh the page.
+      </span>
+    </div>
+    <NuxtLink v-else to="/cart">
       <transition name="cart">
         <span
-          v-if="cartLength && !cart.loading"
+          v-if="cartLength > 0"
           class="text-xl text-white no-underline lg:text-black is-active"
         >
           <span class="hidden lg:block">
@@ -29,7 +32,7 @@
         </span>
       </transition>
       <transition name="cart">
-        <div v-if="cartLength && !cart.loading">
+        <div v-if="cartLength > 0">
           <span
             class="absolute w-6 h-6 pb-2 ml-16 -mt-12 text-center text-black bg-white lg:text-white lg:bg-black rounded-full lg:ml-14"
           >
@@ -45,12 +48,24 @@
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { ref, computed, onMounted } from "vue";
 import { useCart } from "@/store/useCart";
 import { formatPrice } from "@/utils/functions";
 
 const cart = useCart();
+const isLoading = ref(true);
+const error = ref(null);
 
 const cartLength = computed(() => cart.cartQuantity);
 const cartSubtotal = computed(() => cart.cartSubtotal);
+
+onMounted(async () => {
+  try {
+    await cart.refetch();
+  } catch (err) {
+    error.value = err;
+  } finally {
+    isLoading.value = false;
+  }
+});
 </script>

nuxt.config.js

@@ -13,7 +13,7 @@ export default defineNuxtConfig({
     "nuxt-icon",
     "@nuxt/image",
   ],
-  plugins: ["~/plugins/apollo"],
+  plugins: ["~/plugins/apollo", "~/plugins/cartUpdater"],
   runtimeConfig: {
     public: {
       graphqlURL: process.env.PUBLIC_GRAPHQL_URL,

plugins/cartUpdater.js

@@ -0,0 +1,16 @@
+import { useCart } from '@/store/useCart';
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.hook('app:created', () => {
+    const cart = useCart();
+    
+    // Refetch cart data on initial load
+    cart.refetch();
+
+    // Refetch cart data on route change
+    nuxtApp.$router.beforeEach((to, from, next) => {
+      cart.refetch();
+      next();
+    });
+  });
+});