Merge pull request #237 from w3bdesign/dev

Upgrade Nuxt to 2.15

Author: w3bdesign

components/Cart/ShowCartContents.vue

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 <template>
   <div>
-    <LoadingSpinner v-if="loading" />
+    <SpinnerLoadingSpinner v-if="loading" />
     <div>
       <h1 class="h-10 p-6 text-3xl font-bold text-center">Cart</h1>
       <section class="mt-10">
@@ -42,7 +42,7 @@
       <h2 v-if="!cartProducts.length" class="m-4 text-3xl text-center">
         Cart is currently empty
       </h2>
-      <CheckoutButton v-if="displayRemove && cartProducts.length" />
+      <CartCheckoutButton v-if="displayRemove && cartProducts.length" />
     </div>
   </div>
 </template>

components/Category/ShowProductsInCategory.vue

@@ -5,14 +5,14 @@
         {{ products.name }}
       </h1>
       <br />
-      <ShowAllProducts :products="products.products.nodes" />
+      <ProductsShowAllProducts :products="products.products.nodes" />
       <div v-if="noProducts" class="mt-10">
         <h2 class="h-10 text-2xl font-bold text-center">
           No products to display
         </h2>
       </div>
     </div>
-    <div v-else><LoadingSpinner /></div>
+    <div v-else><SpinnerLoadingSpinner /></div>
   </div>
 </template>
 

components/Header/Cart.vue renamed to components/Layout/Cart.vue

@@ -15,7 +15,7 @@
             />
           </div>
         </div>
-        <MobileMenu />
+        <LayoutMobileMenu />
         <div class="hidden lg:w-1/12 lg:block"></div>
         <div
           id="nav-content"
@@ -76,7 +76,7 @@
                   <li
                     class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
                   >
-                    <Cart class="-mr-4" />
+                    <LayoutCart class="-mr-4" />
                   </li>
                 </ul>
               </nav>

components/Footer/Footer.vue renamed to components/Layout/Footer.vue

@@ -85,7 +85,7 @@
             </div>
           </div>
         </div>
-        <SubmitOrderButton :success="success" :loading="loading" />
+        <OrderSubmitOrderButton :success="success" :loading="loading" />
       </section>
     </FormulateForm>
   </div>
@@ -114,7 +114,6 @@ export default {
     async submitOrder() {
       this.loading = true
       const order = this.formData
-
       const checkoutData = {
         clientMutationId: uid(),
         billing: {

components/Header/MobileMenu.vue renamed to components/Layout/MobileMenu.vue

@@ -28,6 +28,7 @@
 
 <script>
 export default {
+  name: 'SubmitOrderButton',
   props: {
     loading: { type: Boolean, required: false, default: false },
     success: { type: Boolean, required: false, default: false },
@@ -39,6 +40,6 @@ export default {
 /*
 button {
   @apply w-48 h-12 px-4 py-2 mt-12 font-bold text-white bg-blue-500 rounded hover:bg-blue-800;
-} 
+}
 */
 </style>

components/Header/Navbar.vue renamed to components/Layout/Navbar.vue

@@ -49,7 +49,7 @@
 
 <script>
 export default {
-  name: 'ShowProducts',
+  name: 'ShowAllProducts',
   props: {
     products: { type: Array, required: true },
   },

components/Header/Search.vue renamed to components/Layout/Search.vue

@@ -51,8 +51,11 @@
               </select>
             </p>
             <div class="pt-1 mt-2">
-              <AddToCartButton v-if="product.variations" :product="product" />
-              <AddToCartButton v-else :product="product" />
+              <CartAddToCartButton
+                v-if="product.variations"
+                :product="product"
+              />
+              <CartAddToCartButton v-else :product="product" />
             </div>
           </div>
         </div>

components/Checkout/CheckoutForm.vue renamed to components/Order/CheckoutForm.vue

@@ -5,3 +5,9 @@
     </h1>
   </div>
 </template>
+
+<script>
+export default {
+  name: 'LoadingSpinner',
+}
+</script>

components/Checkout/SubmitOrderButton.vue renamed to components/Order/SubmitOrderButton.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <Navbar />
+    <LayoutNavbar />
     <Nuxt class="container p-4 mx-auto" />
-    <Footer />
+    <LayoutFooter />
   </div>
 </template>
 

components/Products/ShowAllProducts.vue

@@ -33,6 +33,16 @@ export default {
 
   // Auto import components (https://go.nuxtjs.dev/config-components)
   components: true,
+  /* components: [
+    '~/components/Cart',
+    '~/components/Category',
+    '~/components/Checkout',
+    '~/components/Footer',
+    '~/components/Header',
+    '~/components/Index',
+    '~/components/Products',
+    '~/components/Spinner',
+  ], */
 
   // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
   buildModules: [