Prettier

Author: w3bdesign

app.vue

@@ -14,18 +14,18 @@
 
 <script setup>
 useHead({
-  title: 'Index',
-  titleTemplate: '%s - Nuxt 3 Woocommerce',
+  title: "Index",
+  titleTemplate: "%s - Nuxt 3 Woocommerce",
   meta: [
-    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+    { name: "viewport", content: "width=device-width, initial-scale=1" },
     {
-      hid: 'description',
-      name: 'description',
-      content: 'Nuxt 3 Woocommerce',
+      hid: "description",
+      name: "description",
+      content: "Nuxt 3 Woocommerce",
     },
   ],
-  link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
-})
+  link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
+});
 </script>
 
 <style>

components/Cart/CartAddToCartButton.vue

@@ -27,44 +27,44 @@
 </template>
 
 <script setup>
-import ADD_TO_CART_MUTATION from '@/apollo/mutations/ADD_TO_CART_MUTATION.gql'
+import ADD_TO_CART_MUTATION from "@/apollo/mutations/ADD_TO_CART_MUTATION.gql";
 
-const isLoading = useState('isLoading', () => false)
-const isError = useState('isError', () => false)
+const isLoading = useState("isLoading", () => false);
+const isError = useState("isError", () => false);
 
 defineProps({
   product: {
     type: [Object],
     required: true,
   },
-})
+});
 
 const addProductToCart = (product) => {
-  const productId = product.databaseId ? product.databaseId : product
+  const productId = product.databaseId ? product.databaseId : product;
   const productQueryInput = {
     productId,
-  }
+  };
 
-  const variables = { input: productQueryInput }
+  const variables = { input: productQueryInput };
 
   const { mutate, onDone, onError } = useMutation(ADD_TO_CART_MUTATION, {
     variables,
-  })
+  });
 
-  isLoading.value = true
+  isLoading.value = true;
 
-  mutate(variables)
+  mutate(variables);
 
   onDone(() => {
-    isLoading.value = false
-    isError.value = false
-  })
+    isLoading.value = false;
+    isError.value = false;
+  });
 
   onError(() => {
-    isLoading.value = false
-    isError.value = true
-  })
-}
+    isLoading.value = false;
+    isError.value = true;
+  });
+};
 </script>
 
 <style scoped>

components/Cart/CartContents.vue

@@ -52,46 +52,46 @@
 </template>
 
 <script setup>
-import GET_CART_QUERY from '@/apollo/queries/GET_CART_QUERY.gql'
-import UPDATE_CART_MUTATION from '@/apollo/mutations/UPDATE_CART_MUTATION.gql'
+import GET_CART_QUERY from "@/apollo/queries/GET_CART_QUERY.gql";
+import UPDATE_CART_MUTATION from "@/apollo/mutations/UPDATE_CART_MUTATION.gql";
 
-const isRemoving = useState('isRemoving', () => false)
+const isRemoving = useState("isRemoving", () => false);
 
 defineProps({
   showCheckoutButton: { type: Boolean, required: false, default: false },
-})
+});
 
-const { data } = await useAsyncQuery(GET_CART_QUERY)
+const { data } = await useAsyncQuery(GET_CART_QUERY);
 
 const handleRemoveProduct = ({ key }) => {
-  const updatedItems = []
+  const updatedItems = [];
 
   updatedItems.push({
     key,
     quantity: 0,
-  })
+  });
 
-  isRemoving.value = true
+  isRemoving.value = true;
 
   const variables = {
     input: {
       items: updatedItems,
     },
-  }
+  };
 
   const { mutate, onDone, onError } = useMutation(UPDATE_CART_MUTATION, {
     variables,
-  })
+  });
 
-  mutate(variables)
+  mutate(variables);
 
   onDone(() => {
-    isRemoving.value = false
-    document.location = '/cart'
-  })
+    isRemoving.value = false;
+    document.location = "/cart";
+  });
 
-  onError(() => (isRemoving.value = false))
-}
+  onError(() => (isRemoving.value = false));
+};
 </script>
 
 <style scoped>

components/Category/CategoryShowAll.vue

@@ -38,5 +38,5 @@ defineProps({
     type: [Object],
     required: true,
   },
-})
+});
 </script>

components/Category/CategoryShowProducts.vue

@@ -24,7 +24,7 @@ const props = defineProps({
     type: [Object],
     required: true,
   },
-})
+});
 
-const noProducts = computed(() => props.products.products.nodes.length === 0)
+const noProducts = computed(() => props.products.products.nodes.length === 0);
 </script>

components/Checkout/CheckoutButton.vue

@@ -30,5 +30,5 @@
 defineProps({
   loading: { type: Boolean, required: false, default: false },
   success: { type: Boolean, required: false, default: false },
-})
+});
 </script>

components/Checkout/CheckoutForm.vue

@@ -34,17 +34,17 @@
 </template>
 
 <script setup>
-import { Form, Field, ErrorMessage } from 'vee-validate'
-import { uid } from 'uid'
+import { Form, Field, ErrorMessage } from "vee-validate";
+import { uid } from "uid";
 
-import { BILLING_FIELDS, BILLING_SCHEMA } from './constants/BILLING_FIELDS'
+import { BILLING_FIELDS, BILLING_SCHEMA } from "./constants/BILLING_FIELDS";
 
-import CHECKOUT_MUTATION from '@/apollo/mutations/CHECKOUT_MUTATION.gql'
+import CHECKOUT_MUTATION from "@/apollo/mutations/CHECKOUT_MUTATION.gql";
 
 const upperCaseFirstChar = (input) =>
-  input.charAt(0).toUpperCase() + input.slice(1)
+  input.charAt(0).toUpperCase() + input.slice(1);
 
-const paymentMethod = 'cod'
+const paymentMethod = "cod";
 
 const handleSubmit = ({
   firstName,
@@ -71,7 +71,7 @@ const handleSubmit = ({
     email,
     phone,
     company,
-  }
+  };
 
   const checkoutData = {
     clientMutationId: uid(),
@@ -80,19 +80,19 @@ const handleSubmit = ({
     shipToDifferentAddress: false,
     paymentMethod,
     isPaid: false,
-    transactionId: 'hjkhjkhsdsdiui',
-  }
+    transactionId: "hjkhjkhsdsdiui",
+  };
 
-  const variables = { input: checkoutData }
+  const variables = { input: checkoutData };
 
   const { mutate, onDone, onError } = useMutation(CHECKOUT_MUTATION, {
     variables,
-  })
+  });
 
-  mutate(checkoutData)
+  mutate(checkoutData);
 
-  onDone(() => alert('Order placed!'))
+  onDone(() => alert("Order placed!"));
 
-  onError(() => alert('Error, order not placed'))
-}
+  onError(() => alert("Error, order not placed"));
+};
 </script>

components/Layout/LayoutCart.vue

@@ -35,37 +35,37 @@
 </template>
 
 <script setup>
-import GET_CART_QUERY from '@/apollo/queries/GET_CART_QUERY.gql'
+import GET_CART_QUERY from "@/apollo/queries/GET_CART_QUERY.gql";
 
-import { getCookie } from '@/utils/functions'
+import { getCookie } from "@/utils/functions";
 
-const cartLength = useState('cartLength', () => 0)
-const subTotal = useState('subTotal', '')
-const remoteError = useState('remoteError', () => false)
+const cartLength = useState("cartLength", () => 0);
+const subTotal = useState("subTotal", "");
+const remoteError = useState("remoteError", () => false);
 
 const { data, error, pending, execute } = await useAsyncQuery(GET_CART_QUERY, {
-  options: { fetchPolicy: 'cache-and-network' },
-})
+  options: { fetchPolicy: "cache-and-network" },
+});
 
 const updateCartDisplay = () => {
   if (!data) {
-    return
+    return;
   }
 
   cartLength.value = data.value.cart.contents.nodes.reduce(
     (accumulator, argument) => accumulator + argument.quantity,
     0
-  )
+  );
 
-  subTotal.value = data.value.cart.total
+  subTotal.value = data.value.cart.total;
 
-  remoteError.value = error
-}
+  remoteError.value = error;
+};
 
 setInterval(() => {
-  if (process.client && !pending.value && getCookie('woo-session')) {
-    execute()
-    updateCartDisplay()
+  if (process.client && !pending.value && getCookie("woo-session")) {
+    execute();
+    updateCartDisplay();
   }
-}, 3000)
+}, 3000);
 </script>

components/Layout/LayoutFooter.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed } from "vue";
 
-const todayDate = computed(() => new Date().getFullYear())
+const todayDate = computed(() => new Date().getFullYear());
 </script>

components/Layout/LayoutMobileMenu.vue

@@ -53,13 +53,13 @@
 </template>
 
 <script setup>
-const expandedMenu = useState('expandedMenu', () => false)
-const firstRender = useState('firstRender', () => true)
+const expandedMenu = useState("expandedMenu", () => false);
+const firstRender = useState("firstRender", () => true);
 
 const displayMobileMenu = () => {
-  expandedMenu.value = !expandedMenu.value
-  firstRender.value = false
-}
+  expandedMenu.value = !expandedMenu.value;
+  firstRender.value = false;
+};
 </script>
 
 <style scoped>
@@ -91,7 +91,7 @@ const displayMobileMenu = () => {
   top: 1em;
 }
 .burger:after {
-  content: '';
+  content: "";
   display: block;
   position: absolute;
   height: 150%;
@@ -108,7 +108,7 @@ const displayMobileMenu = () => {
 .burger .burger-lines:before {
   pointer-events: none;
   display: block;
-  content: '';
+  content: "";
   width: 100%;
   border-radius: 0.25em;
   background-color: #000;