Merge pull request #1080 from w3bdesign/1079-add-httpsnuxtcommodulesi…

…mage 1079 add httpsnuxtcommodulesimage
w3bdesign · Jun 9, 2023 · 543389f · 543389f · vercel · Jun 9, 2023
2 parents 8e1a143 + 666b3e1
commit 543389f
Show file tree

Hide file tree

Showing 18 changed files with 459 additions and 85 deletions.
diff --git a/assets/svg/Logo.svg b/assets/svg/Logo.svg
diff --git a/components/Cart/CartContents.vue b/components/Cart/CartContents.vue
@@ -11,12 +11,12 @@
           <div class="item">
             <span class="block mt-2 font-extrabold">Remove: <br /></span>
             <span class="item-content">
-              <img
+              <nuxt-img
                 class="mt-2 ml-4 cursor-pointer"
                 :class="{ removing: isRemoving }"
                 alt="Remove icon"
                 aria-label="Remove"
-                src="@/assets/svg/Remove.svg"
+                src="/svg/Remove.svg"
                 @click="handleRemoveProduct(products)"
               />
             </span>

diff --git a/components/Index/IndexHero.vue b/components/Index/IndexHero.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
-    <img
+    <nuxt-img
       class="mx-auto"
       alt="Image slider slide #1"
-      src="~assets/images/Hero.jpg"
+      src="/images/Hero.jpg"
     />
     <div
       class="flex flex-col items-start justify-center w-full mx-auto tracking-wide lg:w-1/2"

diff --git a/components/Layout/LayoutCart.vue b/components/Layout/LayoutCart.vue
@@ -13,11 +13,11 @@
             class="text-xl text-white no-underline lg:text-black is-active"
           >
             <span class="hidden lg:block">
-              <img
+              <nuxt-img
                 alt="Cart icon"
                 class="h-12 ml-4 lg:ml-2"
                 aria-label="Cart"
-                src="~/assets/svg/Cart.svg"
+                src="/svg/Cart.svg"
               />
             </span>
             <span class="block lg:hidden">

diff --git a/components/Layout/LayoutNavbar.vue b/components/Layout/LayoutNavbar.vue
@@ -1,42 +1,23 @@
 <template>
-  <header
-    role="banner"
-    class="container flex flex-col justify-center px-0 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-9/12 pr-2 my-2 overflow-hidden lg:w-3/12 md:w-10/12">
+      <div class="w-full pr-2 my-2 lg:w-3/12 md:w-10/12">
         <div class="ml-4 lg:ml-0">
-          <img
-            alt="Logo"
-            class="h-20 lg:h-24"
-            aria-label="Nettbutikk logo"
-            src="~/assets/svg/Logo.svg"
-          />
+          <nuxt-img alt="Logo" class="h-20 lg:h-24 ml-[30px] md:ml-0" aria-label="Nettbutikk logo" src="/svg/Logo.svg" />
         </div>
       </div>
-      <LayoutMobileMenu />
+
       <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/ProductImage.vue b/components/Products/ProductImage.vue
@@ -1,5 +1,5 @@
 <template>
-  <img
+  <nuxt-img
     id="product-image"
     class="h-auto p-8 transition duration-500 ease-in-out transform md:p-0 hover:shadow-lg hover:scale-95"
     :alt="alt"

diff --git a/nuxt.config.js b/nuxt.config.js
@@ -13,6 +13,7 @@ export default defineNuxtConfig({
     "@formkit/nuxt",
     "@nuxtjs/algolia",
     "nuxt-icon",
+    "@nuxt/image",
   ],
   plugins: ["~/plugins/apollo"],
   runtimeConfig: {