@shopbite-de/storefront 1.7.0 → 1.7.2

package/app/components/Header/Right.vue

@@ -77,9 +77,20 @@ const loggedOutDropDown = computed<DropdownMenuItem[][]>(() => {
     :items="isLoggedIn || isGuestSession ? loggedInDropDown : loggedOutDropDown"
   >
     <UChip v-if="isLoggedIn || isGuestSession" size="3xl" text="✓">
-      <UButton icon="i-lucide-user" color="neutral" variant="outline" />
+      <UButton
+        aria-label="Konto Dropdown öffnen"
+        icon="i-lucide-user"
+        color="neutral"
+        variant="outline"
+      />
     </UChip>
-    <UButton v-else icon="i-lucide-user" color="neutral" variant="outline" />
+    <UButton
+      v-else
+      aria-label="Konto Dropdown öffnen"
+      icon="i-lucide-user"
+      color="neutral"
+      variant="outline"
+    />
   </UDropdownMenu>
   <UDrawer
     v-if="isCheckoutEnabled"
@@ -89,6 +100,7 @@ const loggedOutDropDown = computed<DropdownMenuItem[][]>(() => {
   >
     <UChip :text="count" size="3xl">
       <UButton
+        aria-label="Zum Warenkorb"
         color="neutral"
         variant="outline"
         icon="i-lucide-shopping-cart"

package/app/components/Header/Title.vue

@@ -7,6 +7,7 @@ const siteName = computed(() => config.public.site.name);
   <NuxtLink to="/" class="-m-1.5 p-1.5">
     <span class="sr-only">{{ siteName }}</span>
     <UColorModeImage
+      alt="Logo"
       light="/light/Logo.png"
       dark="/dark/Logo.png"
       class="h-12 w-auto"

package/app/components/Hero.vue

@@ -22,18 +22,30 @@ withDefaults(
     usps: () => [],
   },
 );
+
+const videoRef = ref<HTMLVideoElement>();
+
+onMounted(() => {
+  // Handle video playback on bfcache restore
+  window.addEventListener("pageshow", (event) => {
+    if (event.persisted && videoRef.value) {
+      videoRef.value.play();
+    }
+  });
+});
 </script>
 
 <template>
   <div class="relative">
     <video
+      ref="videoRef"
       autoplay
       loop
       muted
       playsinline
       class="absolute inset-0 w-full h-full object-cover -z-10"
     >
-      <source :src="backgroundVideo" type="video/mp4" >
+      <source fetchpriority="high" :src="backgroundVideo" type="video/mp4" >
     </video>
     <div class="bg-black/50 backdrop-blur-sm">
       <UPageHero

package/app/components/ImageGallery.vue

@@ -27,7 +27,7 @@ defineProps<{
   >
     <template #body>
       <UCarousel
-        v-slot="{ item }"
+        v-slot="{ item, index }"
         :items="images"
         class="mx-auto w-full"
         auto-height
@@ -35,6 +35,9 @@ defineProps<{
         loop
       >
         <img
+          v-if="item"
+          :loading="index === 0 ? 'eager' : 'lazy'"
+          :fetchpriority="index === 0 ? 'high' : 'low'"
           :src="item.image"
           :alt="item.alt"
           class="rounded-lg w-full max-h-screen object-contain"

package/content/index.yml

@@ -5,7 +5,7 @@ seo:
 title: ShopBite
 description: Reduziere Kosten und steigere deinen Umsatz
 hero:
-  backgroundVideo: https://shopware.shopbite.de/media/10/59/96/1762465181/background.mp4
+  backgroundVideo: https://shopware.shopbite.de/media/10/59/96/1762465181/background.mp4?ts=1762465194
   headline: SHOPBITE
   usps:
     - title: 4.5 ⭐
@@ -68,20 +68,19 @@ gallery:
       variant: subtle
       trailingIcon: i-lucide-phone
   images:
-    - image: https://shopware.shopbite.de/media/71/2a/1a/1762465670/restaurant1.webp
+    - image: https://shopware.shopbite.de/media/71/2a/1a/1762465670/restaurant1.webp?ts=1762465670
       alt: La Fattoria Restaurant Innenbereich 1
-    - image: https://shopware.shopbite.de/media/61/ea/77/1762465670/restaurant2.webp
+    - image: https://shopware.shopbite.de/media/61/ea/77/1762465670/restaurant2.webp?ts=1762465670
       alt: La Fattoria Restaurant Innenbereich 2
-    - image: https://shopware.shopbite.de/media/6d/ac/ca/1762465670/restaurant3.webp
+    - image: https://shopware.shopbite.de/media/6d/ac/ca/1762465670/restaurant3.webp?ts=1762465670
       alt: La Fattoria Restaurant Innenbereich 3
-    - image: https://shopware.shopbite.de/media/af/d6/da/1762465670/restaurant4.webp
+    - image: https://shopware.shopbite.de/media/af/d6/da/1762465670/restaurant4.webp?ts=1762465670
       alt: La Fattoria Restaurant Innenbereich 4
-    - image: https://shopware.shopbite.de/media/6a/ff/e2/1762465670/restaurant5.webp
+    - image: https://shopware.shopbite.de/media/6a/ff/e2/1762465670/restaurant5.webp?ts=1762465670
       alt: La Fattoria Restaurant Innenbereich 5
-    - image: https://shopware.shopbite.de/media/80/76/d0/1762465670/restaurant6.webp
+    - image: https://shopware.shopbite.de/media/80/76/d0/1762465670/restaurant6.webp?ts=1762465670
       alt: La Fattoria Restaurant Innenbereich 6
-    - image: https://nbg1.your-objectstorage.com/lafattoria-public/media/30/f7/76/1763383122/restaurant10.webp
-      alt: La Fattoria Restaurant Innenbereich 10
+
 cta:
   title: Jetzt bestellen!
   description: Genieße die italienische Küche, frisch zubereitet und direkt zu dir geliefert oder vor Ort genießen.

package/nuxt.config.ts

@@ -1,4 +1,6 @@
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
+const sw = process.env.SW === "true";
+
 export default defineNuxtConfig({
   app: {
     head: {
@@ -91,6 +93,7 @@ export default defineNuxtConfig({
     "@nuxt/ui",
     "@nuxt/scripts",
     "@nuxtjs/plausible",
+    "nuxt-vitalizer",
   ],
 
   plausible: {
@@ -101,30 +104,49 @@ export default defineNuxtConfig({
     experimental: { sqliteConnector: "native" },
   },
 
+  vitalizer: {
+    disablePrefetchLinks: true,
+  },
+
   pwa: {
+    strategies: sw ? "injectManifest" : "generateSW",
+    srcDir: sw ? "service-worker" : undefined,
+    filename: sw ? "sw.ts" : undefined,
+    registerType: "autoUpdate",
     manifest: {
       name: "ShopBite",
       short_name: "ShopBite",
       theme_color: "#ff5b00",
       icons: [
         {
-          src: "dark/Logo.svg",
+          src: "shopbite-192.png",
           sizes: "192x192",
-          type: "image/svg",
+          type: "image/png",
         },
         {
-          src: "dark/Logo.svg",
+          src: "shopbite-512.png",
           sizes: "512x512",
-          type: "image/svg",
+          type: "image/png",
         },
         {
-          src: "dark/Logo.svg",
+          src: "shopbite-512.png",
           sizes: "512x512",
           type: "image/svg",
           purpose: "any maskable",
         },
       ],
     },
+    workbox: {
+      globPatterns: ["**/*.{js,css,html,png,svg,ico}"],
+      globIgnores: ["**/_payload.json"],
+    },
+    injectManifest: {
+      globPatterns: ["**/*.{js,css,html,png,svg,ico}"],
+      globIgnores: ["**/_payload.json"],
+    },
+    client: {
+      installPrompt: true,
+    },
   },
 
   nitro: {
@@ -144,6 +166,8 @@ export default defineNuxtConfig({
 
   experimental: {
     asyncContext: true,
+    payloadExtraction: true,
+    watcher: "parcel",
   },
   $development: {
     modules: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopbite-de/storefront",
-  "version": "1.7.0",
+  "version": "1.7.2",
   "main": "nuxt.config.ts",
   "description": "Shopware storefront for food delivery shops",
   "keywords": [
@@ -35,6 +35,7 @@
     "@vueuse/core": "^14.0.0",
     "dotenv": "^17.2.3",
     "nuxt": "^4.2.1",
+    "nuxt-vitalizer": "2.0.0",
     "uuid": "^13.0.0"
   },
   "devDependencies": {