nuxt-og-image 5.0.5 → 5.1.1

package/dist/module.cjs

@@ -206,10 +206,11 @@ async function applyNitroPresetCompatibility(nitroConfig, options) {
   const { resolve } = options;
   const satoriEnabled = typeof options.compatibility?.satori !== "undefined" ? !!options.compatibility.satori : !!compatibility.satori;
   const chromiumEnabled = typeof options.compatibility?.chromium !== "undefined" ? !!options.compatibility.chromium : !!compatibility.chromium;
-  nitroConfig.alias["#og-image/renderers/satori"] = satoriEnabled ? resolve("./runtime/server/og-image/satori/renderer") : resolve("./runtime/mock/empty");
-  nitroConfig.alias["#og-image/renderers/chromium"] = chromiumEnabled ? resolve("./runtime/server/og-image/chromium/renderer") : resolve("./runtime/mock/empty");
+  const emptyMock = await resolve.resolvePath("./runtime/mock/empty");
+  nitroConfig.alias["#og-image/renderers/satori"] = satoriEnabled ? await resolve.resolvePath("./runtime/server/og-image/satori/renderer") : emptyMock;
+  nitroConfig.alias["#og-image/renderers/chromium"] = chromiumEnabled ? await resolve.resolvePath("./runtime/server/og-image/chromium/renderer") : emptyMock;
   const resolvedCompatibility = {};
-  function applyBinding(key) {
+  async function applyBinding(key) {
     let binding = options.compatibility?.[key];
     if (typeof binding === "undefined")
       binding = compatibility[key];
@@ -222,15 +223,15 @@ async function applyNitroPresetCompatibility(nitroConfig, options) {
     }
     resolvedCompatibility[key] = binding;
     return {
-      [`#og-image/bindings/${key}`]: binding === false ? resolve("./runtime/mock/empty") : resolve(`./runtime/server/og-image/bindings/${key}/${binding}`)
+      [`#og-image/bindings/${key}`]: binding === false ? emptyMock : await resolve.resolvePath(`./runtime/server/og-image/bindings/${key}/${binding}`)
     };
   }
   nitroConfig.alias = defu.defu(
-    applyBinding("chromium"),
-    applyBinding("satori"),
-    applyBinding("resvg"),
-    applyBinding("sharp"),
-    applyBinding("css-inline"),
+    await applyBinding("chromium"),
+    await applyBinding("satori"),
+    await applyBinding("resvg"),
+    await applyBinding("sharp"),
+    await applyBinding("css-inline"),
     nitroConfig.alias || {}
   );
   if (Object.values(compatibility).includes("wasm")) {
@@ -264,11 +265,11 @@ async function setupBuildHandler(config, resolve, nuxt = kit.useNuxt()) {
     nuxt.options.nitro.storage["og-image"] = config.runtimeCacheStorage;
   nuxt.hooks.hook("nitro:config", async (nitroConfig) => {
     await applyNitroPresetCompatibility(nitroConfig, { compatibility: config.compatibility?.runtime, resolve });
-    nitroConfig.alias.electron = resolve("./runtime/mock/proxy-cjs");
-    nitroConfig.alias.bufferutil = resolve("./runtime/mock/proxy-cjs");
-    nitroConfig.alias["utf-8-validate"] = resolve("./runtime/mock/proxy-cjs");
-    nitroConfig.alias.queue = resolve("./runtime/mock/proxy-cjs");
-    nitroConfig.alias["chromium-bidi"] = resolve("./runtime/mock/proxy-cjs");
+    nitroConfig.alias.electron = await resolve.resolvePath("./runtime/mock/proxy-cjs");
+    nitroConfig.alias.bufferutil = await resolve.resolvePath("./runtime/mock/proxy-cjs");
+    nitroConfig.alias["utf-8-validate"] = await resolve.resolvePath("./runtime/mock/proxy-cjs");
+    nitroConfig.alias.queue = await resolve.resolvePath("./runtime/mock/proxy-cjs");
+    nitroConfig.alias["chromium-bidi"] = await resolve.resolvePath("./runtime/mock/proxy-cjs");
   });
   nuxt.hooks.hook("nitro:init", async (nitro) => {
     const target = resolveNitroPreset(nitro.options);
@@ -285,12 +286,12 @@ async function setupBuildHandler(config, resolve, nuxt = kit.useNuxt()) {
       if (compatibility.wasm?.esmImport !== true)
         return;
       const configuredEntry = nitro.options.rollupConfig?.output.entryFileNames;
-      const serverEntry = resolve(_nitro.options.output.serverDir, typeof configuredEntry === "string" ? configuredEntry : "index.mjs");
+      const serverEntry = resolve.resolve(_nitro.options.output.serverDir, typeof configuredEntry === "string" ? configuredEntry : "index.mjs");
       const wasmEntries = [serverEntry];
       if (isCloudflarePagesOrModule) {
-        wasmEntries.push(resolve(pathe.dirname(serverEntry), "./chunks/wasm.mjs"));
-        wasmEntries.push(resolve(pathe.dirname(serverEntry), "./chunks/_/wasm.mjs"));
-        wasmEntries.push(resolve(pathe.dirname(serverEntry), "./chunks/index_bg.mjs"));
+        wasmEntries.push(resolve.resolve(pathe.dirname(serverEntry), "./chunks/wasm.mjs"));
+        wasmEntries.push(resolve.resolve(pathe.dirname(serverEntry), "./chunks/_/wasm.mjs"));
+        wasmEntries.push(resolve.resolve(pathe.dirname(serverEntry), "./chunks/index_bg.mjs"));
       }
       const resvgHash = await resolveFilePathSha1("@resvg/resvg-wasm/index_bg.wasm");
       const yogaHash = await resolveFilePathSha1("yoga-wasm-web/dist/yoga.wasm");
@@ -345,8 +346,27 @@ function setupDevToolsUI(options, resolve, nuxt = kit.useNuxt()) {
       };
     });
   }
+  const useNitro = new Promise((resolve2) => {
+    nuxt.hooks.hook("nitro:init", resolve2);
+  });
   devtoolsKit.onDevToolsInitialized(async () => {
-    const rpc = devtoolsKit.extendServerRpc("nuxt-og-image", {});
+    const rpc = devtoolsKit.extendServerRpc("nuxt-og-image", {
+      async ejectCommunityTemplate(path) {
+        const [dirName, componentName] = path.split("/");
+        const dir = resolve(nuxt.options.rootDir, "components", dirName);
+        if (!fs.existsSync(dir)) {
+          fs.mkdirSync(dir);
+        }
+        const newPath = resolve(dir, componentName);
+        const templatePath = resolve(`./runtime/app/components/Templates/Community/${componentName}`);
+        const template = (await promises.readFile(templatePath, "utf-8")).replace("{{ title }}", `{{ title }} - Ejected!`);
+        await promises.writeFile(newPath, template, { encoding: "utf-8" });
+        await kit.updateTemplates({ filter: (t) => t.filename.includes("nuxt-og-image/components.mjs") });
+        const nitro = await useNitro;
+        await nitro.hooks.callHook("rollup:reload");
+        return newPath;
+      }
+    });
     nuxt.hook("builder:watch", (e, path) => {
       path = node_path.relative(nuxt.options.srcDir, resolve(nuxt.options.srcDir, path));
       if ((e === "change" || e.includes("link")) && (path.startsWith("pages") || path.startsWith("content"))) {
@@ -546,6 +566,10 @@ function normaliseFontInput(fonts) {
   });
 }
 
+function isProviderEnabledForEnv(provider, nuxt, config) {
+  return nuxt.options.dev && config.compatibility?.dev?.[provider] !== false || !nuxt.options.dev && (config.compatibility?.runtime?.[provider] !== false || config.compatibility?.prerender?.[provider] !== false);
+}
+const defaultComponentDirs = ["OgImage", "og-image", "OgImageTemplate"];
 const module$1 = kit.defineNuxtModule({
   meta: {
     name: "nuxt-og-image",
@@ -568,14 +592,15 @@ const module$1 = kit.defineNuxtModule({
         // default is to cache the image for 3 day (72 hours)
         cacheMaxAgeSeconds: 60 * 60 * 24 * 3
       },
-      componentDirs: ["OgImage", "OgImageTemplate"],
+      componentDirs: defaultComponentDirs,
       fonts: [],
       runtimeCacheStorage: true,
       debug: stdEnv.isDevelopment
     };
   },
   async setup(config, nuxt) {
-    const { resolve } = kit.createResolver((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('module.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('module.cjs', document.baseURI).href)));
+    const { resolve } = resolver;
     const { version } = await pkgTypes.readPackageJSON(resolve("../package.json"));
     logger_js.logger.level = config.debug || nuxt.options.debug ? 4 : 3;
     if (config.enabled === false) {
@@ -607,68 +632,152 @@ const module$1 = kit.defineNuxtModule({
         nuxt.options.alias["#og-image-cache"] = resolve("./runtime/server/og-image/cache/mock");
       }
     }
-    let isUsingSharp = false;
-    const userConfiguredExtension = config.defaults.extension;
-    const hasConfiguredJpegs = userConfiguredExtension && ["jpeg", "jpg"].includes(userConfiguredExtension);
-    if (!!config.sharpOptions || hasConfiguredJpegs && config.defaults.renderer !== "chromium") {
-      isUsingSharp = true;
-      const hasSharpDependency = await hasResolvableDependency("sharp");
-      if (hasSharpDependency && !targetCompatibility.sharp) {
-        logger_js.logger.warn(`Rendering JPEGs requires sharp which does not work with ${preset}. Images will be rendered as PNG at runtime.`);
+    const basePath = config.zeroRuntime ? "./runtime/server/routes/__zero-runtime" : "./runtime/server/routes";
+    let publicDirAbs = nuxt.options.dir.public;
+    if (!pathe.isAbsolute(publicDirAbs)) {
+      publicDirAbs = publicDirAbs in nuxt.options.alias ? nuxt.options.alias[publicDirAbs] : resolve(nuxt.options.rootDir, publicDirAbs);
+    }
+    if (isProviderEnabledForEnv("satori", nuxt, config)) {
+      let isUsingSharp = false;
+      if (isProviderEnabledForEnv("sharp", nuxt, config)) {
+        const userConfiguredExtension = config.defaults.extension;
+        const hasConfiguredJpegs = userConfiguredExtension && ["jpeg", "jpg"].includes(userConfiguredExtension);
+        if (!!config.sharpOptions || hasConfiguredJpegs && config.defaults.renderer !== "chromium") {
+          isUsingSharp = true;
+          const hasSharpDependency = await hasResolvableDependency("sharp");
+          if (hasSharpDependency && !targetCompatibility.sharp) {
+            logger_js.logger.warn(`Rendering JPEGs requires sharp which does not work with ${preset}. Images will be rendered as PNG at runtime.`);
+            config.compatibility = defu.defu(config.compatibility, {
+              runtime: { sharp: false }
+            });
+          } else if (!hasSharpDependency) {
+            logger_js.logger.warn("You have enabled `JPEG` images. These require the `sharp` dependency which is missing, installing it for you.");
+            await ensureDependencies(["sharp"]);
+            logger_js.logger.warn("Support for `sharp` is limited so check the compatibility guide.");
+          }
+        }
+      }
+      if (!isUsingSharp) {
         config.compatibility = defu.defu(config.compatibility, {
-          runtime: { sharp: false }
+          runtime: { sharp: false },
+          dev: { sharp: false },
+          prerender: { sharp: false }
         });
-      } else if (!hasSharpDependency) {
-        logger_js.logger.warn("You have enabled `JPEG` images. These require the `sharp` dependency which is missing, installing it for you.");
-        await ensureDependencies(["sharp"]);
-        logger_js.logger.warn("Support for `sharp` is limited so check the compatibility guide.");
       }
-    }
-    if (!isUsingSharp) {
-      config.compatibility = defu.defu(config.compatibility, {
-        runtime: { sharp: false },
-        dev: { sharp: false },
-        prerender: { sharp: false }
+      if (isProviderEnabledForEnv("resvg", nuxt, config)) {
+        await import('@resvg/resvg-js').catch(() => {
+          logger_js.logger.warn("ReSVG is missing dependencies for environment. Falling back to WASM version, this may slow down PNG rendering.");
+          config.compatibility = defu.defu(config.compatibility, {
+            dev: { resvg: "wasm-fs" },
+            prerender: { resvg: "wasm-fs" }
+          });
+          if (targetCompatibility.resvg === "node") {
+            config.compatibility = defu.defu(config.compatibility, {
+              runtime: { resvg: "wasm" }
+            });
+          }
+        });
+      }
+      if (!config.fonts.length) {
+        config.fonts = [
+          {
+            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
+          }
+        ];
+      }
+      const serverFontsDir = resolve(nuxt.options.buildDir, "cache", `nuxt-og-image@${version}`, "_fonts");
+      const fontStorage = unstorage.createStorage({
+        driver: fsDriver__default({
+          base: serverFontsDir
+        })
+      });
+      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_js.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:${fontFileBase}.ttf.base64`;
+          } else {
+            logger_js.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 = pathe.basename(f.path.replace(".base64", "")).split(".").pop();
+          if (!["woff", "ttf", "otf"].includes(extension)) {
+            logger_js.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, ufo.withoutLeadingSlash(f.path));
+          if (!fs.existsSync(f.path)) {
+            logger_js.logger.warn(`The ${fontKey} font was skipped because the file does not exist at path ${f.path}.`);
+            return false;
+          }
+          const fontData = await promises.readFile(f.path, f.path.endsWith(".base64") ? "utf-8" : "base64");
+          f.key = `nuxt-og-image:fonts:${fontFileBase}.${extension}.base64`;
+          await fontStorage.setItem(`${fontFileBase}.${extension}.base64`, fontData);
+          delete f.path;
+          delete f.absolutePath;
+        }
+        return f;
+      }))).filter(Boolean);
+      const fontKeys = config.fonts.map((f) => f.key?.split(":").pop());
+      const fontStorageKeys = await fontStorage.getKeys();
+      await Promise.all(fontStorageKeys.filter((key) => !fontKeys.includes(key)).map(async (key) => {
+        logger_js.logger.info(`Nuxt OG Image removing outdated cached font file \`${key}\``);
+        await fontStorage.removeItem(key);
+      }));
+      if (!config.zeroRuntime) {
+        nuxt.options.nitro.serverAssets = nuxt.options.nitro.serverAssets || [];
+        nuxt.options.nitro.serverAssets.push({ baseName: "nuxt-og-image:fonts", dir: serverFontsDir });
+      }
+      kit.addServerHandler({
+        lazy: true,
+        route: "/__og-image__/font/**",
+        handler: resolve(`${basePath}/font`)
       });
     }
-    const hasChromeLocally = checkLocalChrome();
-    const hasPlaywrightDependency = await hasResolvableDependency("playwright");
-    const chromeCompatibilityFlags = {
-      prerender: config.compatibility?.prerender?.chromium,
-      dev: config.compatibility?.dev?.chromium,
-      runtime: config.compatibility?.runtime?.chromium
-    };
-    const chromiumBinding = {
-      dev: null,
-      prerender: null,
-      runtime: null
-    };
-    if (nuxt.options.dev) {
-      if (isUndefinedOrTruthy(chromeCompatibilityFlags.dev))
-        chromiumBinding.dev = hasChromeLocally ? "chrome-launcher" : hasPlaywrightDependency ? "playwright" : "on-demand";
-    } else {
-      if (isUndefinedOrTruthy(chromeCompatibilityFlags.prerender))
-        chromiumBinding.prerender = hasChromeLocally ? "chrome-launcher" : hasPlaywrightDependency ? "playwright" : "on-demand";
-      if (isUndefinedOrTruthy(chromeCompatibilityFlags.runtime))
-        chromiumBinding.runtime = hasPlaywrightDependency ? "playwright" : null;
-    }
-    config.compatibility = defu.defu(config.compatibility, {
-      runtime: { chromium: chromiumBinding.runtime },
-      dev: { chromium: chromiumBinding.dev },
-      prerender: { chromium: chromiumBinding.prerender }
-    });
-    await import('@resvg/resvg-js').catch(() => {
-      logger_js.logger.warn("ReSVG is missing dependencies for environment. Falling back to WASM version, this may slow down PNG rendering.");
+    if (isProviderEnabledForEnv("chromium", nuxt, config)) {
+      const hasChromeLocally = checkLocalChrome();
+      const hasPlaywrightDependency = await hasResolvableDependency("playwright");
+      const chromeCompatibilityFlags = {
+        prerender: config.compatibility?.prerender?.chromium,
+        dev: config.compatibility?.dev?.chromium,
+        runtime: config.compatibility?.runtime?.chromium
+      };
+      const chromiumBinding = {
+        dev: null,
+        prerender: null,
+        runtime: null
+      };
+      if (nuxt.options.dev) {
+        if (isUndefinedOrTruthy(chromeCompatibilityFlags.dev))
+          chromiumBinding.dev = hasChromeLocally ? "chrome-launcher" : hasPlaywrightDependency ? "playwright" : "on-demand";
+      } else {
+        if (isUndefinedOrTruthy(chromeCompatibilityFlags.prerender))
+          chromiumBinding.prerender = hasChromeLocally ? "chrome-launcher" : hasPlaywrightDependency ? "playwright" : "on-demand";
+        if (isUndefinedOrTruthy(chromeCompatibilityFlags.runtime))
+          chromiumBinding.runtime = hasPlaywrightDependency ? "playwright" : null;
+      }
       config.compatibility = defu.defu(config.compatibility, {
-        dev: { resvg: "wasm-fs" },
-        prerender: { resvg: "wasm-fs" }
+        runtime: { chromium: chromiumBinding.runtime },
+        dev: { chromium: chromiumBinding.dev },
+        prerender: { chromium: chromiumBinding.prerender }
       });
-      if (targetCompatibility.resvg === "node") {
-        config.compatibility = defu.defu(config.compatibility, {
-          runtime: { resvg: "wasm" }
-        });
-      }
-    });
+    }
     await kit$1.installNuxtSiteConfig();
     const usingNuxtContent = kit.hasNuxtModule("@nuxt/content");
     const isNuxtContentV3 = usingNuxtContent && await kit.hasNuxtModuleCompatibility("@nuxt/content", "^3");
@@ -680,73 +789,7 @@ const module$1 = kit.defineNuxtModule({
     } else if (isNuxtContentV2) {
       kit.addServerPlugin(resolve("./runtime/server/plugins/nuxt-content-v2"));
     }
-    if (!config.fonts.length) {
-      config.fonts = [
-        { 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;
-    if (!pathe.isAbsolute(publicDirAbs)) {
-      publicDirAbs = publicDirAbs in nuxt.options.alias ? nuxt.options.alias[publicDirAbs] : resolve(nuxt.options.rootDir, publicDirAbs);
-    }
-    const serverFontsDir = resolve(nuxt.options.buildDir, "cache", `nuxt-og-image@${version}`, "_fonts");
-    const fontStorage = unstorage.createStorage({
-      driver: fsDriver__default({
-        base: serverFontsDir
-      })
-    });
-    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_js.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:${fontFileBase}.ttf.base64`;
-        } else {
-          logger_js.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 = pathe.basename(f.path.replace(".base64", "")).split(".").pop();
-        if (!["woff", "ttf", "otf"].includes(extension)) {
-          logger_js.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, ufo.withoutLeadingSlash(f.path));
-        if (!fs.existsSync(f.path)) {
-          logger_js.logger.warn(`The ${fontKey} font was skipped because the file does not exist at path ${f.path}.`);
-          return false;
-        }
-        const fontData = await promises.readFile(f.path, f.path.endsWith(".base64") ? "utf-8" : "base64");
-        f.key = `nuxt-og-image:fonts:${fontFileBase}.${extension}.base64`;
-        await fontStorage.setItem(`${fontFileBase}.${extension}.base64`, fontData);
-        delete f.path;
-        delete f.absolutePath;
-      }
-      return f;
-    }))).filter(Boolean);
-    const fontKeys = config.fonts.map((f) => f.key?.split(":").pop());
-    const fontStorageKeys = await fontStorage.getKeys();
-    await Promise.all(fontStorageKeys.filter((key) => !fontKeys.includes(key)).map(async (key) => {
-      logger_js.logger.info(`Nuxt OG Image removing outdated cached font file \`${key}\``);
-      await fontStorage.removeItem(key);
-    }));
-    if (!config.zeroRuntime) {
-      nuxt.options.nitro.serverAssets = nuxt.options.nitro.serverAssets || [];
-      nuxt.options.nitro.serverAssets.push({ baseName: "nuxt-og-image:fonts", dir: serverFontsDir });
-    }
     nuxt.options.experimental.componentIslands ||= true;
-    const basePath = config.zeroRuntime ? "./runtime/server/routes/__zero-runtime" : "./runtime/server/routes";
-    kit.addServerHandler({
-      lazy: true,
-      route: "/__og-image__/font/**",
-      handler: resolve(`${basePath}/font`)
-    });
     if (config.debug || nuxt.options.dev) {
       kit.addServerHandler({
         lazy: true,
@@ -767,7 +810,18 @@ const module$1 = kit.defineNuxtModule({
     if (!nuxt.options.dev) {
       nuxt.options.optimization.treeShake.composables.client["nuxt-og-image"] = [];
     }
-    ["defineOgImage", "defineOgImageComponent", "defineOgImageScreenshot"].forEach((name) => {
+    [
+      "defineOgImage",
+      "defineOgImageComponent",
+      { name: "defineOgImageScreenshot", enabled: isProviderEnabledForEnv("chromium", nuxt, config) }
+    ].forEach((name) => {
+      if (typeof name === "object") {
+        if (!name.enabled) {
+          kit.addImports({ name: name.name, from: resolve(`./runtime/app/composables/mock`) });
+          return;
+        }
+        name = name.name;
+      }
       kit.addImports({
         name,
         from: resolve(`./runtime/app/composables/${name}`)
@@ -797,6 +851,17 @@ const module$1 = kit.defineNuxtModule({
     const basePluginPath = `./runtime/app/plugins${config.zeroRuntime ? "/__zero-runtime" : ""}`;
     kit.addPlugin({ mode: "server", src: resolve(`${basePluginPath}/route-rule-og-image.server`) });
     kit.addPlugin({ mode: "server", src: resolve(`${basePluginPath}/og-image-canonical-urls.server`) });
+    for (const componentDir of config.componentDirs) {
+      const path = resolve(nuxt.options.srcDir, "components", componentDir);
+      if (fs.existsSync(path)) {
+        kit.addComponentsDir({
+          path,
+          island: true
+        });
+      } else if (!defaultComponentDirs.includes(componentDir)) {
+        logger_js.logger.warn(`The configured component directory \`./${pathe.relative(nuxt.options.rootDir, path)}\` does not exist. Skipping.`);
+      }
+    }
     const ogImageComponentCtx = { components: [] };
     nuxt.hook("components:extend", (components) => {
       ogImageComponentCtx.components = [];
@@ -925,20 +990,23 @@ declare module '#og-image/unocss-config' {
         // @ts-expect-error runtime type
         isNuxtContentDocumentDriven: config.strictNuxtContentPaths || !!nuxt.options.content?.documentDriven
       };
+      if (nuxt.options.dev) {
+        runtimeConfig.componentDirs = config.componentDirs;
+      }
       nuxt.hooks.callHook("nuxt-og-image:runtime-config", runtimeConfig);
       nuxt.options.runtimeConfig["nuxt-og-image"] = runtimeConfig;
     });
     if (nuxt.options.dev) {
-      setupDevHandler(config, resolve);
+      setupDevHandler(config, resolver);
       setupDevToolsUI(config, resolve);
     } else if (isNuxtGenerate()) {
-      setupGenerateHandler(config, resolve);
+      setupGenerateHandler(config, resolver);
     } else if (nuxt.options.build) {
-      await setupBuildHandler(config, resolve);
+      await setupBuildHandler(config, resolver);
     }
     if (nuxt.options.build)
       kit.addServerPlugin(resolve("./runtime/server/plugins/prerender"));
-    setupPrerenderHandler(config, resolve);
+    setupPrerenderHandler(config, resolver);
   }
 });
 

package/dist/module.d.cts

@@ -71,7 +71,7 @@ interface ModuleOptions {
     /**
      * Extra component directories that should be used to resolve components.
      *
-     * @default ['OgImage', 'OgImageTemplate']
+     * @default ['OgImage', 'og-image', 'OgImageTemplate']
      */
     componentDirs: string[];
     /**

package/dist/module.d.mts

@@ -71,7 +71,7 @@ interface ModuleOptions {
     /**
      * Extra component directories that should be used to resolve components.
      *
-     * @default ['OgImage', 'OgImageTemplate']
+     * @default ['OgImage', 'og-image', 'OgImageTemplate']
      */
     componentDirs: string[];
     /**

package/dist/module.d.ts

@@ -71,7 +71,7 @@ interface ModuleOptions {
     /**
      * Extra component directories that should be used to resolve components.
      *
-     * @default ['OgImage', 'OgImageTemplate']
+     * @default ['OgImage', 'og-image', 'OgImageTemplate']
      */
     componentDirs: string[];
     /**

package/dist/module.json

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