nuxt-og-image 4.0.1 → 4.0.3

package/dist/module.d.mts

@@ -3,111 +3,7 @@ import { AddComponentOptions } from '@nuxt/kit';
 import { ResvgRenderOptions } from '@resvg/resvg-js';
 import { SatoriOptions } from 'satori';
 import { SharpOptions } from 'sharp';
-import { OgImageComponents } from '#og-image/components';
-import { NitroOptions } from 'nitropack';
-
-type IconifyEmojiIconSets = 'twemoji' | 'noto' | 'fluent-emoji' | 'fluent-emoji-flat' | 'fluent-emoji-high-contrast' | 'noto-v1' | 'emojione' | 'emojione-monotone' | 'emojione-v1' | 'streamline-emojis' | 'openmoji';
-interface OgImageComponent {
-    path?: string;
-    pascalName: string;
-    kebabName: string;
-    hash: string;
-    category: 'app' | 'community' | 'pro';
-    credits?: string;
-}
-interface ScreenshotOptions {
-    colorScheme?: 'dark' | 'light';
-    selector?: string;
-    mask?: string;
-    /**
-     * The width of the screenshot.
-     *
-     * @default 1200
-     */
-    width: number;
-    /**
-     * The height of the screenshot.
-     *
-     * @default 630
-     */
-    height: number;
-    /**
-     * How long to wait before taking the screenshot. Useful for waiting for animations.
-     */
-    delay?: number;
-}
-interface OgImageOptions<T extends keyof OgImageComponents = 'NuxtSeo'> {
-    /**
-     * The width of the screenshot.
-     *
-     * @default 1200
-     */
-    width?: number;
-    /**
-     * The height of the screenshot.
-     *
-     * @default 630
-     */
-    height?: number;
-    /**
-     * The alt text for the image.
-     */
-    alt?: string;
-    /**
-     * Use a prebuilt image instead of generating one.
-     *
-     * Should be an absolute URL.
-     */
-    url?: string;
-    /**
-     * The name of the component to render.
-     */
-    component?: T | string;
-    /**
-     * Props to pass to the component.
-     */
-    props?: OgImageComponents[T] | Record<string, any>;
-    renderer?: 'chromium' | 'satori';
-    extension?: 'png' | 'jpeg' | 'jpg';
-    emojis?: IconifyEmojiIconSets;
-    /**
-     * Provide a static HTML template to render the OG Image instead of a component.
-     */
-    html?: string;
-    resvg?: ResvgRenderOptions;
-    satori?: SatoriOptions;
-    screenshot?: Partial<ScreenshotOptions>;
-    sharp?: SharpOptions;
-    fonts?: InputFontConfig[];
-    cacheMaxAgeSeconds?: number;
-    /**
-     * @internal
-     */
-    _query?: Record<string, any>;
-}
-interface FontConfig {
-    name: string;
-    style?: string;
-    weight?: string | number;
-    path?: string;
-    key?: string;
-    absolutePath?: boolean;
-}
-type InputFontConfig = (`${string}:${number}` | string | FontConfig);
-interface RuntimeCompatibilitySchema {
-    chromium: 'chrome-launcher' | 'on-demand' | 'playwright' | false;
-    ['css-inline']: 'node' | 'wasm' | 'wasm-fs' | false;
-    resvg: 'node' | 'wasm' | 'wasm-fs' | false;
-    satori: 'node' | 'wasm' | 'wasm-fs' | false;
-    sharp: 'node' | false;
-    wasm?: NitroOptions['wasm'];
-}
-type CompatibilityFlags = Partial<Omit<RuntimeCompatibilitySchema, 'wasm'>>;
-interface CompatibilityFlagEnvOverrides {
-    dev?: CompatibilityFlags;
-    runtime?: CompatibilityFlags;
-    prerender?: CompatibilityFlags;
-}
+import { OgImageOptions, InputFontConfig, CompatibilityFlagEnvOverrides, OgImageComponent } from '../dist/runtime/types.js';
 
 interface ModuleOptions {
     /**
@@ -121,7 +17,7 @@ interface ModuleOptions {
      *
      * You can use this to change the default template, image sizing and more.
      *
-     * @default { component: 'OgImageTemplateFallback', width: 1200, height: 630, cache: true, cacheTtl: 24 * 60 * 60 * 1000 }
+     * @default { component: 'NuxtSeo', width: 1200, height: 630, cache: true, cacheTtl: 24 * 60 * 60 * 1000 }
      */
     defaults: OgImageOptions;
     /**

package/dist/module.d.ts

@@ -3,111 +3,7 @@ import { AddComponentOptions } from '@nuxt/kit';
 import { ResvgRenderOptions } from '@resvg/resvg-js';
 import { SatoriOptions } from 'satori';
 import { SharpOptions } from 'sharp';
-import { OgImageComponents } from '#og-image/components';
-import { NitroOptions } from 'nitropack';
-
-type IconifyEmojiIconSets = 'twemoji' | 'noto' | 'fluent-emoji' | 'fluent-emoji-flat' | 'fluent-emoji-high-contrast' | 'noto-v1' | 'emojione' | 'emojione-monotone' | 'emojione-v1' | 'streamline-emojis' | 'openmoji';
-interface OgImageComponent {
-    path?: string;
-    pascalName: string;
-    kebabName: string;
-    hash: string;
-    category: 'app' | 'community' | 'pro';
-    credits?: string;
-}
-interface ScreenshotOptions {
-    colorScheme?: 'dark' | 'light';
-    selector?: string;
-    mask?: string;
-    /**
-     * The width of the screenshot.
-     *
-     * @default 1200
-     */
-    width: number;
-    /**
-     * The height of the screenshot.
-     *
-     * @default 630
-     */
-    height: number;
-    /**
-     * How long to wait before taking the screenshot. Useful for waiting for animations.
-     */
-    delay?: number;
-}
-interface OgImageOptions<T extends keyof OgImageComponents = 'NuxtSeo'> {
-    /**
-     * The width of the screenshot.
-     *
-     * @default 1200
-     */
-    width?: number;
-    /**
-     * The height of the screenshot.
-     *
-     * @default 630
-     */
-    height?: number;
-    /**
-     * The alt text for the image.
-     */
-    alt?: string;
-    /**
-     * Use a prebuilt image instead of generating one.
-     *
-     * Should be an absolute URL.
-     */
-    url?: string;
-    /**
-     * The name of the component to render.
-     */
-    component?: T | string;
-    /**
-     * Props to pass to the component.
-     */
-    props?: OgImageComponents[T] | Record<string, any>;
-    renderer?: 'chromium' | 'satori';
-    extension?: 'png' | 'jpeg' | 'jpg';
-    emojis?: IconifyEmojiIconSets;
-    /**
-     * Provide a static HTML template to render the OG Image instead of a component.
-     */
-    html?: string;
-    resvg?: ResvgRenderOptions;
-    satori?: SatoriOptions;
-    screenshot?: Partial<ScreenshotOptions>;
-    sharp?: SharpOptions;
-    fonts?: InputFontConfig[];
-    cacheMaxAgeSeconds?: number;
-    /**
-     * @internal
-     */
-    _query?: Record<string, any>;
-}
-interface FontConfig {
-    name: string;
-    style?: string;
-    weight?: string | number;
-    path?: string;
-    key?: string;
-    absolutePath?: boolean;
-}
-type InputFontConfig = (`${string}:${number}` | string | FontConfig);
-interface RuntimeCompatibilitySchema {
-    chromium: 'chrome-launcher' | 'on-demand' | 'playwright' | false;
-    ['css-inline']: 'node' | 'wasm' | 'wasm-fs' | false;
-    resvg: 'node' | 'wasm' | 'wasm-fs' | false;
-    satori: 'node' | 'wasm' | 'wasm-fs' | false;
-    sharp: 'node' | false;
-    wasm?: NitroOptions['wasm'];
-}
-type CompatibilityFlags = Partial<Omit<RuntimeCompatibilitySchema, 'wasm'>>;
-interface CompatibilityFlagEnvOverrides {
-    dev?: CompatibilityFlags;
-    runtime?: CompatibilityFlags;
-    prerender?: CompatibilityFlags;
-}
+import { OgImageOptions, InputFontConfig, CompatibilityFlagEnvOverrides, OgImageComponent } from '../dist/runtime/types.js';
 
 interface ModuleOptions {
     /**
@@ -121,7 +17,7 @@ interface ModuleOptions {
      *
      * You can use this to change the default template, image sizing and more.
      *
-     * @default { component: 'OgImageTemplateFallback', width: 1200, height: 630, cache: true, cacheTtl: 24 * 60 * 60 * 1000 }
+     * @default { component: 'NuxtSeo', width: 1200, height: 630, cache: true, cacheTtl: 24 * 60 * 60 * 1000 }
      */
     defaults: OgImageOptions;
     /**

package/dist/module.json

@@ -5,7 +5,7 @@
     "bridge": false
   },
   "configKey": "ogImage",
-  "version": "4.0.0",
+  "version": "4.0.2",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -1,7 +1,7 @@
 import * as fs from 'node:fs';
 import { existsSync } from 'node:fs';
 import { readFile, writeFile } from 'node:fs/promises';
-import { useNuxt, tryResolveModule, addTemplate, resolvePath, loadNuxtModuleInstance, createResolver, defineNuxtModule, useLogger, addImports, addBuildPlugin, hasNuxtModule, addServerPlugin, addServerHandler, addComponentsDir, addComponent, addPlugin } from '@nuxt/kit';
+import { useNuxt, tryResolveModule, addTemplate, resolvePath, loadNuxtModuleInstance, createResolver, defineNuxtModule, addImports, addBuildPlugin, hasNuxtModule, addServerPlugin, addServerHandler, addComponentsDir, addComponent, addPlugin } from '@nuxt/kit';
 import { defu } from 'defu';
 import { installNuxtSiteConfig } from 'nuxt-site-config/kit';
 import { hash } from 'ohash';
@@ -19,6 +19,7 @@ import { pathToFileURL } from 'node:url';
 import MagicString from 'magic-string';
 import { stripLiteral } from 'strip-literal';
 import { createUnplugin } from 'unplugin';
+import { logger } from '../dist/runtime/logger.js';
 import { Launcher } from 'chrome-launcher';
 import { $fetch } from 'ofetch';
 
@@ -205,6 +206,7 @@ async function setupBuildHandler(config, resolve, nuxt = useNuxt()) {
     nitroConfig.alias.bufferutil = "unenv/runtime/mock/proxy-cjs";
     nitroConfig.alias["utf-8-validate"] = "unenv/runtime/mock/proxy-cjs";
     nitroConfig.alias.queue = "unenv/runtime/mock/proxy-cjs";
+    nitroConfig.alias["chromium-bidi"] = "unenv/runtime/mock/proxy-cjs";
   });
   nuxt.hooks.hook("nitro:init", async (nitro) => {
     const target = resolveNitroPreset(nitro.options);
@@ -454,17 +456,27 @@ function isNuxtGenerate(nuxt = useNuxt()) {
 function normaliseFontInput(fonts) {
   return fonts.map((f) => {
     if (typeof f === "string") {
-      const [name, weight] = f.split(":");
+      const vals = f.split(":");
+      const includesStyle = vals.length === 3;
+      let name, weight, style;
+      if (includesStyle) {
+        name = vals[0];
+        style = vals[1];
+        weight = vals[2];
+      } else {
+        name = vals[0];
+        weight = vals[1];
+      }
       return {
         cacheKey: f,
         name,
         weight: weight || 400,
-        style: "normal",
+        style: style || "normal",
         path: void 0
       };
     }
     return {
-      cacheKey: f.key || `${f.name}:${f.weight}`,
+      cacheKey: f.key || `${f.name}:${f.style}:${f.weight}`,
       style: "normal",
       weight: 400,
       ...f
@@ -487,12 +499,12 @@ async function checkPlaywrightDependency() {
   return !!await tryResolveModule("playwright");
 }
 async function downloadFont(font, storage, mirror) {
-  const { name, weight } = font;
-  const key = `${name}-${weight}.ttf.base64`;
+  const { name, weight, style } = font;
+  const key = `${name}-${style}-${weight}.ttf.base64`;
   if (await storage.hasItem(key))
     return true;
   const host = typeof mirror === "undefined" ? "fonts.googleapis.com" : mirror === true ? "fonts.font.im" : mirror;
-  const css = await $fetch(`https://${host}/css2?family=${name}:wght@${weight}`, {
+  const css = await $fetch(`https://${host}/css2?family=${name}:${style === "ital" ? `ital,wght@1,${weight}` : `wght@${weight}`}`, {
     timeout: 10 * 1e3,
     // 10 second timeout
     headers: {
@@ -544,13 +556,12 @@ const module = defineNuxtModule({
   },
   async setup(config, nuxt) {
     const { resolve } = createResolver(import.meta.url);
-    const { name, version } = await readPackageJSON(resolve("../package.json"));
-    const logger = useLogger(name);
+    const { version } = await readPackageJSON(resolve("../package.json"));
     logger.level = config.debug || nuxt.options.debug ? 4 : 3;
     if (config.enabled === false) {
       logger.debug("The module is disabled, skipping setup.");
-      ["defineOgImage", "defineOgImageComponent", "defineOgImageScreenshot"].forEach((name2) => {
-        addImports({ name: name2, from: resolve(`./runtime/app/composables/mock`) });
+      ["defineOgImage", "defineOgImageComponent", "defineOgImageScreenshot"].forEach((name) => {
+        addImports({ name, from: resolve(`./runtime/app/composables/mock`) });
       });
       return;
     }
@@ -560,6 +571,7 @@ const module = defineNuxtModule({
     }
     nuxt.options.alias["#og-image"] = resolve("./runtime");
     nuxt.options.alias["#og-image-cache"] = resolve("./runtime/server/og-image/cache/lru");
+    nuxt.options.alias["#nuxt-og-image-utils"] = resolve("./runtime/shared");
     const preset = resolveNitroPreset(nuxt.options.nitro);
     const targetCompatibility = getPresetNitroPresetCompatibility(preset);
     if (config.zeroRuntime) {
@@ -643,8 +655,8 @@ const module = defineNuxtModule({
     }
     if (!config.fonts.length) {
       config.fonts = [
-        { name: "Inter", weight: 400, path: resolve("./runtime/assets/Inter-400.ttf.base64"), absolutePath: true },
-        { name: "Inter", weight: 700, path: resolve("./runtime/assets/Inter-700.ttf.base64"), absolutePath: true }
+        { name: "Inter", weight: 400, path: resolve("./runtime/assets/Inter-normal-400.ttf.base64"), absolutePath: true },
+        { name: "Inter", weight: 700, path: resolve("./runtime/assets/Inter-normal-700.ttf.base64"), absolutePath: true }
       ];
     }
     let publicDirAbs = nuxt.options.dir.public;
@@ -658,32 +670,34 @@ const module = defineNuxtModule({
       })
     });
     config.fonts = (await Promise.all(normaliseFontInput(config.fonts).map(async (f) => {
+      const fontKey = `${f.name}:${f.style}:${f.weight}`;
+      const fontFileBase = fontKey.replaceAll(":", "-");
       if (!f.key && !f.path) {
         if (preset === "stackblitz") {
-          logger.warn(`The ${f.name}:${f.weight} font was skipped because remote fonts are not available in StackBlitz, please use a local font.`);
+          logger.warn(`The ${fontKey} font was skipped because remote fonts are not available in StackBlitz, please use a local font.`);
           return false;
         }
         if (await downloadFont(f, fontStorage, config.googleFontMirror)) {
-          f.key = `nuxt-og-image:fonts:${f.name}-${f.weight}.ttf.base64`;
+          f.key = `nuxt-og-image:fonts:${fontFileBase}.ttf.base64`;
         } else {
-          logger.warn(`Failed to download font ${f.name}:${f.weight}. You may be offline or behind a firewall blocking Google. Consider setting \`googleFontMirror: true\`.`);
+          logger.warn(`Failed to download font ${fontKey}. You may be offline or behind a firewall blocking Google. Consider setting \`googleFontMirror: true\`.`);
           return false;
         }
       } else if (f.path) {
         const extension = basename(f.path.replace(".base64", "")).split(".").pop();
         if (!["woff", "ttf", "otf"].includes(extension)) {
-          logger.warn(`The ${f.name}:${f.weight} font was skipped because the file extension ${extension} is not supported. Only woff, ttf and otf are supported.`);
+          logger.warn(`The ${fontKey} font was skipped because the file extension ${extension} is not supported. Only woff, ttf and otf are supported.`);
           return false;
         }
         if (!f.absolutePath)
           f.path = resolve(publicDirAbs, withoutLeadingSlash(f.path));
         if (!existsSync(f.path)) {
-          logger.warn(`The ${f.name}:${f.weight} font was skipped because the file does not exist at path ${f.path}.`);
+          logger.warn(`The ${fontKey} font was skipped because the file does not exist at path ${f.path}.`);
           return false;
         }
         const fontData = await readFile(f.path, f.path.endsWith(".base64") ? "utf-8" : "base64");
-        f.key = `nuxt-og-image:fonts:${f.name}-${f.weight}.${extension}.base64`;
-        await fontStorage.setItem(`${f.name}-${f.weight}.${extension}.base64`, fontData);
+        f.key = `nuxt-og-image:fonts:${fontFileBase}.${extension}.base64`;
+        await fontStorage.setItem(`${fontFileBase}.${extension}.base64`, fontData);
         delete f.path;
         delete f.absolutePath;
       }
@@ -723,13 +737,17 @@ const module = defineNuxtModule({
       route: "/__og-image__/static/**",
       handler: resolve(`${basePath}/image`)
     });
-    nuxt.options.optimization.treeShake.composables.client["nuxt-og-image"] = [];
-    ["defineOgImage", "defineOgImageComponent", "defineOgImageScreenshot"].forEach((name2) => {
+    if (!nuxt.options.dev) {
+      nuxt.options.optimization.treeShake.composables.client["nuxt-og-image"] = [];
+    }
+    ["defineOgImage", "defineOgImageComponent", "defineOgImageScreenshot"].forEach((name) => {
       addImports({
-        name: name2,
-        from: resolve(`./runtime/app/composables/${name2}`)
+        name,
+        from: resolve(`./runtime/app/composables/${name}`)
       });
-      nuxt.options.optimization.treeShake.composables.client["nuxt-og-image"].push(name2);
+      if (!nuxt.options.dev) {
+        nuxt.options.optimization.treeShake.composables.client["nuxt-og-image"].push(name);
+      }
     });
     if (!config.zeroRuntime || nuxt.options.dev) {
       await addComponentsDir({
@@ -742,10 +760,10 @@ const module = defineNuxtModule({
       // new
       "OgImage",
       "OgImageScreenshot"
-    ].forEach((name2) => {
+    ].forEach((name) => {
       addComponent({
-        name: name2,
-        filePath: resolve(`./runtime/app/components/OgImage/${name2}`),
+        name,
+        filePath: resolve(`./runtime/app/components/OgImage/${name}`),
         ...config.componentOptions
       });
     });
@@ -809,10 +827,10 @@ const module = defineNuxtModule({
     extendTypes("nuxt-og-image", ({ typesPath }) => {
       const componentImports = ogImageComponentCtx.components.map((component) => {
         const relativeComponentPath = relative$1(resolve(nuxt.options.rootDir, nuxt.options.buildDir, "module"), component.path);
-        const name2 = config.componentDirs.sort((a, b) => b.length - a.length).reduce((name3, dir) => {
-          return name3.replace(new RegExp(`^${dir}`), "");
+        const name = config.componentDirs.sort((a, b) => b.length - a.length).reduce((name2, dir) => {
+          return name2.replace(new RegExp(`^${dir}`), "");
         }, component.pascalName);
-        return `    '${name2}': typeof import('${relativeComponentPath}')['default']`;
+        return `    '${name}': typeof import('${relativeComponentPath}')['default']`;
       }).join("\n");
       return `
 declare module 'nitropack' {

package/dist/runtime/app/components/Templates/Community/NuxtSeo.vue

@@ -77,10 +77,10 @@ const siteLogo = computed(() => {
 const IconComponent = runtimeConfig.hasNuxtIcon
   ? resolveComponent('Icon')
   : defineComponent({
-    render() {
-      return h('div', 'missing @nuxt/icon')
-    },
-  })
+      render() {
+        return h('div', 'missing @nuxt/icon')
+      },
+    })
 if (typeof props.icon === 'string' && !runtimeConfig.hasNuxtIcon && process.dev) {
   console.warn('Please install `@nuxt/icon` to use icons with the fallback OG Image component.')
   // eslint-disable-next-line no-console

package/dist/runtime/app/composables/defineOgImage.js

@@ -1,16 +1,28 @@
-import { useNuxtApp, useRequestEvent, useRoute } from "#imports";
 import { defu } from "defu";
 import { appendHeader } from "h3";
+import { createError, useNuxtApp, useRequestEvent, useRoute, useState } from "nuxt/app";
+import { ref } from "vue";
 import { createNitroRouteRuleMatcher } from "../../server/util/kit.js";
 import { getOgImagePath, separateProps, useOgImageRuntimeConfig } from "../../shared.js";
 import { createOgImageMeta, normaliseOptions } from "../utils.js";
 export function defineOgImage(_options = {}) {
-  if (!import.meta.server)
-    return;
   const nuxtApp = useNuxtApp();
-  const ogImageInstances = nuxtApp.ssrContext._ogImageInstances || [];
   const route = useRoute();
   const basePath = route.path || "/";
+  if (nuxtApp.payload.path === basePath) {
+    const state = import.meta.dev ? useState(`og-image:ssr-exists:${basePath}`, () => false) : ref(false);
+    if (import.meta.dev && !import.meta.server) {
+      if (!state.value) {
+        throw createError({ message: "You are using a defineOgImage() function in a client-only context. You must call this function within your root component setup, see https://github.com/nuxt-modules/og-image/pull/293." });
+      }
+      return;
+    }
+    state.value = true;
+  }
+  if (!import.meta.server) {
+    return;
+  }
+  const ogImageInstances = nuxtApp.ssrContext._ogImageInstances || [];
   const routeRuleMatcher = createNitroRouteRuleMatcher();
   const routeRules = routeRuleMatcher(basePath).ogImage;
   if (!_options || nuxtApp.ssrContext?.event.context._nitro?.routeRules?.ogImage === false || typeof routeRules !== "undefined" && routeRules === false) {
@@ -32,9 +44,10 @@ export function defineOgImage(_options = {}) {
   if (resolvedOptions.url) {
     createOgImageMeta(null, options, resolvedOptions, nuxtApp.ssrContext);
   } else {
-    const path = getOgImagePath(basePath, resolvedOptions);
-    if (import.meta.prerender)
-      appendHeader(useRequestEvent(), "x-nitro-prerender", path);
+    const path = getOgImagePath(basePath, defu(resolvedOptions, { _query: options._query }));
+    if (import.meta.prerender) {
+      appendHeader(useRequestEvent(nuxtApp), "x-nitro-prerender", path);
+    }
     createOgImageMeta(path, options, resolvedOptions, nuxtApp.ssrContext);
   }
 }

package/dist/runtime/app/utils/plugins.js

@@ -36,7 +36,11 @@ export function ogImageCanonicalUrls(nuxtApp) {
           ctx2.tags = ctx2.tags.filter(Boolean);
           for (const tag of ctx2.tags) {
             if (tag.tag === "meta" && (tag.props.property === "og:image" || ["twitter:image:src", "twitter:image"].includes(tag.props.name))) {
-              if (!tag.props.content.startsWith("https")) {
+              if (!tag.props.content) {
+                tag.props = {};
+                continue;
+              }
+              if (!tag.props.content?.startsWith("https")) {
                 await nuxtApp.runWithContext(() => {
                   tag.props.content = toValue(withSiteUrl(tag.props.content, {
                     withBase: true

package/dist/runtime/logger.d.ts

@@ -0,0 +1,2 @@
+export declare const logger: import("consola").ConsolaInstance;
+export declare const gray: (s: string) => string;

package/dist/runtime/logger.js

@@ -0,0 +1,8 @@
+import { createConsola } from "consola";
+import { colorize } from "consola/utils";
+export const logger = createConsola({
+  defaults: {
+    tag: "@nuxtjs/og-image"
+  }
+});
+export const gray = (s) => colorize("gray", s);

package/dist/runtime/pure.js

@@ -9,8 +9,9 @@ function detectBase64MimeType(data) {
     "AAABAA": "image/x-icon"
   };
   for (const s in signatures) {
-    if (data.indexOf(s) === 0)
+    if (data.startsWith(s)) {
       return signatures[s];
+    }
   }
   return "image/svg+xml";
 }
@@ -64,17 +65,27 @@ export function separateProps(options, ignoreKeys = []) {
 export function normaliseFontInput(fonts) {
   return fonts.map((f) => {
     if (typeof f === "string") {
-      const [name, weight] = f.split(":");
+      const vals = f.split(":");
+      const includesStyle = vals.length === 3;
+      let name, weight, style;
+      if (includesStyle) {
+        name = vals[0];
+        style = vals[1];
+        weight = vals[2];
+      } else {
+        name = vals[0];
+        weight = vals[1];
+      }
       return {
         cacheKey: f,
         name,
         weight: weight || 400,
-        style: "normal",
+        style: style || "normal",
         path: void 0
       };
     }
     return {
-      cacheKey: f.key || `${f.name}:${f.weight}`,
+      cacheKey: f.key || `${f.name}:${f.style}:${f.weight}`,
       style: "normal",
       weight: 400,
       ...f

package/dist/runtime/server/og-image/context.d.ts

@@ -1,5 +1,5 @@
 import type { H3Error, H3Event } from 'h3';
 import type { OgImageOptions, OgImageRenderEventContext } from '../../types.js';
-export declare function resolvePathCacheKey(e: H3Event, path?: string): string;
+export declare function resolvePathCacheKey(e: H3Event, path: string): string;
 export declare function resolveContext(e: H3Event): Promise<H3Error | OgImageRenderEventContext>;
 export declare function extractAndNormaliseOgImageOptions(html: string): OgImageOptions | false;