Merge pull request #1082 from w3bdesign/1081-check-why-ssr-fails

Improve logo height and fix ssr render error
w3bdesign · Jun 9, 2023 · 657ed16 · 657ed16 · vercel · Jun 9, 2023
2 parents a57346b + 2ac822c
commit 657ed16
Show file tree

Hide file tree

Showing 8 changed files with 185 additions and 141 deletions.
diff --git a/components/Layout/LayoutNavItem.vue b/components/Layout/LayoutNavItem.vue
@@ -1,24 +1,26 @@
 <template>
-    <ul>
-        <li class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4">
-            <NuxtLink :to="to">
-                <span class="text-xl text-white no-underline lg:text-black">
-                    {{ label }}
-                </span>
-            </NuxtLink>
-        </li>
-    </ul>
+  <ul>
+    <li
+      class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
+    >
+      <NuxtLink :to="to">
+        <span class="text-xl text-white no-underline lg:text-black">
+          {{ label }}
+        </span>
+      </NuxtLink>
+    </li>
+  </ul>
 </template>
 
 <script setup>
 const props = defineProps({
-    to: {
-        type: String,
-        required: true,
-    },
-    label: {
-        type: String,
-        required: true,
-    },
+  to: {
+    type: String,
+    required: true,
+  },
+  label: {
+    type: String,
+    required: true,
+  },
 });
 </script>
diff --git a/components/Layout/LayoutNavbar.vue b/components/Layout/LayoutNavbar.vue
@@ -1,23 +1,42 @@
 <template>
-  <header role="banner" class="container flex flex-col justify-center px-0 pt-4 md:pt-6 mx-auto mb-6">
+  <header
+    role="banner"
+    class="container flex flex-col justify-center px-0 pt-4 md:pt-6 mx-auto mb-6"
+  >
     <div class="flex flex-wrap lg:px-4">
       <div class="w-full pr-2 my-2 lg:w-3/12 md:w-10/12">
         <div class="ml-4 lg:ml-0">
-          <nuxt-img alt="Logo" class="h-20 lg:h-24 ml-[30px] md:ml-0" aria-label="Nettbutikk logo" src="/svg/Logo.svg" />
+          <nuxt-img
+            alt="Logo"
+            class="h-16 lg:h-18 ml-[55px] md:ml-0"
+            aria-label="Nettbutikk logo"
+            src="/svg/Logo.svg"
+          />
         </div>
       </div>
-      
+
       <div class="hidden lg:w-1/12 lg:block" />
-      <div id="nav-content" class="hidden w-full mt-4 bg-black lg:w-8/12 lg:block lg:bg-white lg:mt-0 lg:text-right">
+      <div
+        id="nav-content"
+        class="hidden w-full mt-4 bg-black lg:w-8/12 lg:block lg:bg-white lg:mt-0 lg:text-right"
+      >
         <div class="px-6 lg:px-0 lg:pt-5 xl:pt-7">
           <div>
-            <nav id="block-main" role="navigation" aria-labelledby="block-main-menu">
-              <ul class="items-center justify-end flex-1 pr-4 -mr-4 list-reset lg:flex">
+            <nav
+              id="block-main"
+              role="navigation"
+              aria-labelledby="block-main-menu"
+            >
+              <ul
+                class="items-center justify-end flex-1 pr-4 -mr-4 list-reset lg:flex"
+              >
                 <NavItem to="/" label="Home" />
                 <NavItem to="/products" label="Products" />
                 <NavItem to="/categories" label="Categories" />
                 <NavItem to="/search" label="Search" />
-                <li class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4">
+                <li
+                  class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
+                >
                   <LayoutCart />
                 </li>
               </ul>

diff --git a/components/Products/ProductsSingleProduct.vue b/components/Products/ProductsSingleProduct.vue
@@ -2,34 +2,60 @@
   <template v-if="data?.product">
     <section>
       <div class="container flex flex-wrap items-center pt-4 pb-12 mx-auto">
-        <div class="grid grid-cols-1 gap-4 mt-8 lg:grid-cols-2 xl:grid-cols-2 md:grid-cols-2 sm:grid-cols-2">
-          <ProductImage :alt="data.product.name" :src="data.product.image.sourceUrl" />
+        <div
+          class="grid grid-cols-1 gap-4 mt-8 lg:grid-cols-2 xl:grid-cols-2 md:grid-cols-2 sm:grid-cols-2"
+        >
+          <ProductImage
+            :alt="data.product.name"
+            :src="data.product.image.sourceUrl"
+          />
           <div class="ml-8">
             <p class="text-3xl font-bold text-left">
               {{ data.product.name }}
             </p>
-            <ProductPrice :product="data.product" :shouldCenterPrice="false" priceFontSize="big" />
+            <ProductPrice
+              :product="data.product"
+              :shouldCenterPrice="false"
+              priceFontSize="big"
+            />
             <p class="pt-1 mt-6 text-2xl text-gray-900">
               {{ stripHTML(data.product.description) }}
             </p>
-            <p v-if="data.product.stockQuantity" class="pt-1 mt-4 text-2xl text-gray-900">
+            <p
+              v-if="data.product.stockQuantity"
+              class="pt-1 mt-4 text-2xl text-gray-900"
+            >
               {{ data.product.stockQuantity }} in stock
             </p>
-            <p v-if="data.product.variations" class="pt-1 mt-4 text-xl text-gray-900">
+            <p
+              v-if="data.product.variations"
+              class="pt-1 mt-4 text-xl text-gray-900"
+            >
               <span class="py-2">Varianter</span>
-              <select id="variant" name="variant"
+              <select
+                id="variant"
+                name="variant"
                 class="block w-64 px-6 py-2 bg-white border border-gray-500 rounded-lg focus:outline-none focus:shadow-outline"
-                v-model="selectedVariation">
-                <option v-for="(variation, index) in data.product.variations.nodes" :key="variation.databaseId"
-                  :value="variation.databaseId" :selected="index === 0">
+                v-model="selectedVariation"
+              >
+                <option
+                  v-for="(variation, index) in data.product.variations.nodes"
+                  :key="variation.databaseId"
+                  :value="variation.databaseId"
+                  :selected="index === 0"
+                >
                   {{ filteredVariantName(data.product.name, variation.name) }}
                   ({{ variation.stockQuantity }} in stock)
                 </option>
               </select>
             </p>
             <div class="pt-1 mt-2">
-              <CommonButton @common-button-click="addProductToCart(data.product)" :is-loading="isLoading">
-                ADD TO CART</CommonButton>
+              <CommonButton
+                @common-button-click="addProductToCart(data.product)"
+                :is-loading="isLoading"
+              >
+                ADD TO CART</CommonButton
+              >
             </div>
           </div>
         </div>
@@ -49,7 +75,7 @@
  * @prop {string} slug - The slug of the product to display.
  */
 
-import { ref, watch } from 'vue';
+import { ref, watch } from "vue";
 
 import GET_SINGLE_PRODUCT_QUERY from "@/apollo/queries/GET_SINGLE_PRODUCT_QUERY.gql";
 import ADD_TO_CART_MUTATION from "@/apollo/mutations/ADD_TO_CART_MUTATION.gql";
@@ -79,7 +105,8 @@ watch(
   () => data.value,
   (dataValue) => {
     if (dataValue && dataValue.product?.variations?.nodes?.length > 0) {
-      selectedVariation.value = dataValue.product?.variations?.nodes[0].databaseId;
+      selectedVariation.value =
+        dataValue.product?.variations?.nodes[0].databaseId;
     }
   },
   { immediate: true }

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
-  <LayoutNavbar />
-  <div class="container mx-auto max-w-[84.375rem]">
-    <slot />
-  </div>
-  <LayoutFooter />
-  <LayoutStickyFooter />
+    <LayoutNavbar />
+    <div class="container mx-auto max-w-[84.375rem]">
+      <slot />
+    </div>
+    <LayoutFooter />
+    <LayoutStickyFooter />
   </div>
 </template>
 

diff --git a/nuxt.config.js b/nuxt.config.js
@@ -3,7 +3,7 @@
 import { defineNuxtConfig } from "nuxt/config";
 
 export default defineNuxtConfig({
-  ssr: false,
+  ssr: true,
   components: true,
   css: ["~/assets/css/main.css", "~/assets/css/animate.min.css"],
   modules: [