Test out Nuxt upgrade

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 },
   },