@nuxt/hints 0.0.0 → 1.0.0-alpha.1

package/dist/module.mjs

@@ -0,0 +1,105 @@
+import { addDevServerHandler, defineNuxtModule, createResolver, addPlugin, addBuildPlugin, addComponent, addServerPlugin } from '@nuxt/kit';
+import { existsSync } from 'node:fs';
+import { eventHandler, proxyRequest } from 'h3';
+import MagicString from 'magic-string';
+import { createUnplugin } from 'unplugin';
+
+const DEVTOOLS_UI_ROUTE = "/__nuxt-hints";
+const DEVTOOLS_UI_LOCAL_PORT = 3300;
+function setupDevToolsUI(nuxt, resolver) {
+  const clientPath = resolver.resolve("./client");
+  const isProductionBuild = existsSync(clientPath);
+  if (isProductionBuild) {
+    nuxt.hook("vite:serverCreated", async (server) => {
+      const sirv = await import('sirv').then((r) => r.default || r);
+      server.middlewares.use(
+        DEVTOOLS_UI_ROUTE,
+        sirv(clientPath, { dev: true, single: true })
+      );
+    });
+  } else {
+    addDevServerHandler({
+      route: DEVTOOLS_UI_ROUTE,
+      handler: eventHandler((e) => {
+        return proxyRequest(e, "http://localhost:" + DEVTOOLS_UI_LOCAL_PORT + DEVTOOLS_UI_ROUTE + e.path);
+      })
+    });
+  }
+  nuxt.hook("devtools:customTabs", (tabs) => {
+    tabs.push({
+      name: "hints",
+      title: "Hints",
+      icon: "carbon:idea",
+      category: "analyze",
+      view: {
+        type: "iframe",
+        src: DEVTOOLS_UI_ROUTE
+      }
+    });
+  });
+}
+
+const InjectHydrationPlugin = createUnplugin(() => {
+  return {
+    name: "@nuxt/hints:inject-hydration-check",
+    enforce: "pre",
+    transformInclude(id) {
+      return id.endsWith(".vue") && !id.includes("node_modules");
+    },
+    transform(code) {
+      const m = new MagicString(code);
+      const re = /<script\s+setup[^>]*>/g;
+      const match = re.exec(code);
+      if (!match) {
+        return code;
+      }
+      m.appendRight(
+        match.index + match[0].length,
+        `
+import { useHydrationCheck } from '@nuxt/hints/runtime/composables/hydration'
+useHydrationCheck();`
+      );
+      return {
+        code: m.toString(),
+        map: m.generateMap({ hires: true })
+      };
+    }
+  };
+});
+
+const module = defineNuxtModule({
+  meta: {
+    name: "@nuxt/hints",
+    configKey: "hints"
+  },
+  defaults: {
+    devtools: true
+  },
+  setup(options, nuxt) {
+    if (!nuxt.options.dev) {
+      return;
+    }
+    const resolver = createResolver(import.meta.url);
+    addPlugin(resolver.resolve("./runtime/plugins/web-vitals/plugin.client"));
+    addPlugin(resolver.resolve("./runtime/plugins/hydration/plugin.client"));
+    addBuildPlugin(InjectHydrationPlugin);
+    addComponent({
+      name: "NuxtIsland",
+      filePath: resolver.resolve("./runtime/components/nuxt-island"),
+      priority: 1e3
+    });
+    addPlugin(resolver.resolve("./runtime/plugins/third-party-scripts/plugin.client"));
+    addServerPlugin(resolver.resolve("./runtime/plugins/third-party-scripts/nitro.plugin"));
+    nuxt.hook("prepare:types", ({ references }) => {
+      references.push({
+        types: resolver.resolve("./runtime/types.d.ts")
+      });
+    });
+    if (options.devtools) {
+      setupDevToolsUI(nuxt, resolver);
+      addPlugin(resolver.resolve("./runtime/plugins/vue-tracer-state.client"));
+    }
+  }
+});
+
+export { module as default };

package/dist/runtime/components/nuxt-island.d.ts

@@ -0,0 +1,137 @@
+declare const HintsNuxtIsland: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
+        name: {
+            type: StringConstructor;
+            required: true;
+        };
+        lazy: BooleanConstructor;
+        props: {
+            type: ObjectConstructor;
+            default: () => undefined;
+        };
+        context: {
+            type: ObjectConstructor;
+            default: () => {};
+        };
+        scopeId: {
+            type: import("vue").PropType<string | undefined | null>;
+            default: () => undefined;
+        };
+        source: {
+            type: StringConstructor;
+            default: () => undefined;
+        };
+        dangerouslyLoadClientComponents: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & Readonly<{
+        onError?: ((...args: any[]) => any) | undefined;
+    }>, (_ctx: any, _cache: any) => (import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>[])[] | import("vue").VNode<any, any, {
+        [key: string]: any;
+    }>[], {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "error"[], import("vue").PublicProps, {
+        props: Record<string, any>;
+        source: string;
+        scopeId: string | null | undefined;
+        lazy: boolean;
+        context: Record<string, any>;
+        dangerouslyLoadClientComponents: boolean;
+    }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("vue").ExtractPropTypes<{
+        name: {
+            type: StringConstructor;
+            required: true;
+        };
+        lazy: BooleanConstructor;
+        props: {
+            type: ObjectConstructor;
+            default: () => undefined;
+        };
+        context: {
+            type: ObjectConstructor;
+            default: () => {};
+        };
+        scopeId: {
+            type: import("vue").PropType<string | undefined | null>;
+            default: () => undefined;
+        };
+        source: {
+            type: StringConstructor;
+            default: () => undefined;
+        };
+        dangerouslyLoadClientComponents: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & Readonly<{
+        onError?: ((...args: any[]) => any) | undefined;
+    }>, (_ctx: any, _cache: any) => (import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>[])[] | import("vue").VNode<any, any, {
+        [key: string]: any;
+    }>[], {}, {}, {}, {
+        props: Record<string, any>;
+        source: string;
+        scopeId: string | null | undefined;
+        lazy: boolean;
+        context: Record<string, any>;
+        dangerouslyLoadClientComponents: boolean;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    lazy: BooleanConstructor;
+    props: {
+        type: ObjectConstructor;
+        default: () => undefined;
+    };
+    context: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    scopeId: {
+        type: import("vue").PropType<string | undefined | null>;
+        default: () => undefined;
+    };
+    source: {
+        type: StringConstructor;
+        default: () => undefined;
+    };
+    dangerouslyLoadClientComponents: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onError?: ((...args: any[]) => any) | undefined;
+}>, (_ctx: any, _cache: any) => (import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[])[] | import("vue").VNode<any, any, {
+    [key: string]: any;
+}>[], {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "error"[], "error", {
+    props: Record<string, any>;
+    source: string;
+    scopeId: string | null | undefined;
+    lazy: boolean;
+    context: Record<string, any>;
+    dangerouslyLoadClientComponents: boolean;
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+export default HintsNuxtIsland;

package/dist/runtime/components/nuxt-island.js

@@ -0,0 +1,14 @@
+import NuxtIsland from "#app/components/nuxt-island";
+import { useNuxtApp } from "#imports";
+const originalSetup = NuxtIsland.setup;
+const HintsNuxtIsland = Object.assign({}, NuxtIsland, {
+  setup(props, ctx) {
+    if (useNuxtApp().ssrContext?.islandContext) {
+      console.warn(
+        `[@nuxt/hints] Nesting islands within islands is not recommanded for performance reasons. This leads to waterfall calls.`
+      );
+    }
+    return originalSetup(props, ctx);
+  }
+});
+export default HintsNuxtIsland;

package/dist/runtime/composables/devtoolsData.d.ts

@@ -0,0 +1,7 @@
+import type { ImagePerformanceIssueDetails } from '../plugins/web-vitals/utils.js';
+export type ImagePerformanceData = {
+    componentLocation: string | undefined;
+    issues: ImagePerformanceIssueDetails[];
+    element: HTMLImageElement | HTMLElement;
+};
+export declare function useHintIssues(): unknown;

package/dist/runtime/composables/devtoolsData.js

@@ -0,0 +1,12 @@
+import { ref } from "vue";
+import { useNuxtApp } from "#app";
+export function useHintIssues() {
+  const nuxtApp = useNuxtApp();
+  if (nuxtApp.__hintsPerformances) {
+    return nuxtApp.__hintsPerformances;
+  }
+  nuxtApp.__hintsPerformances = {
+    imagePerformances: ref([])
+  };
+  return nuxtApp.__hintsPerformances;
+}

package/dist/runtime/composables/hydration.d.ts

@@ -0,0 +1,5 @@
+/**
+ * prefer implementing onMismatch hook after vue 3.6
+ * compare element
+ */
+export declare function useHydrationCheck(): void;

package/dist/runtime/composables/hydration.js

@@ -0,0 +1,46 @@
+import { getCurrentInstance, onMounted } from "vue";
+import { useNuxtApp } from "#imports";
+function formatHTML(html) {
+  if (!html) return "";
+  let formatted = "";
+  let indent = 0;
+  const tags = html.split(/(<\/?[^>]+>)/g);
+  for (const tag of tags) {
+    if (!tag.trim()) continue;
+    if (tag.startsWith("</")) {
+      indent--;
+      formatted += "\n" + "  ".repeat(Math.max(0, indent)) + tag;
+    } else if (tag.startsWith("<") && !tag.endsWith("/>") && !tag.includes("<!")) {
+      formatted += "\n" + "  ".repeat(indent) + tag;
+      indent++;
+    } else if (tag.startsWith("<")) {
+      formatted += "\n" + "  ".repeat(indent) + tag;
+    } else {
+      formatted += "\n" + "  ".repeat(indent) + tag.trim();
+    }
+  }
+  return formatted.trim();
+}
+export function useHydrationCheck() {
+  if (import.meta.server) return;
+  const nuxtApp = useNuxtApp();
+  if (!nuxtApp.isHydrating) {
+    return;
+  }
+  const instance = getCurrentInstance();
+  if (!instance) return;
+  const htmlPrehydration = formatHTML(instance.vnode.el?.outerHTML);
+  const vnodePrehydration = instance.vnode;
+  onMounted(() => {
+    const htmlPostHydration = formatHTML(instance.vnode.el?.outerHTML);
+    if (htmlPrehydration !== htmlPostHydration) {
+      nuxtApp.__hints.hydration.push({
+        instance,
+        vnode: vnodePrehydration,
+        htmlPreHydration: htmlPrehydration,
+        htmlPostHydration
+      });
+      console.warn(`[nuxt/hints:hydration] Component ${instance.type.name ?? instance.type.displayName ?? instance.type.__name ?? instance.type.__file} seems to have different html pre and post-hydration. Please make sure you don't have any hydration issue.`);
+    }
+  });
+}

package/dist/runtime/plugins/hydration/plugin.client.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugins/hydration/plugin.client.js

@@ -0,0 +1,11 @@
+import { defineNuxtPlugin, useNuxtApp } from "#imports";
+import { defu } from "defu";
+export default defineNuxtPlugin({
+  name: "@nuxt/hints:hydration",
+  setup() {
+    const nuxtApp = useNuxtApp();
+    nuxtApp.__hints = defu(nuxtApp.__hints, {
+      hydration: []
+    });
+  }
+});

package/dist/runtime/plugins/third-party-scripts/nitro.plugin.d.ts

@@ -0,0 +1,2 @@
+import type { NitroApp } from 'nitropack/types';
+export default function (nitroApp: NitroApp): void;

package/dist/runtime/plugins/third-party-scripts/nitro.plugin.js

@@ -0,0 +1,48 @@
+export default function(nitroApp) {
+  nitroApp.hooks.hook("render:html", ({ head }) => {
+    head.unshift(`
+<script>
+window.__hints_TPC_start_time = Date.now();
+
+function __hints_TPC_saveTime(script, startTime) {
+    script.__hints_TPC_end_time = Date.now();
+    const scriptStartTime = startTime || script.__hints_TPC_start_time || window.__hints_TPC_start_time;
+    
+    const resourceEntries = performance.getEntriesByName(script.src)
+    const scriptEntry = resourceEntries.find(entry => entry.name === script.src)
+
+    if (scriptEntry) {
+        // Calculate parse + execute time using modern API
+        const navigationEntry = performance.getEntriesByType('navigation')[0]
+        const navigationStart = navigationEntry ? performance.timeOrigin : performance.timeOrigin
+        
+        script.requestTime = (scriptEntry.responseStart - scriptEntry.requestStart);
+        script.downloadTime = (scriptEntry.responseEnd - scriptEntry.responseStart);
+        script.totalNetworkTime = (scriptEntry.responseEnd - scriptEntry.startTime);
+        script.parseExecuteTime =  script.__hints_TPC_end_time - (navigationStart + scriptEntry.responseEnd);
+        script.loaded = true;
+        console.log('[@nuxt/hints]: \u{1F4CA} Detailed timing for', script.src, {
+            'Request': script.requestTime.toFixed(2) + 'ms',
+            'Download': script.downloadTime.toFixed(2) + 'ms',
+            'Total Network': script.totalNetworkTime.toFixed(2) + 'ms',
+            'Parse + Execute': script.parseExecuteTime.toFixed(2) + 'ms'
+        });
+    }
+}
+<\/script>
+`);
+    head.push(`
+<script>
+for (const script of document.scripts) {
+    if (script.src && !script.src.startsWith(window.location.origin)) {
+        script.__hints_TPC_start_time = window.__hints_TPC_start_time || Date.now();
+        script.onload = function(_) {
+            __hints_TPC_saveTime(script, script.__hints_TPC_start_time);
+        }
+        __hints_TPC_saveTime(script, script.__hints_TPC_start_time);
+    }
+}
+<\/script>
+  `);
+  });
+}

package/dist/runtime/plugins/third-party-scripts/plugin.client.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugins/third-party-scripts/plugin.client.js

@@ -0,0 +1,71 @@
+import { defineNuxtPlugin, ref, useNuxtApp } from "#imports";
+export default defineNuxtPlugin({
+  name: "nuxt-hints:third-party-scripts",
+  setup() {
+    const nuxtApp = useNuxtApp();
+    const scripts = nuxtApp.__hints_tpc = ref([]);
+    const isUsingNuxtScripts = !!nuxtApp.$scripts;
+    nuxtApp.hook("hints:scripts:added", (script) => {
+      scripts.value.push({ element: script, loaded: false });
+    });
+    nuxtApp.hook("hints:scripts:loaded", (script) => {
+      const existingScript = scripts.value.find((s) => s.element === script);
+      if (existingScript) {
+        existingScript.loaded = true;
+      } else {
+        console.warn(`[@nuxt/hints]: Script loaded event received for a script not tracked: ${script.src}. Please open an issue with a minimal reproduction if you think this is a bug.`);
+        scripts.value.push({ element: script, loaded: true });
+      }
+    });
+    nuxtApp.hooks.hookOnce("app:mounted", () => {
+      let hasThirdPartyScript = false;
+      for (const script of document.scripts) {
+        if (script.src && !script.src.startsWith(window.location.origin)) {
+          hasThirdPartyScript = true;
+          onScriptAdded(script);
+        }
+      }
+      if (hasThirdPartyScript && !isUsingNuxtScripts) {
+        console.info("\u2139\uFE0F [@nuxt/hints]: Third-party scripts detected on page load: consider using @nuxt/scripts");
+      }
+    });
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === "childList") {
+          for (const node of mutation.addedNodes) {
+            if (isScript(node) && node.src && !node.src.startsWith(window.location.origin)) {
+              onScriptAdded(node);
+            }
+          }
+        }
+      }
+    });
+    observer.observe(document.documentElement, {
+      childList: true,
+      subtree: true
+    });
+    function onScriptAdded(script) {
+      if (script.src.startsWith("chrome-extension")) {
+        return;
+      }
+      if (!script.crossOrigin) {
+        console.warn(`[@nuxt/hints]: Third-party script "${script.src}" is missing crossorigin attribute. Consider adding crossorigin="anonymous" for better security and error reporting.`);
+      }
+      nuxtApp.callHook("hints:scripts:added", script).then(() => {
+        if (!script.loaded) {
+          script.onload = () => {
+            window.__hints_TPC_saveTime(script, script.__hints_TPC_start_time);
+            nuxtApp.callHook("hints:scripts:loaded", script);
+          };
+        } else {
+          window.__hints_TPC_saveTime(script, script.__hints_TPC_start_time);
+          nuxtApp.callHook("hints:scripts:loaded", script);
+        }
+      });
+      console.info(`\u2139\uFE0F [@nuxt/hints]: Dynamically added third-party script detected: ${script.src}`);
+    }
+  }
+});
+function isScript(node) {
+  return node.nodeName === "SCRIPT";
+}

package/dist/runtime/plugins/vue-tracer-state.client.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugins/vue-tracer-state.client.js

@@ -0,0 +1,7 @@
+import * as tracerOverlay from "vite-plugin-vue-tracer/client/overlay";
+import * as tracerRecord from "vite-plugin-vue-tracer/client/record";
+import { defineNuxtPlugin } from "#imports";
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.__tracerOverlay = tracerOverlay;
+  nuxtApp.__tracerRecord = tracerRecord;
+});

package/dist/runtime/plugins/web-vitals/plugin.client.d.ts

@@ -0,0 +1,13 @@
+declare global {
+    interface PerformanceEntry {
+        element?: HTMLElement;
+        sources?: {
+            node: HTMLElement;
+            currentRect: DOMRect;
+            previousRect: DOMRect;
+        }[];
+        value?: number;
+    }
+}
+declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugins/web-vitals/plugin.client.js

@@ -0,0 +1,137 @@
+import { defineNuxtPlugin, useNuxtApp } from "#imports";
+import { onINP, onLCP, onCLS } from "web-vitals/attribution";
+import { defu } from "defu";
+import { ref } from "vue";
+function isImgElement(element) {
+  return element instanceof Element && element.tagName === "IMG";
+}
+export default defineNuxtPlugin({
+  name: "nuxt-hints:performance",
+  setup() {
+    const nuxtApp = useNuxtApp();
+    nuxtApp.__hints = defu(nuxtApp.__hints, {
+      webvitals: {
+        lcp: ref([]),
+        inp: ref([]),
+        cls: ref([])
+      }
+    });
+    nuxtApp.hook("hints:webvitals:sync", (webvitals) => {
+      webvitals.lcp.value = [...nuxtApp.__hints.webvitals.lcp.value];
+      webvitals.inp.value = [...nuxtApp.__hints.webvitals.inp.value];
+      webvitals.cls.value = [...nuxtApp.__hints.webvitals.cls.value];
+    });
+    nuxtApp.hook("app:mounted", () => {
+      onINP((metric) => {
+        if (metric.rating === "good") {
+          return;
+        }
+        console.info(
+          "[@nuxt/hints:web-vitals] INP Metric: ",
+          metric
+        );
+        nuxtApp.__hints.webvitals.inp.value.push(metric);
+        nuxtApp.callHook("hints:webvitals:inp", metric);
+      }, {
+        reportAllChanges: true
+      });
+      onLCP((metric) => {
+        if (metric.rating === "good") {
+          return;
+        }
+        console.info(
+          `[@nuxt/hints:web-vitals] LCP Metric: `,
+          metric
+        );
+        nuxtApp.__hints.webvitals.lcp.value.push(metric);
+        nuxtApp.callHook("hints:webvitals:lcp", metric);
+        for (const performanceEntry of metric.entries) {
+          if (!performanceEntry.element || !isImgElement(performanceEntry.element)) {
+            continue;
+          }
+          if (performanceEntry.element.attributes?.getNamedItem("loading")?.value === "lazy") {
+            console.warn(
+              '[@nuxt/hints:performance] LCP Element should not have `loading="lazy"` \n\n Learn more: https://web.dev/optimize-lcp/#optimize-the-priority-the-resource-is-given'
+            );
+          }
+          if (hasImageFormat(performanceEntry.element.src)) {
+            if (!performanceEntry.element.src.includes("webp") || !performanceEntry.element.src.includes("avif")) {
+              console.warn(
+                "[@nuxt/hints:performance] LCP Element can be served in a next gen format like `webp` or `avif` \n\n Learn more: https://web.dev/choose-the-right-image-format/ \n\n Use: https://image.nuxt.com/usage/nuxt-img#format"
+              );
+            }
+          }
+          if (performanceEntry.element.fetchPriority !== "high") {
+            console.warn(
+              '[@nuxt/hints:performance] LCP Element can have `fetchPriority="high"` to load as soon as possible \n\n Learn more: https://web.dev/optimize-lcp/#optimize-the-priority-the-resource-is-given'
+            );
+          }
+          if (!performanceEntry.element.attributes.getNamedItem("height") || !performanceEntry.element.attributes.getNamedItem("width")) {
+            console.warn(
+              "[@nuxt/hints:performance] Images should have `width` and `height` sizes set  \n\n Learn more: https://web.dev/optimize-cls/#images-without-dimensions \n\n Use: https://image.nuxt.com/usage/nuxt-img#width-height"
+            );
+          }
+          if (performanceEntry.startTime > 2500) {
+            console.warn(
+              `[@nuxt/hints:performance] LCP Element loaded in ${performanceEntry.startTime} miliseconds. Good result is below 2500 miliseconds 
+
+ Learn more: https://web.dev/lcp/#what-is-a-good-lcp-score`
+            );
+          }
+          if (!isElementPreloaded(performanceEntry.element.src)) {
+            console.warn(
+              "[@nuxt/hints:performance] LCP Element can be preloaded in `head` to improve load time \n\n Learn more: https://web.dev/optimize-lcp/#optimize-when-the-resource-is-discovered \n\n Use: https://image.nuxt.com/usage/nuxt-img#preload"
+            );
+          }
+        }
+      }, {
+        reportAllChanges: true
+      });
+      onCLS((metric) => {
+        if (metric.rating === "good") {
+          return;
+        }
+        console.info(
+          "[@nuxt/hints:web-vitals] CLS Metric: ",
+          metric
+        );
+        nuxtApp.callHook(
+          "hints:webvitals:cls",
+          metric
+        );
+        nuxtApp.__hints.webvitals.cls.value.push(metric);
+        for (const entry of metric.entries) {
+          const performanceEntry = entry;
+          if (!performanceEntry.sources?.[0]) return;
+          const sourceElement = performanceEntry.sources?.[0].node;
+          if (!sourceElement || sourceElement.parentElement?.className.includes("nuxt-devtools")) return;
+          console.info(
+            "[@nuxt/hints:performance] Potential CLS Element: ",
+            sourceElement
+          );
+          if ((performanceEntry.value ?? 0) > 0.1) {
+            console.warn(
+              `[@nuxt/hints:performance] CLS was ${performanceEntry.value}. Good result is below 0.1 
+
+ Learn more: https://web.dev/articles/cls#what-is-a-good-cls-score`
+            );
+          }
+          if (isImgElement(sourceElement) && (!sourceElement.attributes.getNamedItem("height") || !sourceElement.attributes.getNamedItem("width"))) {
+            console.warn(
+              "[@nuxt/hints:performance] Images should have `width` and `height` sizes set  \n\n Learn more: https://web.dev/optimize-cls/#images-without-dimensions \n\n Use: https://image.nuxt.com/usage/nuxt-img#width-height"
+            );
+          }
+        }
+      });
+    });
+  }
+});
+const hasImageFormat = (src) => {
+  const imageFormats = ["avif", "jpg", "jpeg", "png", "webp"];
+  return imageFormats.some((format) => src.includes(format));
+};
+const isElementPreloaded = (src) => {
+  return Array.from(document.head.childNodes).filter(
+    (el) => el.nodeName === "LINK" && el.attributes.href.value === src
+  ).length;
+};