nuxt-og-image 6.3.6 → 6.3.8

package/dist/module.d.ts

@@ -109,14 +109,15 @@ interface ModuleOptions {
      */
     emojiStrategy?: 'auto' | 'local' | 'fetch';
     /**
-     * Include query parameters in cache keys.
+     * Default cache duration in seconds for generated OG images.
      *
-     * When enabled, requests like `/page?foo=bar` will have a separate cache from `/page`.
-     * Enable this if your OG image content depends on query params.
+     * Controls the internal storage TTL, HTTP Cache-Control headers, and the
+     * auto-configured SWR route rule. Can be overridden per-image via
+     * `defineOgImage`'s `cacheMaxAgeSeconds` option.
      *
-     * @default false
+     * @default 60 * 60 * 24 * 3 (3 days)
      */
-    cacheQueryParams?: boolean;
+    cacheMaxAgeSeconds?: number;
     /**
      * Font subsets to download when resolving missing font families via fontless.
      *

package/dist/module.json

@@ -4,7 +4,7 @@
     "nuxt": ">=3.16.0"
   },
   "configKey": "ogImage",
-  "version": "6.3.6",
+  "version": "6.3.8",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -7,7 +7,7 @@ import 'nuxt-site-config/kit';
 import 'ohash';
 import 'pathe';
 import 'pkg-types';
-export { m as default } from './shared/nuxt-og-image.BWSGGMOE.mjs';
+export { m as default } from './shared/nuxt-og-image.caStlBVv.mjs';
 import 'nuxtseo-shared/kit';
 import '../dist/runtime/logger.js';
 import 'node:crypto';

package/dist/runtime/app/utils.js

@@ -98,8 +98,10 @@ export function createOgImageMeta(src, input, ssrContext, pagePath, head) {
         if (component?.hash)
           urlOpts._componentHash = component.hash;
         const result = buildOgImageUrl(urlOpts, extension, isStatic, defaults, ogImageConfig.security?.secret || void 0);
-        if (result.hash)
+        if (result.hash) {
           opts._hash = result.hash;
+          options._hash = result.hash;
+        }
         const resolvedUrl = joinURL("/", baseURL, result.url);
         const finalUrl = opts._query && Object.keys(opts._query).length ? withQuery(resolvedUrl, { _query: opts._query }) : resolvedUrl;
         if (isStatic && import.meta.prerender && ssrContext.event) {

package/dist/runtime/server/og-image/context.js

@@ -99,7 +99,7 @@ export async function resolveContext(e) {
     }
   }
   let queryParams = {};
-  if (!secret || import.meta.dev || import.meta.prerender) {
+  if (import.meta.dev || import.meta.prerender) {
     const query = getQuery(e);
     for (const k in query) {
       const v = String(query[k]);

package/dist/runtime/server/util/cache.d.ts

@@ -3,6 +3,7 @@ import type { OgImageRenderEventContext } from '../../types.js';
 export declare function useOgImageBufferCache(ctx: OgImageRenderEventContext, options: {
     baseCacheKey: string | false;
     cacheMaxAgeSeconds?: number;
+    secret?: string;
 }): Promise<void | H3Error | {
     cachedItem: false | BufferSource;
     enabled: boolean;

package/dist/runtime/server/util/cache.js

@@ -3,9 +3,19 @@ import { useStorage } from "nitropack/runtime";
 import { digest } from "ohash";
 import { withTrailingSlash } from "ufo";
 import { prefixStorage } from "unstorage";
+import { logger } from "../../logger.js";
+function safeCompare(a, b) {
+  if (a.length !== b.length)
+    return false;
+  let mismatch = 0;
+  for (let i = 0; i < a.length; i++)
+    mismatch |= a.charCodeAt(i) ^ b.charCodeAt(i);
+  return mismatch === 0;
+}
 export async function useOgImageBufferCache(ctx, options) {
   const maxAge = Number(options.cacheMaxAgeSeconds);
-  let enabled = !import.meta.dev && import.meta.env?.MODE !== "test" && maxAge > 0;
+  const intentionallyEnabled = !import.meta.dev && maxAge > 0;
+  let enabled = intentionallyEnabled;
   const cache = prefixStorage(useStorage(), withTrailingSlash(options.baseCacheKey || "/"));
   const key = ctx.key;
   let cachedItem = false;
@@ -25,7 +35,14 @@ export async function useOgImageBufferCache(ctx, options) {
         value: null,
         expiresAt: Date.now()
       }));
-      if (typeof getQuery(ctx.e).purge !== "undefined") {
+      const purgeValue = getQuery(ctx.e).purge;
+      if (typeof purgeValue !== "undefined") {
+        if (options.secret && !safeCompare(String(purgeValue), options.secret)) {
+          return createError({
+            statusCode: 403,
+            statusMessage: "[Nuxt OG Image] Invalid purge token. Provide the signing secret as ?purge=<secret>."
+          });
+        }
         await cache.removeItem(key).catch(() => {
         });
       } else if (expiresAt > Date.now()) {
@@ -38,6 +55,7 @@ export async function useOgImageBufferCache(ctx, options) {
           return;
         }
         setHeaders(ctx.e, headers);
+        setHeader(ctx.e, "X-OG-Cache", "HIT");
       } else {
         await cache.removeItem(key).catch(() => {
         });
@@ -53,6 +71,7 @@ export async function useOgImageBufferCache(ctx, options) {
     enabled,
     cachedItem,
     async update(item) {
+      setHeader(ctx.e, "X-OG-Cache", intentionallyEnabled ? "MISS" : "DISABLED");
       if (!enabled)
         return;
       const value = Buffer.from(item).toString("base64");
@@ -61,14 +80,14 @@ export async function useOgImageBufferCache(ctx, options) {
         "Vary": "accept-encoding, host",
         "etag": `W/"${digest(value)}"`,
         "last-modified": (/* @__PURE__ */ new Date()).toUTCString(),
-        "cache-control": `public, s-maxage=${maxAge}, stale-while-revalidate`
+        "cache-control": `public, max-age=${maxAge}, s-maxage=${maxAge}, stale-while-revalidate=${maxAge}, stale-if-error=${maxAge}`
       };
       setHeaders(ctx.e, headers);
       await cache.setItem(key, {
         value,
         headers,
         expiresAt: Date.now() + maxAge * 1e3
-      });
+      }).catch((err) => logger.warn(`[Nuxt OG Image] Failed to write cache for key "${key}": ${err?.message || err}`));
     }
   };
 }

package/dist/runtime/server/util/eventHandlers.js

@@ -82,6 +82,7 @@ export async function imageEventHandler(e) {
     case "png":
     case "jpeg":
     case "jpg":
+    case "webp":
       if (!renderer.supportedFormats.includes(extension)) {
         return createError({
           statusCode: 400,
@@ -102,7 +103,8 @@ export async function imageEventHandler(e) {
   }
   const cacheApi = await useOgImageBufferCache(ctx, {
     cacheMaxAgeSeconds: ctx.options.cacheMaxAgeSeconds,
-    baseCacheKey
+    baseCacheKey,
+    secret: security?.secret
   });
   if (typeof cacheApi === "undefined")
     return;
@@ -110,8 +112,7 @@ export async function imageEventHandler(e) {
     return cacheApi;
   let image = cacheApi.cachedItem;
   if (!image) {
-    const { security: security2 } = useOgImageRuntimeConfig();
-    const timeout = security2?.renderTimeout || 15e3;
+    const timeout = security?.renderTimeout || 15e3;
     let timer;
     image = await Promise.race([
       renderer.createImage(ctx),

package/dist/runtime/types.d.ts

@@ -38,7 +38,6 @@ export interface OgImageRuntimeConfig {
     colorPreference: 'light' | 'dark';
     isNuxtContentDocumentDriven: boolean;
     zeroRuntime: boolean;
-    cacheQueryParams: boolean;
     cssFramework: 'tailwind' | 'unocss' | 'none';
     componentDirs?: string[];
     /** Directory for persistent build cache (CI caching) */

package/dist/shared/{nuxt-og-image.BWSGGMOE.mjs → nuxt-og-image.caStlBVv.mjs}

@@ -2240,6 +2240,7 @@ function setupPrerenderHandler(options, resolve, getDetectedRenderers, nuxt = us
       orphanedOgHashes.push(route.route);
       route.skip = true;
       delete route.error;
+      route.contents = "";
     });
     nitro.hooks.hook("prerender:done", async () => {
       if (orphanedOgHashes.length > 0) {
@@ -2534,6 +2535,94 @@ const ATTRIBUTE_NODE = 6;
 const DIRECTIVE_NODE = 7;
 const RE_PURE_NUMBER = /^\d+(?:\.\d+)?$/;
 const RE_DOUBLE_QUOTE = /"/g;
+const RE_CAMEL_TO_KEBAB = /[A-Z]/g;
+const RE_STRIP_QUOTES = /^['"]|['"]$/g;
+const RE_SINGLE_QUOTED = /^'([^']*)'$/;
+const RE_DOUBLE_QUOTED = /^"([^"]*)"$/;
+const RE_BACKTICK_QUOTED = /^`([^`]*)`$/;
+const RE_CSS_NUMBER = /^[\d.]+(?:px|em|rem|%|vh|vw|ch|ex|vmin|vmax|pt|pc|in|cm|mm)?$/;
+function camelToKebab(str) {
+  return str.replace(RE_CAMEL_TO_KEBAB, (m) => `-${m.toLowerCase()}`);
+}
+function parseStaticStyleObject(expr) {
+  const trimmed = expr.trim();
+  if (!trimmed.startsWith("{") || !trimmed.endsWith("}"))
+    return void 0;
+  const inner = trimmed.slice(1, -1).trim();
+  if (!inner)
+    return {};
+  const result = {};
+  let depth = 0;
+  let inQuote = null;
+  let current = "";
+  for (let i = 0; i < inner.length; i++) {
+    const ch = inner[i];
+    if (inQuote) {
+      current += ch;
+      if (ch === inQuote && inner[i - 1] !== "\\")
+        inQuote = null;
+      continue;
+    }
+    if (ch === "'" || ch === '"' || ch === "`") {
+      inQuote = ch;
+      current += ch;
+      continue;
+    }
+    if (ch === "(" || ch === "[" || ch === "{") {
+      depth++;
+      current += ch;
+      continue;
+    }
+    if (ch === ")" || ch === "]" || ch === "}") {
+      depth--;
+      current += ch;
+      continue;
+    }
+    if (ch === "," && depth === 0) {
+      const parsed = parseStyleEntry(current);
+      if (!parsed)
+        return void 0;
+      result[parsed[0]] = parsed[1];
+      current = "";
+      continue;
+    }
+    current += ch;
+  }
+  if (current.trim()) {
+    const parsed = parseStyleEntry(current);
+    if (!parsed)
+      return void 0;
+    result[parsed[0]] = parsed[1];
+  }
+  return result;
+}
+function parseStyleEntry(entry) {
+  const colonIdx = entry.indexOf(":");
+  if (colonIdx === -1)
+    return void 0;
+  const rawKey = entry.slice(0, colonIdx).trim();
+  const rawValue = entry.slice(colonIdx + 1).trim();
+  const key = rawKey.replace(RE_STRIP_QUOTES, "");
+  if (!key)
+    return void 0;
+  let value;
+  const singleQuoteMatch = rawValue.match(RE_SINGLE_QUOTED);
+  const doubleQuoteMatch = rawValue.match(RE_DOUBLE_QUOTED);
+  const backtickMatch = rawValue.match(RE_BACKTICK_QUOTED);
+  const numberMatch = rawValue.match(RE_CSS_NUMBER);
+  if (singleQuoteMatch) {
+    value = singleQuoteMatch[1];
+  } else if (doubleQuoteMatch) {
+    value = doubleQuoteMatch[1];
+  } else if (backtickMatch && !backtickMatch[1].includes("${")) {
+    value = backtickMatch[1];
+  } else if (numberMatch) {
+    value = rawValue;
+  } else {
+    return void 0;
+  }
+  return [camelToKebab(key), value];
+}
 function escapeAttrValue(value) {
   return value.replace(RE_DOUBLE_QUOTE, "&quot;");
 }
@@ -2571,7 +2660,17 @@ async function transformVueTemplate(code, options) {
         }
       }
       if (prop.type === DIRECTIVE_NODE && prop.name === "bind" && prop.arg?.content === "style") {
-        collector.hasDynamicStyle = true;
+        const exp = prop.exp?.content;
+        if (exp) {
+          const parsed = parseStaticStyleObject(exp);
+          if (parsed) {
+            collector.dynamicStyleProps = parsed;
+            collector.dynamicStyleLoc = {
+              start: prop.loc.start.offset,
+              end: prop.loc.end.offset
+            };
+          }
+        }
       }
       if (prop.type === ATTRIBUTE_NODE && (prop.name === "width" || prop.name === "height") && prop.value && el.tag === "img") {
         if (!collector.dimensionAttrs)
@@ -2579,7 +2678,7 @@ async function transformVueTemplate(code, options) {
         collector.dimensionAttrs.push({ name: prop.name, value: prop.value.content });
       }
     }
-    if (collector.classes.length > 0 || collector.existingStyle || collector.dimensionAttrs?.length) {
+    if (collector.classes.length > 0 || collector.existingStyle || collector.dimensionAttrs?.length || collector.dynamicStyleProps) {
       if (collector.existingStyle && !collector.styleLoc) {
         logger.warn(`[vue-template-transform] BUG: existingStyle found but styleLoc is undefined!`);
       }
@@ -2620,6 +2719,9 @@ async function transformVueTemplate(code, options) {
         }
       }
     }
+    if (collector.dynamicStyleProps) {
+      Object.assign(styleProps, collector.dynamicStyleProps);
+    }
     if (styleProps.display === "flex" && !styleProps["flex-direction"]) {
       styleProps["flex-direction"] = "row";
     }
@@ -2628,7 +2730,8 @@ async function transformVueTemplate(code, options) {
     const hasUnresolved = unresolvedClasses.length > 0;
     const resolvedSome = collector.classes.length > 0 && (unresolvedClasses.length < collector.classes.length || hasClassRewrites);
     const styleChanged = collector.existingStyle && styleStr !== collector.existingStyle;
-    if (!resolvedSome && !styleChanged && !collector.dimensionAttrs?.length)
+    const hasDynamicStyleResolved = collector.dynamicStyleProps && Object.keys(collector.dynamicStyleProps).length > 0;
+    if (!resolvedSome && !styleChanged && !collector.dimensionAttrs?.length && !hasDynamicStyleResolved)
       continue;
     hasChanges = true;
     if (collector.classLoc) {
@@ -2638,6 +2741,9 @@ async function transformVueTemplate(code, options) {
         s.remove(collector.classLoc.start, collector.classLoc.end);
       }
     }
+    if (collector.dynamicStyleLoc) {
+      s.remove(collector.dynamicStyleLoc.start, collector.dynamicStyleLoc.end);
+    }
     if (hasResolvedStyles) {
       if (collector.styleLoc) {
         s.overwrite(collector.styleLoc.start, collector.styleLoc.end, `style="${styleStr}"`);
@@ -3549,6 +3655,7 @@ const REMOVED_CONFIG = {
   "runtimeSatori": "compatibility.runtime.satori",
   "cacheTtl": "cacheMaxAgeSeconds",
   "cache": "cacheMaxAgeSeconds",
+  "cacheQueryParams": "Removed (all options are encoded in the URL path)",
   "cacheKey": "Removed",
   "static": "zeroRuntime",
   "chromium-node": "compatibility.runtime.browser: 'playwright'",
@@ -3670,6 +3777,7 @@ const DEPRECATED_CONFIG = {
   runtimeSatori: "Use compatibility.runtime.satori",
   cacheTtl: "Use cacheMaxAgeSeconds",
   cache: "Use cacheMaxAgeSeconds",
+  cacheQueryParams: "Removed (all options are encoded in the URL path)",
   cacheKey: "Removed",
   static: "Removed - use zeroRuntime",
   fonts: "Use @nuxt/fonts module instead"
@@ -4216,6 +4324,10 @@ const module$1 = defineNuxtModule({
       logger.warn("Nuxt OG Image is enabled but SSR is disabled.\n\nYou should enable SSR (`ssr: true`) or disable the module (`ogImage: { enabled: false }`).");
       return;
     }
+    if (config.cacheMaxAgeSeconds != null) {
+      config.defaults = config.defaults || {};
+      config.defaults.cacheMaxAgeSeconds = config.cacheMaxAgeSeconds;
+    }
     if (config.debug && !nuxt.options.dev) {
       logger.warn("`ogImage.debug` is enabled in production. This exposes the `/_og/debug.json` endpoint and should not be enabled in production. Disable it before deploying.");
     }
@@ -4621,6 +4733,26 @@ ${familyInfo}`);
       route: "/_og/s/**",
       handler: resolve(`${basePath}/image`)
     });
+    if (!nuxt.options.dev) {
+      nuxt.options.routeRules = nuxt.options.routeRules || {};
+      if (config.runtimeCacheStorage !== false && !nuxt.options.test) {
+        const ogDynamicRule = nuxt.options.routeRules["/_og/d/**"];
+        if (!ogDynamicRule?.swr && !ogDynamicRule?.isr && !ogDynamicRule?.cache && !ogDynamicRule?.headers) {
+          const ttl = config.cacheMaxAgeSeconds ?? config.defaults?.cacheMaxAgeSeconds ?? 60 * 60 * 24 * 3;
+          nuxt.options.routeRules["/_og/d/**"] = defu(
+            nuxt.options.routeRules["/_og/d/**"] || {},
+            { swr: ttl }
+          );
+        }
+      }
+      const ogStaticRule = nuxt.options.routeRules["/_og/s/**"];
+      if (!ogStaticRule?.swr && !ogStaticRule?.isr && !ogStaticRule?.cache && !ogStaticRule?.headers) {
+        nuxt.options.routeRules["/_og/s/**"] = defu(
+          nuxt.options.routeRules["/_og/s/**"] || {},
+          { headers: { "cache-control": "public, max-age=31536000, immutable" } }
+        );
+      }
+    }
     if (!nuxt.options.dev) {
       nuxt.options.optimization.treeShake.composables.client["nuxt-og-image"] = [];
     }
@@ -5071,7 +5203,6 @@ export const rootDir = ${JSON.stringify(nuxt.options.rootDir)}`;
         colorPreference,
         // @ts-expect-error runtime type
         isNuxtContentDocumentDriven: !!nuxt.options.content?.documentDriven,
-        cacheQueryParams: config.cacheQueryParams ?? false,
         cssFramework: cssFramework || "none",
         // Browser renderer config for cloudflare binding access
         browser: typeof config.browser === "object" ? {

package/dist/shared/{nuxt-og-image.DD0uPnWP.cjs → nuxt-og-image.if6TuaSI.cjs}

@@ -2260,6 +2260,7 @@ function setupPrerenderHandler(options, resolve, getDetectedRenderers, nuxt = ki
       orphanedOgHashes.push(route.route);
       route.skip = true;
       delete route.error;
+      route.contents = "";
     });
     nitro.hooks.hook("prerender:done", async () => {
       if (orphanedOgHashes.length > 0) {
@@ -2554,6 +2555,94 @@ const ATTRIBUTE_NODE = 6;
 const DIRECTIVE_NODE = 7;
 const RE_PURE_NUMBER = /^\d+(?:\.\d+)?$/;
 const RE_DOUBLE_QUOTE = /"/g;
+const RE_CAMEL_TO_KEBAB = /[A-Z]/g;
+const RE_STRIP_QUOTES = /^['"]|['"]$/g;
+const RE_SINGLE_QUOTED = /^'([^']*)'$/;
+const RE_DOUBLE_QUOTED = /^"([^"]*)"$/;
+const RE_BACKTICK_QUOTED = /^`([^`]*)`$/;
+const RE_CSS_NUMBER = /^[\d.]+(?:px|em|rem|%|vh|vw|ch|ex|vmin|vmax|pt|pc|in|cm|mm)?$/;
+function camelToKebab(str) {
+  return str.replace(RE_CAMEL_TO_KEBAB, (m) => `-${m.toLowerCase()}`);
+}
+function parseStaticStyleObject(expr) {
+  const trimmed = expr.trim();
+  if (!trimmed.startsWith("{") || !trimmed.endsWith("}"))
+    return void 0;
+  const inner = trimmed.slice(1, -1).trim();
+  if (!inner)
+    return {};
+  const result = {};
+  let depth = 0;
+  let inQuote = null;
+  let current = "";
+  for (let i = 0; i < inner.length; i++) {
+    const ch = inner[i];
+    if (inQuote) {
+      current += ch;
+      if (ch === inQuote && inner[i - 1] !== "\\")
+        inQuote = null;
+      continue;
+    }
+    if (ch === "'" || ch === '"' || ch === "`") {
+      inQuote = ch;
+      current += ch;
+      continue;
+    }
+    if (ch === "(" || ch === "[" || ch === "{") {
+      depth++;
+      current += ch;
+      continue;
+    }
+    if (ch === ")" || ch === "]" || ch === "}") {
+      depth--;
+      current += ch;
+      continue;
+    }
+    if (ch === "," && depth === 0) {
+      const parsed = parseStyleEntry(current);
+      if (!parsed)
+        return void 0;
+      result[parsed[0]] = parsed[1];
+      current = "";
+      continue;
+    }
+    current += ch;
+  }
+  if (current.trim()) {
+    const parsed = parseStyleEntry(current);
+    if (!parsed)
+      return void 0;
+    result[parsed[0]] = parsed[1];
+  }
+  return result;
+}
+function parseStyleEntry(entry) {
+  const colonIdx = entry.indexOf(":");
+  if (colonIdx === -1)
+    return void 0;
+  const rawKey = entry.slice(0, colonIdx).trim();
+  const rawValue = entry.slice(colonIdx + 1).trim();
+  const key = rawKey.replace(RE_STRIP_QUOTES, "");
+  if (!key)
+    return void 0;
+  let value;
+  const singleQuoteMatch = rawValue.match(RE_SINGLE_QUOTED);
+  const doubleQuoteMatch = rawValue.match(RE_DOUBLE_QUOTED);
+  const backtickMatch = rawValue.match(RE_BACKTICK_QUOTED);
+  const numberMatch = rawValue.match(RE_CSS_NUMBER);
+  if (singleQuoteMatch) {
+    value = singleQuoteMatch[1];
+  } else if (doubleQuoteMatch) {
+    value = doubleQuoteMatch[1];
+  } else if (backtickMatch && !backtickMatch[1].includes("${")) {
+    value = backtickMatch[1];
+  } else if (numberMatch) {
+    value = rawValue;
+  } else {
+    return void 0;
+  }
+  return [camelToKebab(key), value];
+}
 function escapeAttrValue(value) {
   return value.replace(RE_DOUBLE_QUOTE, "&quot;");
 }
@@ -2591,7 +2680,17 @@ async function transformVueTemplate(code, options) {
         }
       }
       if (prop.type === DIRECTIVE_NODE && prop.name === "bind" && prop.arg?.content === "style") {
-        collector.hasDynamicStyle = true;
+        const exp = prop.exp?.content;
+        if (exp) {
+          const parsed = parseStaticStyleObject(exp);
+          if (parsed) {
+            collector.dynamicStyleProps = parsed;
+            collector.dynamicStyleLoc = {
+              start: prop.loc.start.offset,
+              end: prop.loc.end.offset
+            };
+          }
+        }
       }
       if (prop.type === ATTRIBUTE_NODE && (prop.name === "width" || prop.name === "height") && prop.value && el.tag === "img") {
         if (!collector.dimensionAttrs)
@@ -2599,7 +2698,7 @@ async function transformVueTemplate(code, options) {
         collector.dimensionAttrs.push({ name: prop.name, value: prop.value.content });
       }
     }
-    if (collector.classes.length > 0 || collector.existingStyle || collector.dimensionAttrs?.length) {
+    if (collector.classes.length > 0 || collector.existingStyle || collector.dimensionAttrs?.length || collector.dynamicStyleProps) {
       if (collector.existingStyle && !collector.styleLoc) {
         logger_js.logger.warn(`[vue-template-transform] BUG: existingStyle found but styleLoc is undefined!`);
       }
@@ -2640,6 +2739,9 @@ async function transformVueTemplate(code, options) {
         }
       }
     }
+    if (collector.dynamicStyleProps) {
+      Object.assign(styleProps, collector.dynamicStyleProps);
+    }
     if (styleProps.display === "flex" && !styleProps["flex-direction"]) {
       styleProps["flex-direction"] = "row";
     }
@@ -2648,7 +2750,8 @@ async function transformVueTemplate(code, options) {
     const hasUnresolved = unresolvedClasses.length > 0;
     const resolvedSome = collector.classes.length > 0 && (unresolvedClasses.length < collector.classes.length || hasClassRewrites);
     const styleChanged = collector.existingStyle && styleStr !== collector.existingStyle;
-    if (!resolvedSome && !styleChanged && !collector.dimensionAttrs?.length)
+    const hasDynamicStyleResolved = collector.dynamicStyleProps && Object.keys(collector.dynamicStyleProps).length > 0;
+    if (!resolvedSome && !styleChanged && !collector.dimensionAttrs?.length && !hasDynamicStyleResolved)
       continue;
     hasChanges = true;
     if (collector.classLoc) {
@@ -2658,6 +2761,9 @@ async function transformVueTemplate(code, options) {
         s.remove(collector.classLoc.start, collector.classLoc.end);
       }
     }
+    if (collector.dynamicStyleLoc) {
+      s.remove(collector.dynamicStyleLoc.start, collector.dynamicStyleLoc.end);
+    }
     if (hasResolvedStyles) {
       if (collector.styleLoc) {
         s.overwrite(collector.styleLoc.start, collector.styleLoc.end, `style="${styleStr}"`);
@@ -3569,6 +3675,7 @@ const REMOVED_CONFIG = {
   "runtimeSatori": "compatibility.runtime.satori",
   "cacheTtl": "cacheMaxAgeSeconds",
   "cache": "cacheMaxAgeSeconds",
+  "cacheQueryParams": "Removed (all options are encoded in the URL path)",
   "cacheKey": "Removed",
   "static": "zeroRuntime",
   "chromium-node": "compatibility.runtime.browser: 'playwright'",
@@ -3690,6 +3797,7 @@ const DEPRECATED_CONFIG = {
   runtimeSatori: "Use compatibility.runtime.satori",
   cacheTtl: "Use cacheMaxAgeSeconds",
   cache: "Use cacheMaxAgeSeconds",
+  cacheQueryParams: "Removed (all options are encoded in the URL path)",
   cacheKey: "Removed",
   static: "Removed - use zeroRuntime",
   fonts: "Use @nuxt/fonts module instead"
@@ -4206,7 +4314,7 @@ const module$1 = kit.defineNuxtModule({
     await onUpgrade(nuxt, options, previousVersion);
   },
   async setup(config, nuxt) {
-    const _resolver = kit.createResolver((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('shared/nuxt-og-image.DD0uPnWP.cjs', document.baseURI).href)));
+    const _resolver = kit.createResolver((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('shared/nuxt-og-image.if6TuaSI.cjs', document.baseURI).href)));
     const fixSharedPath = (p) => {
       if (p.includes("/shared/runtime/"))
         return p.replace("/shared/runtime/", "/runtime/");
@@ -4236,6 +4344,10 @@ const module$1 = kit.defineNuxtModule({
       logger_js.logger.warn("Nuxt OG Image is enabled but SSR is disabled.\n\nYou should enable SSR (`ssr: true`) or disable the module (`ogImage: { enabled: false }`).");
       return;
     }
+    if (config.cacheMaxAgeSeconds != null) {
+      config.defaults = config.defaults || {};
+      config.defaults.cacheMaxAgeSeconds = config.cacheMaxAgeSeconds;
+    }
     if (config.debug && !nuxt.options.dev) {
       logger_js.logger.warn("`ogImage.debug` is enabled in production. This exposes the `/_og/debug.json` endpoint and should not be enabled in production. Disable it before deploying.");
     }
@@ -4641,6 +4753,26 @@ ${familyInfo}`);
       route: "/_og/s/**",
       handler: resolve(`${basePath}/image`)
     });
+    if (!nuxt.options.dev) {
+      nuxt.options.routeRules = nuxt.options.routeRules || {};
+      if (config.runtimeCacheStorage !== false && !nuxt.options.test) {
+        const ogDynamicRule = nuxt.options.routeRules["/_og/d/**"];
+        if (!ogDynamicRule?.swr && !ogDynamicRule?.isr && !ogDynamicRule?.cache && !ogDynamicRule?.headers) {
+          const ttl = config.cacheMaxAgeSeconds ?? config.defaults?.cacheMaxAgeSeconds ?? 60 * 60 * 24 * 3;
+          nuxt.options.routeRules["/_og/d/**"] = defu.defu(
+            nuxt.options.routeRules["/_og/d/**"] || {},
+            { swr: ttl }
+          );
+        }
+      }
+      const ogStaticRule = nuxt.options.routeRules["/_og/s/**"];
+      if (!ogStaticRule?.swr && !ogStaticRule?.isr && !ogStaticRule?.cache && !ogStaticRule?.headers) {
+        nuxt.options.routeRules["/_og/s/**"] = defu.defu(
+          nuxt.options.routeRules["/_og/s/**"] || {},
+          { headers: { "cache-control": "public, max-age=31536000, immutable" } }
+        );
+      }
+    }
     if (!nuxt.options.dev) {
       nuxt.options.optimization.treeShake.composables.client["nuxt-og-image"] = [];
     }
@@ -5091,7 +5223,6 @@ export const rootDir = ${JSON.stringify(nuxt.options.rootDir)}`;
         colorPreference,
         // @ts-expect-error runtime type
         isNuxtContentDocumentDriven: !!nuxt.options.content?.documentDriven,
-        cacheQueryParams: config.cacheQueryParams ?? false,
         cssFramework: cssFramework || "none",
         // Browser renderer config for cloudflare binding access
         browser: typeof config.browser === "object" ? {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "6.3.6",
+  "version": "6.3.8",
   "description": "Enlightened OG Image generation for Nuxt.",
   "author": {
     "website": "https://harlanzw.com",
@@ -135,8 +135,8 @@
     "@iconify-json/tabler": "^1.2.33",
     "@img/sharp-linux-x64": "^0.34.5",
     "@nuxt/content": "^3.12.0",
-    "@nuxt/devtools": "^3.2.4",
-    "@nuxt/devtools-kit": "^3.2.4",
+    "@nuxt/devtools": "4.0.0-alpha.4",
+    "@nuxt/devtools-kit": "4.0.0-alpha.4",
     "@nuxt/fonts": "^0.14.0",
     "@nuxt/icon": "^2.2.1",
     "@nuxt/image": "^2.0.0",
@@ -152,8 +152,8 @@
     "@shikijs/langs": "^4.0.2",
     "@shikijs/themes": "^4.0.2",
     "@tailwindcss/vite": "^4.2.2",
-    "@takumi-rs/core": "1.0.0-beta.13",
-    "@takumi-rs/wasm": "1.0.0-beta.13",
+    "@takumi-rs/core": "1.0.1",
+    "@takumi-rs/wasm": "1.0.1",
     "@unocss/nuxt": "^66.6.8",
     "@vitejs/plugin-vue": "^6.0.5",
     "@vueuse/nuxt": "^14.2.1",

package/dist/devtools/_nuxt/DevtoolsSection.BA22BKWd.css

@@ -1 +0,0 @@
-.section-block[data-v-959e3b7d]{background:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);transition:border-color .2s;overflow:hidden}.section-block[data-v-959e3b7d]:hover{border-color:var(--color-neutral-300)}.dark .section-block[data-v-959e3b7d]:hover{border-color:var(--color-neutral-700)}.section-header[data-v-959e3b7d]{cursor:pointer;-webkit-user-select:none;user-select:none;padding:.875rem 1rem;list-style:none;transition:background .15s}.section-header[data-v-959e3b7d]::-webkit-details-marker{display:none}.section-header[data-v-959e3b7d]:hover{background:var(--color-surface-sunken)}details[open] .section-header[data-v-959e3b7d]{border-bottom:1px solid var(--color-border)}.section-title[data-v-959e3b7d]{align-items:center;gap:.625rem;transition:opacity .15s;display:flex}.section-icon[data-v-959e3b7d]{color:var(--color-text-muted);flex-shrink:0;font-size:1.125rem}.section-label[data-v-959e3b7d]{color:var(--color-text);font-size:.875rem;font-weight:600}.section-description[data-v-959e3b7d]{color:var(--color-text-muted);margin-top:.125rem;font-size:.75rem}.chevron[data-v-959e3b7d]{color:var(--color-text-subtle);flex-shrink:0;font-size:.875rem;transition:transform .2s cubic-bezier(.22,1,.36,1)}details[open] .chevron[data-v-959e3b7d]{color:var(--color-text-muted);transform:rotate(180deg)}.section-content[data-v-959e3b7d]{background:var(--color-surface-sunken);flex-direction:column;gap:.75rem;padding:1rem;display:flex}

package/dist/devtools/_nuxt/DevtoolsSnippet.5f9DiVqQ.css

@@ -1 +0,0 @@
-.devtools-snippet[data-v-97299906]{margin:.5rem .75rem}.devtools-snippet-header[data-v-97299906]{justify-content:space-between;align-items:center;margin-bottom:.375rem;display:flex}.devtools-snippet-label[data-v-97299906]{color:var(--color-text-muted);font-family:var(--font-mono);letter-spacing:-.01em;font-size:.6875rem;font-weight:500}.devtools-snippet-block[data-v-97299906]{border-radius:var(--radius-sm);max-height:300px;font-size:.6875rem;line-height:1.6;overflow-y:auto;padding:.5rem .625rem!important}