fix: Refactor for Nuxt 4 and improve code consistency

zackha · zackha · commit 327d7995395a · 2025-09-14T17:19:49.000+02:00
Updated app config to reference Nuxt 4, improved code consistency by adding file headers and script setup comments, and removed unused imports from server files. Enhanced accessibility and keyboard support for ButtonBack, and added i18n browser language detection settings. Minor formatting and code style improvements across components and GraphQL files.
diff --git a/app/app.config.ts b/app/app.config.ts
@@ -2,7 +2,7 @@
 export default defineAppConfig({
   site: {
     name: 'NuxtCommerce',
-    description: 'NuxtCommerce is a dynamic e-commerce solution developed with Nuxt 3 and GraphQL, tailored for WooCommerce.',
+    description: 'NuxtCommerce is a dynamic e-commerce solution developed with Nuxt 4 and GraphQL, tailored for WooCommerce.',
   },
   ui: {
     primary: 'red',
diff --git a/app/app.vue b/app/app.vue
@@ -1,20 +1,19 @@
 <!--app/app.vue-->
 <script setup lang="ts">
-const { name, description } = useAppConfig().site;
+const { site } = useAppConfig();
+const { name, description } = site;
 
 useHead({
-  htmlAttrs: {
-    lang: 'en',
-  },
-  titleTemplate: titleChunk => (titleChunk ? `${titleChunk} - ${name}` : name),
+  htmlAttrs: { lang: 'en' },
+  titleTemplate: (chunk?: string) => (chunk ? `${chunk} - ${name}` : name),
 });
 
 useSeoMeta({
-  description: description,
+  description,
   ogType: 'website',
-  ogImage: 'https://commerce.nuxt.dev/social-card.jpg',
   ogSiteName: name,
   ogLocale: 'en_US',
+  ogImage: 'https://commerce.nuxt.dev/social-card.jpg',
   twitterCard: 'summary_large_image',
   twitterSite: '@zhatlen',
   twitterCreator: '@zhatlen',
@@ -26,9 +25,9 @@ useSeoMeta({
 
 <template>
   <AppHeader />
-  <div class="pt-[72px] lg:pt-20 min-h-[calc(100vh-72px)]">
+  <main class="pt-[72px] lg:pt-20 min-h-[calc(100vh-72px)]">
     <NuxtPage />
-  </div>
+  </main>
   <AppFooter />
   <Notivue v-slot="item">
     <Notification :item="item" :theme="materialTheme" />
diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
@@ -1,3 +1,4 @@
+<!--app/components/AppFooter.vue-->
 <script setup>
 const config = useRuntimeConfig();
 const colorMode = useColorMode();
diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
@@ -1,3 +1,4 @@
+<!--app/components/AppHeader.vue-->
 <script setup>
 const router = useRouter();
 const route = useRoute();
diff --git a/app/components/ButtonBack.vue b/app/components/ButtonBack.vue
@@ -1,7 +1,26 @@
+<!--app/components/ButtonBack.vue-->
+<script setup lang="ts">
+const { t } = useI18n();
+const router = useRouter();
+
+const goBack = () => router.back();
+const onKey = (e: KeyboardEvent) => {
+  if (e.key === 'Enter' || e.key === ' ') {
+    e.preventDefault();
+    goBack();
+  }
+};
+</script>
+
 <template>
   <div class="fixed px-7 mt-0.5 -left-1.5 max-2xl:hidden z-30">
-    <UTooltip :text="$t('general.go_back')" :open-delay="1500">
-      <button @click.prevent="useRouter().back()" class="flex p-3 rounded-full dark:bg-black hover:dark:bg-neutral-800 bg-white hover:bg-neutral-200 active:scale-95 transition">
+    <UTooltip :text="t('general.go_back')" :open-delay="1500">
+      <button
+        type="button"
+        class="flex p-3 rounded-full dark:bg-black hover:dark:bg-neutral-800 bg-white hover:bg-neutral-200 active:scale-95 transition"
+        :aria-label="t('general.go_back')"
+        @click="goBack"
+        @keydown="onKey">
         <UIcon name="i-iconamoon-arrow-left-1-bold" size="24" />
       </button>
     </UTooltip>
diff --git a/app/components/ButtonSelectCategory.vue b/app/components/ButtonSelectCategory.vue
@@ -1,11 +1,10 @@
+<!--app/components/ButtonSelectCategory.vue-->
 <script setup>
 const categoriesData = ref([]);
 
 onMounted(async () => {
   const response = await $fetch('/api/categories');
-  categoriesData.value = response.productCategories.nodes.filter(
-    category => category.products.nodes.length && category.children.nodes.length
-  );
+  categoriesData.value = response.productCategories.nodes.filter(category => category.products.nodes.length && category.children.nodes.length);
 });
 
 const categories = computed(() => categoriesData.value);
diff --git a/app/components/ButtonSortBy.vue b/app/components/ButtonSortBy.vue
@@ -1,3 +1,4 @@
+<!--app/components/ButtonSortBy.vue-->
 <script setup>
 const router = useRouter();
 const route = useRoute();
diff --git a/app/components/ButtonWishlist.vue b/app/components/ButtonWishlist.vue
@@ -1,3 +1,4 @@
+<!--app/components/ButtonWishlist.vue-->
 <script setup>
 const props = defineProps({
   product: Object,
diff --git a/app/components/CarouselCategories.vue b/app/components/CarouselCategories.vue
@@ -1,3 +1,4 @@
+<!--app/components/CarouselCategories.vue-->
 <script setup>
 const router = useRouter();
 const route = useRoute();
diff --git a/app/components/Cart.vue b/app/components/Cart.vue
@@ -1,3 +1,4 @@
+<!--app/components/Cart.vue-->
 <script setup>
 const { cart, handleRemoveFromCart, removeFromCartButtonStatus } = useCart();
 const { order } = useCheckout();
diff --git a/app/components/Checkout.vue b/app/components/Checkout.vue
@@ -1,3 +1,4 @@
+<!--app/components/Checkout.vue-->
 <script setup>
 const { userDetails, checkoutStatus, handleCheckout } = useCheckout();
 const { cart } = useCart();
diff --git a/app/components/EmptyCart.vue b/app/components/EmptyCart.vue
@@ -1,3 +1,4 @@
+<!--app/components/EmptyCart.vue-->
 <template>
   <div class="w-[calc(100vw-24px)] sm:w-96 h-96 p-3">
     <div
diff --git a/app/components/ImageSliderWithModal.vue b/app/components/ImageSliderWithModal.vue
@@ -1,3 +1,4 @@
+<!--app/components/ImageSliderWithModal.vue-->
 <script setup lang="ts">
 const { isOpenImageSliderModal } = useComponents();
 const props = defineProps({
diff --git a/app/components/PaymentSuccessful.vue b/app/components/PaymentSuccessful.vue
@@ -1,3 +1,4 @@
+<!--app/components/PaymentSuccessful.vue-->
 <script setup>
 const { order } = useCheckout();
 </script>
diff --git a/app/components/ProductCard.vue b/app/components/ProductCard.vue
@@ -1,3 +1,4 @@
+<!--app/components/ProductCard.vue-->
 <script setup>
 const localePath = useLocalePath();
 
diff --git a/app/components/ProductSkeleton.vue b/app/components/ProductSkeleton.vue
@@ -1,3 +1,4 @@
+<!--app/components/ProductSkeleton.vue-->
 <template>
   <div class="justify-center flex flex-col lg:flex-row lg:mx-5">
     <ButtonBack />
diff --git a/app/components/ProductsEmpty.vue b/app/components/ProductsEmpty.vue
@@ -1,3 +1,4 @@
+<!--app/components/ProductsEmpty.vue-->
 <script setup>
 const route = useRoute();
 const router = useRouter();
diff --git a/app/components/ProductsSkeleton.vue b/app/components/ProductsSkeleton.vue
@@ -1,3 +1,4 @@
+<!--app/components/ProductsSkeleton.vue-->
 <template>
   <div v-for="i in 21" :key="i">
     <div class="rounded-2xl overflow-hidden w-full pb-[133%] bg-neutral-200 dark:bg-neutral-800 skeleton"></div>
diff --git a/app/gql/mutations/addToCart.ts b/app/gql/mutations/addToCart.ts
@@ -1,3 +1,4 @@
+// app/gql/mutations/addToCart.ts
 import { gql } from 'nuxt-graphql-request/utils';
 
 export const addToCartMutation = gql`
diff --git a/app/gql/mutations/checkout.ts b/app/gql/mutations/checkout.ts
@@ -1,3 +1,4 @@
+// app/gql/mutations/checkout.ts
 import { gql } from 'nuxt-graphql-request/utils';
 
 export const checkoutMutation = gql`
diff --git a/app/gql/mutations/updateItemQuantities.ts b/app/gql/mutations/updateItemQuantities.ts
@@ -1,3 +1,4 @@
+// app/gql/mutations/updateItemQuantities.ts
 import { gql } from 'nuxt-graphql-request/utils';
 
 export const updateItemQuantitiesMutation = gql`
diff --git a/app/gql/queries/getCategories.ts b/app/gql/queries/getCategories.ts
@@ -1,3 +1,4 @@
+// app/gql/queries/getCategories.ts
 import { gql } from 'nuxt-graphql-request/utils';
 
 export const getCategoriesQuery = gql`
diff --git a/app/gql/queries/getProduct.ts b/app/gql/queries/getProduct.ts
@@ -1,3 +1,4 @@
+// app/gql/queries/getProduct.ts
 import { gql } from 'nuxt-graphql-request/utils';
 
 export const getProductQuery = gql`
diff --git a/app/gql/queries/getProducts.ts b/app/gql/queries/getProducts.ts
@@ -1,3 +1,4 @@
+// app/gql/queries/getProducts.ts
 import { gql } from 'nuxt-graphql-request/utils';
 
 export const getProductsQuery = gql`
diff --git a/app/gql/queries/getSearchProducts.ts b/app/gql/queries/getSearchProducts.ts
@@ -1,3 +1,4 @@
+// app/gql/queries/getSearchProducts.ts
 import { gql } from 'nuxt-graphql-request/utils';
 
 export const getSearchProductsQuery = gql`
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -7,13 +7,21 @@ export default defineNuxtConfig({
   modules: ['nuxt-graphql-request', '@vueuse/nuxt', '@nuxt/ui', '@nuxt/image', 'notivue/nuxt', '@nuxthub/core', '@nuxtjs/i18n'],
 
   i18n: {
+    defaultLocale: 'en',
+    strategy: 'prefix_except_default',
+    langDir: 'locales',
+    detectBrowserLanguage: {
+      useCookie: true,
+      cookieKey: 'i18n_redirected',
+      redirectOn: 'root',
+      alwaysRedirect: true,
+    },
     locales: [
       { code: 'en', iso: 'en-GB', file: 'en-GB.json', name: '🇬🇧 English' },
       { code: 'nb', iso: 'nb-NO', file: 'nb-NO.json', name: '🇳🇴 Norsk (Bokmål)' },
       { code: 'nl', iso: 'nl-NL', file: 'nl-NL.json', name: '🇳🇱 Nederlands' },
       { code: 'de', iso: 'de-DE', file: 'de-DE.json', name: '🇩🇪 Deutsch' },
     ],
-    defaultLocale: 'en',
   },
 
   hub: {
diff --git a/server/api/cart/add.post.ts b/server/api/cart/add.post.ts
@@ -1,5 +1,4 @@
 // server/api/cart/add.post.ts
-import { readBody } from 'h3';
 import { addToCartMutation } from '~/gql/mutations/addToCart';
 import { requestMutation } from '~~/server/utils/wpgraphql';
 
diff --git a/server/api/cart/update.post.ts b/server/api/cart/update.post.ts
@@ -1,5 +1,4 @@
 // server/api/cart/update.post.ts
-import { readBody } from 'h3';
 import { updateItemQuantitiesMutation } from '~/gql/mutations/updateItemQuantities';
 import { requestMutation } from '~~/server/utils/wpgraphql';
 
diff --git a/server/api/checkout.post.ts b/server/api/checkout.post.ts
@@ -1,5 +1,4 @@
 // server/api/checkout.post.ts
-import { readBody } from 'h3';
 import { checkoutMutation } from '~/gql/mutations/checkout';
 import { requestMutation } from '~~/server/utils/wpgraphql';
 
diff --git a/server/api/product.get.ts b/server/api/product.get.ts
@@ -1,5 +1,4 @@
 // server/api/product.get.ts
-import { getQuery } from 'h3';
 import { getProductQuery } from '~/gql/queries/getProduct';
 import { requestQuery } from '~~/server/utils/wpgraphql';
 
diff --git a/server/api/products.get.ts b/server/api/products.get.ts
@@ -1,5 +1,4 @@
 // server/api/products.get.ts
-import { getQuery } from 'h3';
 import { getProductsQuery } from '~/gql/queries/getProducts';
 import { requestQuery } from '~~/server/utils/wpgraphql';
 
diff --git a/server/api/search.get.ts b/server/api/search.get.ts
@@ -1,5 +1,4 @@
 // server/api/search.get.ts
-import { getQuery } from 'h3';
 import { getSearchProductsQuery } from '~/gql/queries/getSearchProducts';
 import { requestQuery } from '~~/server/utils/wpgraphql';
 
diff --git a/server/routes/robots.txt.ts b/server/routes/robots.txt.ts
@@ -1,5 +1,4 @@
 // server/routes/robots.txt.ts
-import { getRequestURL, setHeader } from 'h3';
 
 export default defineEventHandler(event => {
   setHeader(event, 'Content-Type', 'text/plain; charset=utf-8');
diff --git a/server/routes/sitemap.xml.ts b/server/routes/sitemap.xml.ts
@@ -1,5 +1,4 @@
 // server/routes/sitemap.xml.ts
-import { getRequestURL, setHeader } from 'h3';
 
 export default defineEventHandler(event => {
   setHeader(event, 'Content-Type', 'application/xml; charset=utf-8');
diff --git a/server/utils/wpgraphql.ts b/server/utils/wpgraphql.ts
@@ -28,7 +28,11 @@ export async function requestMutation<T = unknown>(event: H3Event, query: Reques
     const res = await handleError(client.rawRequest<T>(queryString, variables), 'GraphQL mutation failed');
     const newSession = res.headers.get('woocommerce-session');
     if (newSession) {
-      setCookie(event, 'woocommerce-session', `Session ${newSession}`, { path: '/', httpOnly: true, sameSite: 'lax' });
+      setCookie(event, 'woocommerce-session', `Session ${newSession}`, {
+        path: '/',
+        httpOnly: true,
+        sameSite: 'lax',
+      });
     }
     return res.data;
   }

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+<!--app/components/AppFooter.vue-->`
`1`	`2`	`<script setup>`
`2`	`3`	`const config = useRuntimeConfig();`
`3`	`4`	`const colorMode = useColorMode();`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+<!--app/components/AppHeader.vue-->`
`1`	`2`	`<script setup>`
`2`	`3`	`const router = useRouter();`
`3`	`4`	`const route = useRoute();`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+<!--app/components/ButtonSortBy.vue-->`
`1`	`2`	`<script setup>`
`2`	`3`	`const router = useRouter();`
`3`	`4`	`const route = useRoute();`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+<!--app/components/ButtonWishlist.vue-->`
`1`	`2`	`<script setup>`
`2`	`3`	`const props = defineProps({`
`3`	`4`	`product: Object,`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+<!--app/components/CarouselCategories.vue-->`
`1`	`2`	`<script setup>`
`2`	`3`	`const router = useRouter();`
`3`	`4`	`const route = useRoute();`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+<!--app/components/Cart.vue-->`
`1`	`2`	`<script setup>`
`2`	`3`	`const { cart, handleRemoveFromCart, removeFromCartButtonStatus } = useCart();`
`3`	`4`	`const { order } = useCheckout();`