Applied NuxtImg to pages and components

composables/backgroundImageOptimization.ts

@@ -0,0 +1,30 @@
+/**
+ * Vue Composable for optimizing image used in background-image.
+ * @module composables/backgroundImageOptimization
+ */
+
+/**
+ * Vue Composable for optimizing background-image with Nuxt Image
+ * @returns { WritableComputedRef<{ backgroundImage: string}, string>} writable computed value that will return the Vue style object with optimized image URL
+ */
+function useBackgroundImageOptimization() {
+    const targetImage = ref("");
+
+    const img = useImage();
+    const backgroundImageStyles = computed({
+        get: () => {
+            const imageURL = img(targetImage.value, {
+                format: "webp",
+                quality: 80,
+            });
+            return { backgroundImage: `url("${imageURL}")` };
+        },
+        set: (value: string) => {
+            targetImage.value = value;
+        },
+    });
+
+    return { backgroundImageStyles };
+}
+
+export { useBackgroundImageOptimization };