npm - @shopware/cms-base-layer - Versions diffs - 2.0.0 → 3.0.0 - Mend

@shopware/cms-base-layer 2.0.0 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (67) hide show

package/README.md +167 -125
package/app/app.config.ts +12 -0
package/app/components/SwCategoryNavigation.vue +25 -18
package/app/components/SwFilterDropdown.vue +54 -0
package/app/components/SwListingProductPrice.vue +2 -2
package/app/components/SwMedia3D.vue +14 -5
package/app/components/SwProductCard.vue +24 -21
package/app/components/SwProductCardDetails.vue +29 -12
package/app/components/SwProductCardImage.vue +30 -29
package/app/components/SwProductGallery.vue +18 -14
package/app/components/SwProductListingFilter.vue +20 -9
package/app/components/SwProductListingFilters.vue +3 -7
package/app/components/SwProductListingFiltersHorizontal.vue +306 -0
package/app/components/SwProductPrice.vue +3 -3
package/app/components/SwProductRating.vue +40 -0
package/app/components/SwProductReviews.vue +6 -19
package/app/components/SwProductUnits.vue +10 -15
package/app/components/SwQuantitySelect.vue +4 -7
package/app/components/SwSlider.vue +150 -51
package/app/components/SwSortDropdown.vue +10 -6
package/app/components/SwVariantConfigurator.vue +13 -13
package/app/components/listing-filters/SwFilterPrice.vue +45 -40
package/app/components/listing-filters/SwFilterProperties.vue +40 -33
package/app/components/listing-filters/SwFilterRating.vue +36 -27
package/app/components/listing-filters/SwFilterShippingFree.vue +39 -32
package/app/components/public/cms/CmsBlockSpatialViewer.vue +94 -0
package/app/components/public/cms/CmsGenericBlock.md +17 -2
package/app/components/public/cms/CmsGenericBlock.vue +21 -2
package/app/components/public/cms/CmsGenericElement.vue +7 -2
package/app/components/public/cms/CmsNoComponent.vue +87 -8
package/app/components/public/cms/CmsPage.md +19 -2
package/app/components/public/cms/CmsPage.vue +7 -0
package/app/components/public/cms/FrontendAccountCustomerGroupRegistrationPage.vue +52 -0
package/app/components/public/cms/block/CmsBlockCenterText.vue +1 -1
package/app/components/public/cms/block/CmsBlockImageText.vue +5 -5
package/app/components/public/cms/block/CmsBlockTextOnImage.vue +5 -12
package/app/components/public/cms/element/CmsElementBuyBox.vue +3 -3
package/app/components/public/cms/element/CmsElementCrossSelling.vue +19 -3
package/app/components/public/cms/element/CmsElementImage.vue +12 -35
package/app/components/public/cms/element/CmsElementImageGallery.vue +117 -50
package/app/components/public/cms/element/CmsElementProductBox.vue +7 -1
package/app/components/public/cms/element/CmsElementProductListing.vue +15 -4
package/app/components/public/cms/element/CmsElementProductName.vue +6 -1
package/app/components/public/cms/element/CmsElementProductSlider.vue +56 -35
package/app/components/public/cms/element/CmsElementSidebarFilter.vue +10 -2
package/app/components/public/cms/element/CmsElementText.vue +10 -11
package/app/components/public/cms/element/SwProductListingPagination.vue +2 -2
package/app/components/public/cms/section/CmsSectionDefault.vue +2 -2
package/app/components/public/cms/section/CmsSectionSidebar.vue +6 -3
package/app/components/ui/BaseButton.vue +18 -15
package/app/components/ui/ChevronIcon.vue +10 -13
package/app/components/ui/WishlistIcon.vue +3 -8
package/app/composables/useImagePlaceholder.ts +3 -3
package/app/composables/useLcpImagePreload.test.ts +229 -0
package/app/composables/useLcpImagePreload.ts +43 -0
package/app/composables/useTypedAppConfig.ts +15 -0
package/app/helpers/cms/findFirstCmsImageUrl.ts +86 -0
package/app/helpers/cms/getImageSizes.test.ts +50 -0
package/app/helpers/cms/getImageSizes.ts +36 -0
package/app/helpers/html-to-vue/ast.ts +53 -19
package/app/helpers/html-to-vue/getOptionsFromNode.ts +1 -1
package/app/helpers/html-to-vue/renderToHtml.ts +7 -11
package/app/helpers/html-to-vue/renderer.ts +86 -26
package/index.d.ts +37 -5
package/nuxt.config.ts +25 -0
package/package.json +21 -21
package/uno.config.ts +0 -83

package/app/composables/useLcpImagePreload.ts ADDED Viewed

@@ -0,0 +1,43 @@
+import { computed } from "vue";
+import { useHead } from "#imports";
+import type { Schemas } from "#shopware";
+import { findFirstCmsImageUrl } from "../helpers/cms/findFirstCmsImageUrl";
+import { useTypedAppConfig } from "./useTypedAppConfig";
+/**
+ * Preloads the first image found in CMS sections (background or element).
+ * This is typically the LCP (Largest Contentful Paint) candidate.
+ *
+ * Injects a `<link rel="preload" as="image">` in the `<head>` during SSR,
+ * allowing the browser to fetch the image before parsing CSS.
+ */
+export function useLcpImagePreload(sections: Schemas["CmsSection"][]) {
+  const appConfig = useTypedAppConfig();
+  const isEnabled = Boolean(appConfig.lcpImagePreload);
+  const lcpImageHref = computed(() =>
+    isEnabled
+      ? findFirstCmsImageUrl(sections, {
+          format: appConfig.backgroundImage?.format,
+          quality: appConfig.backgroundImage?.quality,
+        })
+      : undefined,
+  );
+  useHead(
+    computed(() =>
+      lcpImageHref.value
+        ? {
+            link: [
+              {
+                rel: "preload",
+                as: "image",
+                fetchpriority: "high",
+                href: lcpImageHref.value,
+              },
+            ],
+          }
+        : {},
+    ),
+  );
+}

package/app/composables/useTypedAppConfig.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import type { BackgroundImageOptions } from "@shopware/helpers";
+import { useAppConfig } from "#imports";
+type CmsBaseLayerAppConfig = ReturnType<typeof useAppConfig> & {
+  imagePlaceholder?: {
+    color?: string;
+  };
+  backgroundImage?: BackgroundImageOptions;
+  imageSizes?: Record<string, string>;
+  lcpImagePreload?: boolean;
+};
+export function useTypedAppConfig() {
+  return useAppConfig() as CmsBaseLayerAppConfig;
+}

package/app/helpers/cms/findFirstCmsImageUrl.ts ADDED Viewed

@@ -0,0 +1,86 @@
+import { getBackgroundImageUrl } from "@shopware/helpers";
+interface MediaMeta {
+  width?: number;
+  height?: number;
+}
+interface BackgroundMediaHolder {
+  backgroundMedia?: {
+    url?: string;
+    metaData?: MediaMeta;
+  };
+}
+interface CmsSlot {
+  data?: { media?: { url?: string } } | unknown;
+}
+interface CmsBlock extends BackgroundMediaHolder {
+  slots?: CmsSlot[];
+}
+interface CmsSection extends BackgroundMediaHolder {
+  blocks?: CmsBlock[];
+}
+/**
+ * Finds the first visible image URL in CMS page sections by scanning:
+ * 1. Section background images
+ * 2. Block background images
+ * 3. Image element media (slot data)
+ *
+ * Returns the URL with optimized format/quality params applied,
+ * or undefined if no image is found.
+ */
+export function findFirstCmsImageUrl(
+  sections: CmsSection[],
+  options?: { format?: string; quality?: number },
+): string | undefined {
+  for (const section of sections) {
+    // 1. Section background
+    if (section.backgroundMedia?.url) {
+      return getBackgroundImageUrl(
+        `url("${section.backgroundMedia.url}")`,
+        section,
+        options,
+      ).replace(/^url\("([^"]+)"\)$/, "$1");
+    }
+    if (!section.blocks) continue;
+    for (const block of section.blocks) {
+      // 2. Block background
+      if (block.backgroundMedia?.url) {
+        return getBackgroundImageUrl(
+          `url("${block.backgroundMedia.url}")`,
+          block,
+          options,
+        ).replace(/^url\("([^"]+)"\)$/, "$1");
+      }
+      if (!block.slots) continue;
+      for (const slot of block.slots) {
+        // 3. Image element media
+        const media = (slot.data as { media?: { url?: string } })?.media;
+        if (media?.url) {
+          try {
+            const url = new URL(media.url);
+            if (options?.format) {
+              url.searchParams.set("format", options.format);
+            }
+            if (typeof options?.quality === "number") {
+              url.searchParams.set("quality", String(options.quality));
+            }
+            return url.toString();
+          } catch {
+            return media.url;
+          }
+        }
+      }
+    }
+  }
+  return undefined;
+}

package/app/helpers/cms/getImageSizes.test.ts ADDED Viewed

@@ -0,0 +1,50 @@
+import { describe, expect, it } from "vitest";
+import { getImageSizes } from "./getImageSizes";
+describe("getImageSizes", () => {
+  it("should return sizes for 1 slot", () => {
+    expect(getImageSizes(1)).toBe("(max-width: 768px) 100vw, 100vw");
+  });
+  it("should return sizes for 2 slots", () => {
+    expect(getImageSizes(2)).toBe("(max-width: 768px) 100vw, 50vw");
+  });
+  it("should return sizes for 3 slots", () => {
+    expect(getImageSizes(3)).toBe("(max-width: 768px) 100vw, 33vw");
+  });
+  it("should return default sizes for slot count > 3", () => {
+    expect(getImageSizes(4)).toBe("(max-width: 768px) 50vw, 25vw");
+  });
+  it("should return default sizes for slot count 0", () => {
+    expect(getImageSizes(0)).toBe("(max-width: 768px) 50vw, 25vw");
+  });
+  it("should use custom config overrides", () => {
+    const config = {
+      1: "100vw",
+      2: "50vw",
+    };
+    expect(getImageSizes(1, config)).toBe("100vw");
+    expect(getImageSizes(2, config)).toBe("50vw");
+  });
+  it("should fall back to custom default from config", () => {
+    const config = {
+      default: "80vw",
+    };
+    expect(getImageSizes(5, config)).toBe("80vw");
+  });
+  it("should fall back to 100vw when no default exists", () => {
+    const config = {
+      1: "100vw",
+    };
+    // Override default to empty by spreading — slot 5 not found, default not in config
+    // but DEFAULT_IMAGE_SIZES has a default, so config must explicitly remove it
+    // Actually, the spread keeps DEFAULT_IMAGE_SIZES.default unless overridden
+    expect(getImageSizes(5, config)).toBe("(max-width: 768px) 50vw, 25vw");
+  });
+});

package/app/helpers/cms/getImageSizes.ts ADDED Viewed

@@ -0,0 +1,36 @@
+/**
+ * Default mapping of CMS block slot count to responsive `sizes` attribute values.
+ * Used by CmsGenericBlock to provide sizing hints to child image elements.
+ *
+ * Can be overridden via `app.config.ts`:
+ * ```ts
+ * export default defineAppConfig({
+ *   imageSizes: {
+ *     1: "(max-width: 768px) 100vw, 1200px",
+ *     2: "(max-width: 768px) 100vw, 600px",
+ *   },
+ * });
+ * ```
+ */
+const DEFAULT_IMAGE_SIZES: Record<string, string> = {
+  1: "(max-width: 768px) 100vw, 100vw",
+  2: "(max-width: 768px) 100vw, 50vw",
+  3: "(max-width: 768px) 100vw, 33vw",
+  default: "(max-width: 768px) 50vw, 25vw",
+};
+/**
+ * Returns the responsive `sizes` attribute value for an image
+ * based on the number of slots in its parent CMS block.
+ *
+ * @param slotCount - Number of slots in the block
+ * @param config - Optional override map from app.config.ts (imageSizes)
+ * @returns A valid HTML `sizes` attribute string
+ */
+export function getImageSizes(
+  slotCount: number,
+  config?: Record<string, string>,
+): string {
+  const sizes = { ...DEFAULT_IMAGE_SIZES, ...config };
+  return sizes[slotCount] || sizes.default || "100vw";
+}

package/app/helpers/html-to-vue/ast.ts CHANGED Viewed

@@ -1,51 +1,80 @@
-//@ts-nocheck
 /**
  * Based on the https://github.com/HCESrl/html-to-vue
  */
+// @ts-expect-error - html-to-ast has type definition issues with package.json exports
 import { parse } from "html-to-ast";
 import type { NodeObject } from "./getOptionsFromNode";
+type ASTNode = NodeObject | NodeObject[];
+type VisitCallback = (
+  node: unknown,
+  parent: NodeObject | null,
+  key: string | null,
+  index: number | undefined,
+) => void;
+type ExtraComponentConfig = {
+  conditions: (node: NodeObject) => boolean;
+  renderer?: unknown;
+};
+export type RectifyConfig = {
+  extraComponentsMap?: Record<string, ExtraComponentConfig>;
+};
 /**
  * Visit each node in the AST - with callback (adapted from https://lihautan.com/manipulating-ast-with-javascript/)
- * @param {*} ast html-parse-stringify AST
- * @param {*} callback
+ * @param ast html-parse-stringify AST
+ * @param callback
  */
-function _visitAST(ast, callback) {
-  function _visit(node, parent, key, index) {
+function _visitAST(ast: ASTNode, callback: VisitCallback): void {
+  function _visit(
+    node: unknown,
+    parent: NodeObject | null,
+    key: string | null,
+    index: number | undefined,
+  ): void {
     callback(node, parent, key, index);
     if (Array.isArray(node)) {
       // node is an array
-      node.forEach((value, index) => {
-        _visit.call(this, value, node, null, index);
+      node.forEach((value, idx) => {
+        _visit(value, node as unknown as NodeObject, null, idx);
       });
     } else if (isNode(node)) {
       const keys = Object.keys(node);
       for (let i = 0; i < keys.length; i++) {
-        const child = node[keys[i]];
+        const childKey = keys[i];
+        if (childKey === undefined) continue;
+        const child = (node as Record<string, unknown>)[childKey];
         if (Array.isArray(child)) {
           for (let j = 0; j < child.length; j++) {
-            _visit.call(this, child[j], node, key, j);
+            _visit(child[j], node, key, j);
           }
         } else if (isNode(child)) {
-          _visit.call(this, child, node, key, undefined);
+          _visit(child, node, key, undefined);
         }
       }
     }
   }
-  _visit.call(this, ast, null, undefined, undefined);
+  _visit(ast, null, null, undefined);
 }
 /**
  *
  * @param node html-parse-stringify AST node
- * @returns {boolean|boolean}
+ * @returns {boolean}
  */
-export function isNode(node: NodeObject) {
-  return typeof node === "object" && typeof node.type !== "undefined";
+export function isNode(node: unknown): node is NodeObject {
+  return (
+    typeof node === "object" &&
+    node !== null &&
+    typeof (node as NodeObject).type !== "undefined"
+  );
 }
-export function generateAST(html) {
-  return parse(html);
+export function generateAST(html: string): ASTNode {
+  return parse(html) as ASTNode;
 }
 /**
@@ -54,16 +83,21 @@ export function generateAST(html) {
  * @param config
  * @returns {*}
  */
-export function rectifyAST(ast, config) {
-  const _ast = JSON.parse(JSON.stringify(ast));
+export function rectifyAST(ast: ASTNode, config: RectifyConfig): ASTNode {
+  const _ast = JSON.parse(JSON.stringify(ast)) as ASTNode;
   const keys = config.extraComponentsMap
     ? Object.keys(config.extraComponentsMap)
     : [];
   _visitAST(_ast, (node) => {
+    if (!isNode(node)) {
+      return;
+    }
     // checking whether the AST has some components that has to become Vue Components
     for (let i = 0; i < keys.length; i++) {
       const currentKey = keys[i];
-      if (config.extraComponentsMap[currentKey].conditions(node)) {
+      if (currentKey === undefined) continue;
+      const componentConfig = config.extraComponentsMap?.[currentKey];
+      if (componentConfig?.conditions(node)) {
         node.name = currentKey;
       }
     }

package/app/helpers/html-to-vue/getOptionsFromNode.ts CHANGED Viewed

@@ -7,7 +7,7 @@ export type NodeObject = {
   content: string;
 };
-type Options = {
+export type Options = {
   align?: string;
   attrs: Record<string, string>;
   class?: string;

package/app/helpers/html-to-vue/renderToHtml.ts CHANGED Viewed

@@ -3,17 +3,10 @@
  */
 import type { ComponentInternalInstance, h } from "vue";
-import { generateAST, rectifyAST } from "./ast";
-import { renderer } from "./renderer";
+import { type RectifyConfig, generateAST, rectifyAST } from "./ast";
+import { type RendererConfig, renderer } from "./renderer";
-type DefaultConfig = {
-  container: {
-    type: string;
-  };
-  extraComponentsMap: Record<string, unknown>;
-  renderAnyway: boolean;
-  textTransformer: (text: string) => string;
-};
+type DefaultConfig = RendererConfig;
 const defaultConfig: DefaultConfig = {
   container: {
@@ -33,7 +26,10 @@ export function renderHtml(
 ) {
   const mergedConfig = Object.assign(defaultConfig, config);
   const _ast = generateAST(html);
-  const _rectifiedAst = rectifyAST(_ast, config);
+  const rectifyConfig: RectifyConfig = {
+    extraComponentsMap: config.extraComponentsMap,
+  };
+  const _rectifiedAst = rectifyAST(_ast, rectifyConfig);
   return renderer(
     _rectifiedAst,

package/app/helpers/html-to-vue/renderer.ts CHANGED Viewed

@@ -1,26 +1,86 @@
-//@ts-nocheck
 /**
  * Based on the https://github.com/HCESrl/html-to-vue
  */
+import type { ComponentInternalInstance, VNode } from "vue";
 import { isNode } from "./ast";
+import type { NodeObject } from "./getOptionsFromNode";
 import { getOptionsFromNode } from "./getOptionsFromNode";
+type ASTNode = NodeObject | NodeObject[];
+type RawChildren = string | number | boolean | VNode;
+type ExtraComponentRenderer = (
+  node: NodeObject,
+  children: RawChildren[],
+  createElement: typeof import("vue").h,
+  context: ComponentInternalInstance | null,
+) => VNode;
+export type ExtraComponentConfig = {
+  conditions: (node: NodeObject) => boolean;
+  renderer: ExtraComponentRenderer;
+};
+export type RendererConfig = {
+  container: {
+    type: string;
+  };
+  extraComponentsMap: Record<string, ExtraComponentConfig>;
+  renderAnyway: boolean;
+  textTransformer: (text: string) => string;
+};
+function flattenChildren(
+  children: RawChildren | RawChildren[] | undefined,
+): RawChildren[] {
+  if (children === undefined) {
+    return [];
+  }
+  if (Array.isArray(children)) {
+    const result: RawChildren[] = [];
+    for (const child of children) {
+      if (child !== null && child !== undefined) {
+        if (Array.isArray(child)) {
+          result.push(...flattenChildren(child));
+        } else {
+          result.push(child);
+        }
+      }
+    }
+    return result;
+  }
+  return [children];
+}
 /**
  * rendering the ast into vue render functions
- * @param {*} ast AST generated by html-parse-stringify
- * @param {*} config our configuration
- * @param {*} createElement vue's createElement
- * @param {*} context vue functional component context
+ * @param ast AST generated by html-parse-stringify
+ * @param config our configuration
+ * @param createElement vue's createElement
+ * @param context vue functional component context
+ * @param resolveUrl function to resolve URLs
  */
-export function renderer(ast, config, createElement, context, resolveUrl) {
-  function _render(h, node) {
+export function renderer(
+  ast: ASTNode,
+  config: RendererConfig,
+  createElement: typeof import("vue").h,
+  context: ComponentInternalInstance | null,
+  resolveUrl: (url: string) => string,
+): VNode {
+  function _render(
+    h: typeof createElement,
+    node: unknown,
+  ): RawChildren | RawChildren[] | undefined {
     if (Array.isArray(node)) {
-      const nodes = [];
+      const nodes: RawChildren[] = [];
       // node is an array
-      node.forEach((subnode, index) => {
-        nodes.push(_render.call(this, h, subnode, node, null, index, h));
-      });
+      for (const subnode of node) {
+        const rendered = _render(h, subnode);
+        const flattened = flattenChildren(rendered);
+        nodes.push(...flattened);
+      }
       return nodes;
     }
@@ -31,26 +91,26 @@ export function renderer(ast, config, createElement, context, resolveUrl) {
       }
       if (node.type === "tag") {
         const transformedNode = getOptionsFromNode(node, resolveUrl);
-        const children = [];
-        node.children.forEach((child, index) => {
-          children.push(_render.call(this, h, child, transformedNode, index));
-        });
+        const children: RawChildren[] = [];
+        for (const child of node.children) {
+          const rendered = _render(h, child);
+          const flattened = flattenChildren(rendered);
+          children.push(...flattened);
+        }
         // if it's an extra component use custom renderer
-        if (typeof config.extraComponentsMap[node.name] !== "undefined") {
-          return config.extraComponentsMap[node.name].renderer.call(
-            this,
-            transformedNode,
-            children,
-            h,
-            context,
-          );
+        const componentConfig = config.extraComponentsMap[node.name];
+        if (componentConfig !== undefined) {
+          return componentConfig.renderer(node, children, h, context);
         }
         // else, create normal html element
         return h(node.name, transformedNode, [...children]);
       }
     }
+    return undefined;
   }
-  return createElement(config.container.type, context.data, [
-    ..._render.call(this, createElement, ast),
-  ]);
+  const rendered = _render(createElement, ast);
+  const children = flattenChildren(rendered);
+  return createElement(config.container.type, context?.data || {}, children);
 }

package/index.d.ts CHANGED Viewed

@@ -3,10 +3,42 @@
 export * from "@shopware/composables";
 export * from "./.nuxt/imports";
+type CmsBaseLayerAppConfig = {
+  /** Placeholder shown while CMS images are loading */
+  imagePlaceholder?: {
+    /** CSS color value for the placeholder background */
+    color?: string;
+  };
+  /** CDN optimization options applied to CMS background images and synthetic srcsets */
+  backgroundImage?: {
+    /** Output format passed to the CDN (e.g. "webp", "avif") */
+    format?: string;
+    /** Image quality 1-100 passed to the CDN */
+    quality?: number;
+  };
+  /** Preload the first CMS image as a likely LCP candidate */
+  lcpImagePreload?: boolean;
+  /**
+   * Maps CMS block slot count to a responsive `sizes` attribute value.
+   * Used by CmsGenericBlock to provide sizing hints to child image elements.
+   * @example
+   * ```ts
+   * imageSizes: {
+   *   1: "(max-width: 768px) 100vw, 100vw",
+   *   2: "(max-width: 768px) 100vw, 50vw",
+   *   default: "(max-width: 768px) 50vw, 25vw",
+   * }
+   * ```
+   */
+  imageSizes?: Record<string | number, string>;
+};
 declare module "nuxt/schema" {
-  interface AppConfig {
-    imagePlaceholder?: {
-      color?: string;
-    };
-  }
+  interface AppConfig extends CmsBaseLayerAppConfig {}
+  interface AppConfigInput extends CmsBaseLayerAppConfig {}
+}
+declare module "@nuxt/schema" {
+  interface AppConfig extends CmsBaseLayerAppConfig {}
+  interface AppConfigInput extends CmsBaseLayerAppConfig {}
 }

package/nuxt.config.ts CHANGED Viewed

@@ -5,8 +5,28 @@ import { defineNuxtConfig } from "nuxt/config";
 const { resolve: resolveLayer } = createResolver(import.meta.url);
 export default defineNuxtConfig({
+  // @tresjs/nuxt is not included here because SwMedia3D is excluded from auto-import
+  // to prevent bundling heavy 3D libraries in the initial bundle.
+  // If you need 3D support, add "@tresjs/nuxt" to your app's nuxt.config.ts modules array
+  // and dynamically import SwMedia3D using defineAsyncComponent.
   modules: ["@unocss/nuxt", "@nuxt/image"],
+  hooks: {
+    "components:extend"(components) {
+      // Exclude SwMedia3D from auto-import to prevent bundling heavy 3D libraries
+      // It should be dynamically imported when needed using defineAsyncComponent.
+      const index = components.findIndex(
+        (c) =>
+          c.pascalName === "SwMedia3D" ||
+          c.kebabName === "sw-media3-d" ||
+          c.filePath?.includes("SwMedia3D.vue"),
+      );
+      if (index > -1) {
+        components.splice(index, 1);
+      }
+    },
+  },
   // @ts-ignore - @nuxt/image config may not be typed in some layer contexts
   image: {
     quality: 90,
@@ -91,6 +111,11 @@ export default defineNuxtConfig({
   build: {
     transpile: ["@shopware/cms-base-layer"],
   },
+  vite: {
+    optimizeDeps: {
+      include: ["xss"],
+    },
+  },
   telemetry: {
     enabled: false,
   },