nuxt-og-image 5.1.7 → 5.1.9

package/dist/module.mjs

@@ -1,11 +1,11 @@
 import * as fs from 'node:fs';
 import { existsSync, mkdirSync } from 'node:fs';
 import { readFile, writeFile } from 'node:fs/promises';
-import { resolvePath, useNuxt, addTemplate, updateTemplates, createResolver, loadNuxtModuleInstance, defineNuxtModule, addImports, addBuildPlugin, addServerHandler, hasNuxtModule, hasNuxtModuleCompatibility, addServerPlugin, addComponentsDir, addComponent, addPlugin } from '@nuxt/kit';
+import { resolvePath, useNuxt, addTemplate, updateTemplates, loadNuxtModuleInstance, defineNuxtModule, createResolver, addImports, addBuildPlugin, addServerHandler, hasNuxtModule, hasNuxtModuleCompatibility, addServerPlugin, addComponentsDir, addComponent, addPlugin, addTypeTemplate } from '@nuxt/kit';
 import { defu } from 'defu';
 import { installNuxtSiteConfig } from 'nuxt-site-config/kit';
 import { hash } from 'ohash';
-import { dirname, relative as relative$1, isAbsolute, basename } from 'pathe';
+import { dirname, isAbsolute, basename, relative as relative$1 } from 'pathe';
 import { readPackageJSON } from 'pkg-types';
 import { isCI, provider, env, isDevelopment } from 'std-env';
 import { parseURL, parseQuery, withoutLeadingSlash } from 'ufo';
@@ -129,6 +129,7 @@ const RuntimeCompatibility = {
     "satori": "node",
     "sharp": false,
     "wasm": {
+      // @ts-expect-error untyped
       rollup: {
         targetEnv: "auto-inline",
         sync: ["@resvg/resvg-wasm/index_bg.wasm"]
@@ -289,7 +290,7 @@ async function setupBuildHandler(config, resolve, nuxt = useNuxt()) {
 }
 async function resolveFilePathSha1(path) {
   const _path = await resolvePath(path);
-  return sha1(existsSync(_path) ? await readFile(_path) : path);
+  return sha1(existsSync(_path) ? await readFile(_path) : Buffer.from(path));
 }
 function sha1(source) {
   return createHash("sha1").update(source).digest("hex").slice(0, 16);
@@ -333,11 +334,11 @@ function setupDevToolsUI(options, resolve, nuxt = useNuxt()) {
     const rpc = extendServerRpc("nuxt-og-image", {
       async ejectCommunityTemplate(path) {
         const [dirName, componentName] = path.split("/");
-        const dir = resolve(nuxt.options.rootDir, "components", dirName);
+        const dir = resolve(nuxt.options.rootDir, "components", dirName || "");
         if (!existsSync(dir)) {
           mkdirSync(dir);
         }
-        const newPath = resolve(dir, componentName);
+        const newPath = resolve(dir, componentName || "");
         const templatePath = resolve(`./runtime/app/components/Templates/Community/${componentName}`);
         const template = (await readFile(templatePath, "utf-8")).replace("{{ title }}", `{{ title }} - Ejected!`);
         await writeFile(newPath, template, { encoding: "utf-8" });
@@ -487,30 +488,6 @@ async function getNuxtModuleOptions(module, nuxt = useNuxt()) {
     return nuxtModule.getOptions(inlineOptions, nuxt);
   return inlineOptions;
 }
-function extendTypes(module, template) {
-  const nuxt = useNuxt();
-  const { resolve } = createResolver(import.meta.url);
-  addTemplate({
-    filename: `module/${module}.d.ts`,
-    getContents: async () => {
-      const typesPath = relative$1(resolve(nuxt.options.rootDir, nuxt.options.buildDir, "module"), resolve("runtime/types"));
-      const s = await template({ typesPath });
-      return `// Generated by ${module}
-${s}
-export {}
-`;
-    }
-  });
-  nuxt.hooks.hook("prepare:types", ({ references }) => {
-    references.push({ path: resolve(nuxt.options.buildDir, `module/${module}.d.ts`) });
-  });
-  nuxt.hooks.hook("nitro:config", (config) => {
-    config.typescript = config.typescript || {};
-    config.typescript.tsConfig = config.typescript.tsConfig || {};
-    config.typescript.tsConfig.include = config.typescript.tsConfig.include || [];
-    config.typescript.tsConfig.include.push(`./module/${module}.d.ts`);
-  });
-}
 function isNuxtGenerate(nuxt = useNuxt()) {
   return nuxt.options._generate || nuxt.options.nitro.static || nuxt.options.nitro.preset === "static";
 }
@@ -555,8 +532,7 @@ const module = defineNuxtModule({
   meta: {
     name: "nuxt-og-image",
     compatibility: {
-      nuxt: ">=3.16.0",
-      bridge: false
+      nuxt: ">=3.16.0"
     },
     configKey: "ogImage"
   },
@@ -617,7 +593,7 @@ const module = defineNuxtModule({
     const basePath = config.zeroRuntime ? "./runtime/server/routes/__zero-runtime" : "./runtime/server/routes";
     let publicDirAbs = nuxt.options.dir.public;
     if (!isAbsolute(publicDirAbs)) {
-      publicDirAbs = publicDirAbs in nuxt.options.alias ? nuxt.options.alias[publicDirAbs] : resolve(nuxt.options.rootDir, publicDirAbs);
+      publicDirAbs = (publicDirAbs in nuxt.options.alias ? nuxt.options.alias[publicDirAbs] : resolve(nuxt.options.rootDir, publicDirAbs)) || "";
     }
     if (isProviderEnabledForEnv("satori", nuxt, config)) {
       let attemptSharpUsage = false;
@@ -818,6 +794,8 @@ const module = defineNuxtModule({
         from: resolve(`./runtime/app/composables/${name}`)
       });
       if (!nuxt.options.dev) {
+        nuxt.options.optimization.treeShake.composables.client = nuxt.options.optimization.treeShake.composables.client || {};
+        nuxt.options.optimization.treeShake.composables.client["nuxt-og-image"] = nuxt.options.optimization.treeShake.composables.client["nuxt-og-image"] || [];
         nuxt.options.optimization.treeShake.composables.client["nuxt-og-image"].push(name);
       }
     });
@@ -879,7 +857,7 @@ const module = defineNuxtModule({
             hash: hash(componentFile).replaceAll("_", "-"),
             pascalName: component.pascalName,
             kebabName: component.kebabName,
-            path: nuxt.options.dev ? component.filePath : void 0,
+            path: component.filePath,
             category,
             credits
           });
@@ -908,17 +886,18 @@ const module = defineNuxtModule({
     nuxt.options.nitro.virtual["#og-image-virtual/unocss-config.mjs"] = () => {
       return `export const theme = ${JSON.stringify(unoCssConfig)}`;
     };
-    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 name = config.componentDirs.sort((a, b) => b.length - a.length).reduce((name2, dir) => {
-          return name2.replace(new RegExp(`^${dir}`), "");
-        }, component.pascalName);
-        return `    '${name}': typeof import('${relativeComponentPath}')['default']`;
-      }).join("\n");
-      return `
-declare module 'nitropack' {
-  interface NitroRouteRules {
+    addTypeTemplate({
+      filename: "module/nuxt-og-image.d.ts",
+      getContents: (data) => {
+        const typesPath = relative$1(resolve(data.nuxt.options.rootDir, data.nuxt.options.buildDir, "module"), resolve("runtime/types"));
+        const componentImports = ogImageComponentCtx.components.map((component) => {
+          const relativeComponentPath = relative$1(resolve(nuxt.options.rootDir, nuxt.options.buildDir, "module"), component.path);
+          const name = config.componentDirs.sort((a, b) => b.length - a.length).reduce((name2, dir) => {
+            return name2.replace(new RegExp(`^${dir}`), "");
+          }, component.pascalName);
+          return `    '${name}': typeof import('${relativeComponentPath}')['default']`;
+        }).join("\n");
+        const types = `interface NitroRouteRules {
     ogImage?: false | import('${typesPath}').OgImageOptions & Record<string, any>
   }
   interface NitroRouteConfig {
@@ -927,7 +906,14 @@ declare module 'nitropack' {
   interface NitroRuntimeHooks {
     'nuxt-og-image:context': (ctx: import('${typesPath}').OgImageRenderEventContext) => void | Promise<void>
     'nuxt-og-image:satori:vnodes': (vnodes: import('${typesPath}').VNode, ctx: import('${typesPath}').OgImageRenderEventContext) => void | Promise<void>
-  }
+  }`;
+        return `
+declare module 'nitropack' {
+${types}
+}
+
+declare module 'nitropack/types' {
+${types}
 }
 
 declare module '#og-image/components' {
@@ -938,7 +924,13 @@ ${componentImports}
 declare module '#og-image/unocss-config' {
   export type theme = any
 }
+
+export {}
 `;
+      }
+    }, {
+      nitro: true,
+      nuxt: true
     });
     const cacheEnabled = typeof config.runtimeCacheStorage !== "undefined" && config.runtimeCacheStorage !== false;
     const runtimeCacheStorage = typeof config.runtimeCacheStorage === "boolean" ? "default" : config.runtimeCacheStorage.driver;

package/dist/runtime/app/components/OgImage/OgImage.js

@@ -1,5 +1,5 @@
-import { defineOgImage } from "#imports";
 import { defineComponent } from "vue";
+import { defineOgImage } from "../../composables/defineOgImage.js";
 export default defineComponent({
   name: "OgImage",
   async setup(_, { attrs }) {

package/dist/runtime/app/components/OgImage/OgImageScreenshot.js

@@ -1,5 +1,5 @@
-import { defineOgImageScreenshot } from "#imports";
 import { defineComponent } from "vue";
+import { defineOgImageScreenshot } from "../../composables/defineOgImageScreenshot.js";
 export default defineComponent({
   name: "OgImageScreenshot",
   async setup(_, { attrs }) {

package/dist/runtime/app/components/Templates/Community/BrandedLogo.vue.d.ts

@@ -5,8 +5,5 @@ type __VLS_Props = {
     title?: string;
     logo?: string;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    title: string;
-    logo: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/app/components/Templates/Community/Frame.vue.d.ts

@@ -14,7 +14,5 @@ type __VLS_Props = {
         icon: string;
     }[];
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    bg: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/app/components/Templates/Community/Nuxt.vue.d.ts

@@ -3,9 +3,5 @@ type __VLS_Props = {
     description?: string;
     headline?: string;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    title: string;
-    description: string;
-    headline: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -1,6 +1,6 @@
 <script setup>
-import { useSiteConfig } from "#imports";
-import { useOgImageRuntimeConfig } from "#og-image/shared";
+import { useOgImageRuntimeConfig } from "#og-image/app/utils";
+import { useSiteConfig } from "#site-config/app/composables";
 import { computed, defineComponent, h, resolveComponent } from "vue";
 const props = defineProps({
   colorMode: { type: String, required: false },

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

@@ -7,8 +7,5 @@ type __VLS_Props = {
     siteLogo?: string;
     theme?: string;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    title: string;
-    theme: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/app/components/Templates/Community/Pergel.vue.d.ts

@@ -3,9 +3,5 @@ type __VLS_Props = {
     description?: string;
     headline?: string;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    title: string;
-    description: string;
-    headline: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -1,6 +1,7 @@
 <script setup>
-import { computed, useSiteConfig } from "#imports";
+import { useSiteConfig } from "#site-config/app/composables";
 import { parseURL } from "ufo";
+import { computed } from "vue";
 const props = defineProps({
   title: { type: String, required: false, default: "title" },
   website: { type: String, required: false }

package/dist/runtime/app/components/Templates/Community/SimpleBlog.vue.d.ts

@@ -2,7 +2,5 @@ type __VLS_Props = {
     title?: string;
     website?: string;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    title: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from "#imports";
+import { computed } from "vue";
 const props = defineProps({
   title: { type: String, required: false, default: "unjs/h3" },
   description: { type: String, required: false, default: "Minimal H(TTP) framework built for high performance and portability" },

package/dist/runtime/app/components/Templates/Community/UnJs.vue.d.ts

@@ -9,12 +9,5 @@ type __VLS_Props = {
     stars?: string | number;
     contributors?: string | number;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    title: string;
-    description: string;
-    emoji: string;
-    downloads: string | number;
-    stars: string | number;
-    contributors: string | number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/app/components/Templates/Community/Wave.vue.d.ts

@@ -4,7 +4,5 @@
 type __VLS_Props = {
     title?: string;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    title: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/app/components/Templates/Community/WithEmoji.vue.d.ts

@@ -5,8 +5,5 @@ type __VLS_Props = {
     emoji?: string;
     title?: string;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    title: string;
-    emoji: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -1,9 +1,7 @@
 import { appendHeader } from "h3";
 import { createError, useNuxtApp, useRequestEvent, useRoute, useState } from "nuxt/app";
 import { ref, toValue } from "vue";
-import { createNitroRouteRuleMatcher } from "../../server/util/kit.js";
-import { getOgImagePath, useOgImageRuntimeConfig } from "../../shared.js";
-import { createOgImageMeta, setHeadOgImagePrebuilt } from "../utils.js";
+import { createOgImageMeta, getOgImagePath, setHeadOgImagePrebuilt, useOgImageRuntimeConfig } from "../utils.js";
 export function defineOgImage(_options = {}) {
   const nuxtApp = useNuxtApp();
   const route = useRoute();
@@ -21,35 +19,25 @@ export function defineOgImage(_options = {}) {
   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) {
-    ogImageInstances.forEach((e) => {
-      e.dispose();
-    });
-    nuxtApp.ssrContext._ogImageInstances = void 0;
-    return;
-  }
   const { defaults } = useOgImageRuntimeConfig();
   const options = toValue(_options);
-  for (const key in routeRules) {
-    if (options[key] === void 0)
-      options[key] = routeRules[key];
+  if (options === false) {
+    return;
   }
+  const validOptions = options;
   for (const key in defaults) {
-    if (options[key] === void 0)
-      options[key] = defaults[key];
+    if (validOptions[key] === void 0)
+      validOptions[key] = defaults[key];
   }
   if (route.query)
-    options._query = route.query;
-  if (options.url) {
-    setHeadOgImagePrebuilt(options);
+    validOptions._query = route.query;
+  if (validOptions.url) {
+    setHeadOgImagePrebuilt(validOptions);
     return;
   }
-  const path = getOgImagePath(basePath, options);
+  const path = getOgImagePath(basePath, validOptions);
   if (import.meta.prerender) {
     appendHeader(useRequestEvent(nuxtApp), "x-nitro-prerender", path);
   }
-  createOgImageMeta(path, options, nuxtApp.ssrContext);
+  createOgImageMeta(path, validOptions, nuxtApp.ssrContext);
 }

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

@@ -1,4 +1,5 @@
-import { defineOgImage, useRouter } from "#imports";
+import { useRouter } from "#app";
+import { defineOgImage } from "./defineOgImage.js";
 export function defineOgImageScreenshot(options = {}) {
   const router = useRouter();
   const route = router.currentRoute.value?.path || "/";

package/dist/runtime/app/plugins/__zero-runtime/og-image-canonical-urls.server.js

@@ -1,4 +1,4 @@
-import { defineNuxtPlugin } from "#imports";
+import { defineNuxtPlugin } from "#app";
 import { ogImageCanonicalUrls as setup } from "../../utils/plugins.js";
 export default defineNuxtPlugin({
   setup(nuxtApp) {

package/dist/runtime/app/plugins/__zero-runtime/route-rule-og-image.server.js

@@ -1,4 +1,4 @@
-import { defineNuxtPlugin } from "#imports";
+import { defineNuxtPlugin } from "#app";
 import { routeRuleOgImage as setup } from "../../utils/plugins.js";
 export default defineNuxtPlugin({
   setup(nuxtApp) {

package/dist/runtime/app/plugins/og-image-canonical-urls.server.js

@@ -1,5 +1,7 @@
-import { defineNuxtPlugin } from "#imports";
+import { defineNuxtPlugin } from "#app";
 import { ogImageCanonicalUrls as setup } from "../utils/plugins.js";
 export default defineNuxtPlugin({
-  setup
+  setup(nuxtApp) {
+    setup(nuxtApp);
+  }
 });

package/dist/runtime/app/plugins/route-rule-og-image.server.js

@@ -1,5 +1,7 @@
-import { defineNuxtPlugin } from "#imports";
+import { defineNuxtPlugin } from "#app";
 import { routeRuleOgImage as setup } from "../utils/plugins.js";
 export default defineNuxtPlugin({
-  setup
+  setup(nuxtApp) {
+    setup(nuxtApp);
+  }
 });

package/dist/runtime/app/utils/plugins.d.ts

@@ -1,3 +1,3 @@
-import type { NuxtApp } from 'nuxt/app';
-export declare function ogImageCanonicalUrls(nuxtApp: NuxtApp): void;
-export declare function routeRuleOgImage(nuxtApp: NuxtApp): void;
+import type { NuxtSSRContext } from '#app/nuxt';
+export declare function ogImageCanonicalUrls(nuxtApp: NuxtSSRContext['nuxt']): void;
+export declare function routeRuleOgImage(nuxtApp: NuxtSSRContext['nuxt']): void;

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

@@ -1,4 +1,5 @@
-import { useRequestEvent, withSiteUrl } from "#imports";
+import { useRequestEvent } from "#app";
+import { withSiteUrl } from "#site-config/app/composables";
 import { TemplateParamsPlugin } from "@unhead/vue/plugins";
 import { defu } from "defu";
 import { parse, stringify } from "devalue";
@@ -6,13 +7,13 @@ import { createRouter as createRadixRouter, toRouteMatcher } from "radix3";
 import { parseURL, withoutBase } from "ufo";
 import { toValue } from "vue";
 import { createOgImageMeta } from "../../app/utils.js";
-import { isInternalRoute, separateProps } from "../../pure.js";
-import { getOgImagePath } from "../../shared.js";
+import { isInternalRoute, separateProps } from "../../shared.js";
+import { getOgImagePath } from "../utils.js";
 export function ogImageCanonicalUrls(nuxtApp) {
   nuxtApp.hooks.hook("app:rendered", async (ctx) => {
     const { ssrContext } = ctx;
     const e = useRequestEvent();
-    const path = parseURL(e.path).pathname;
+    const path = parseURL(e?.path || "").pathname;
     if (isInternalRoute(path))
       return;
     ssrContext?.head.use(TemplateParamsPlugin);
@@ -37,20 +38,20 @@ 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.tag === "meta" && (tag.props.property === "og:image" || ["twitter:image:src", "twitter:image"].includes(tag.props.name || ""))) {
               if (!tag.props.content) {
                 tag.props = {};
                 continue;
               }
               if (!tag.props.content?.startsWith("https")) {
                 await nuxtApp.runWithContext(() => {
-                  tag.props.content = toValue(withSiteUrl(tag.props.content, {
+                  tag.props.content = toValue(withSiteUrl(tag.props.content || "", {
                     withBase: true
                   }));
                 });
               }
             } else if (overrides && tag.tag === "script" && tag.props.id === "nuxt-og-image-options") {
-              tag.innerHTML = stringify(defu(overrides, parse(tag.innerHTML)));
+              tag.innerHTML = stringify(defu(overrides, parse(tag.innerHTML || "{}")));
             }
           }
         }
@@ -62,15 +63,17 @@ export function routeRuleOgImage(nuxtApp) {
   nuxtApp.hooks.hook("app:rendered", async (ctx) => {
     const { ssrContext } = ctx;
     const e = useRequestEvent();
-    const path = parseURL(e.path).pathname;
+    const path = parseURL(e?.path || "").pathname;
     if (isInternalRoute(path))
       return;
     const _routeRulesMatcher = toRouteMatcher(
       createRadixRouter({ routes: ssrContext?.runtimeConfig?.nitro?.routeRules })
     );
-    let routeRules = defu({}, ..._routeRulesMatcher.matchAll(
-      withoutBase(path.split("?")[0], ssrContext?.runtimeConfig?.app.baseURL)
-    ).reverse()).ogImage;
+    const matchedRules = _routeRulesMatcher.matchAll(
+      withoutBase(path.split("?")?.[0] || "", ssrContext?.runtimeConfig?.app.baseURL || "")
+    ).reverse();
+    const combinedRules = defu({}, ...matchedRules);
+    let routeRules = combinedRules?.ogImage;
     if (typeof routeRules === "undefined")
       return;
     const ogImageInstances = nuxtApp.ssrContext._ogImageInstances || [];
@@ -82,7 +85,7 @@ export function routeRuleOgImage(nuxtApp) {
       nuxtApp.ssrContext._ogImageInstances = void 0;
       return;
     }
-    routeRules = defu(nuxtApp.ssrContext?.event.context._nitro?.routeRules?.ogImage, routeRules);
+    routeRules = defu(nuxtApp.ssrContext?.event?.context._nitro?.routeRules?.ogImage, routeRules);
     const src = getOgImagePath(ssrContext.url, routeRules);
     createOgImageMeta(src, routeRules, nuxtApp.ssrContext);
   });

package/dist/runtime/app/utils.d.ts

@@ -1,5 +1,7 @@
 import type { NuxtSSRContext } from 'nuxt/app';
-import type { OgImageOptions, OgImagePrebuilt } from '../types.js';
+import type { OgImageOptions, OgImagePrebuilt, OgImageRuntimeConfig } from '../types.js';
 export declare function setHeadOgImagePrebuilt(input: OgImagePrebuilt): void;
 export declare function createOgImageMeta(src: string, input: OgImageOptions | OgImagePrebuilt, ssrContext: NuxtSSRContext): void;
 export declare function resolveComponentName(component: OgImageOptions['component'], fallback: string): OgImageOptions['component'];
+export declare function getOgImagePath(pagePath: string, _options?: Partial<OgImageOptions>): string;
+export declare function useOgImageRuntimeConfig(): OgImageRuntimeConfig;

package/dist/runtime/app/utils.js

@@ -1,10 +1,10 @@
+import { useHead, useRuntimeConfig } from "#app";
 import { componentNames } from "#build/nuxt-og-image/components.mjs";
-import { useHead } from "#imports";
 import { resolveUnrefHeadInput } from "@unhead/vue";
 import { defu } from "defu";
 import { stringify } from "devalue";
-import { withQuery } from "ufo";
-import { generateMeta, separateProps, useOgImageRuntimeConfig } from "../shared.js";
+import { joinURL, withQuery } from "ufo";
+import { generateMeta, separateProps } from "../shared.js";
 export function setHeadOgImagePrebuilt(input) {
   if (import.meta.client) {
     return;
@@ -33,9 +33,9 @@ export function createOgImageMeta(src, input, ssrContext) {
       processTemplateParams: true,
       innerHTML: () => {
         const payload = resolveUnrefHeadInput(_input);
-        if (typeof payload.props.title === "undefined")
+        if (payload.props && typeof payload.props.title === "undefined")
           payload.props.title = "%s";
-        payload.component = resolveComponentName(input.component, defaults.component);
+        payload.component = resolveComponentName(input.component, defaults.component || "");
         delete payload.url;
         if (payload._query && Object.keys(payload._query).length === 0) {
           delete payload._query;
@@ -73,3 +73,21 @@ export function resolveComponentName(component, fallback) {
   }
   return component;
 }
+export function getOgImagePath(pagePath, _options) {
+  const baseURL = useRuntimeConfig().app.baseURL;
+  const extension = _options?.extension || useOgImageRuntimeConfig().defaults.extension;
+  const path = joinURL("/", baseURL, `__og-image__/${import.meta.prerender ? "static" : "image"}`, pagePath, `og.${extension}`);
+  if (Object.keys(_options?._query || {}).length) {
+    return withQuery(path, _options._query);
+  }
+  return path;
+}
+export function useOgImageRuntimeConfig() {
+  const c = useRuntimeConfig();
+  return {
+    ...c["nuxt-og-image"],
+    app: {
+      baseURL: c.app.baseURL
+    }
+  };
+}

package/dist/runtime/server/og-image/bindings/chromium/on-demand.js

@@ -11,14 +11,19 @@ export async function createBrowser() {
       const logger = createConsola().withTag("Nuxt OG Image");
       logger.info("Installing Chromium install for og:image generation...");
       const installChromeProcess = execa("npx", ["playwright", "install", "chromium"], {
-        stdio: "inherit"
+        stdio: "pipe"
       });
-      installChromeProcess.stderr?.pipe(process.stderr);
+      if (installChromeProcess.stderr) {
+        installChromeProcess.stderr.pipe(process.stderr);
+      }
+      if (installChromeProcess.stdout) {
+        installChromeProcess.stdout.pipe(process.stdout);
+      }
       new Promise((resolve) => {
         installChromeProcess.on("exit", (e) => {
           if (e !== 0)
             logger.error("Failed to install Playwright dependency for og:image generation. Trying anyway...");
-          resolve(true);
+          resolve();
         });
       }).then(() => {
         installChromeProcess.kill();

package/dist/runtime/server/og-image/chromium/screenshot.js

@@ -1,6 +1,7 @@
-import { useNitroOrigin } from "#imports";
+import { useNitroOrigin } from "#site-config/server/composables";
 import { joinURL, withQuery } from "ufo";
-import { useOgImageRuntimeConfig } from "../../../shared.js";
+import { toValue } from "vue";
+import { useOgImageRuntimeConfig } from "../../utils.js";
 export async function createScreenshot({ basePath, e, options, extension }, browser) {
   const { colorPreference } = useOgImageRuntimeConfig();
   const path = options.component === "PageScreenshot" ? basePath : joinURL("/__og-image__/image", basePath, `og.html`);
@@ -13,8 +14,8 @@ export async function createScreenshot({ basePath, e, options, extension }, brow
       options.html = await e.$fetch(path).catch(() => void 0);
     }
     await page.setViewportSize({
-      width: options.width || 1200,
-      height: options.height || 630
+      width: toValue(options.width) || 1200,
+      height: toValue(options.height) || 630
     });
     if (options.html) {
       const html = options.html;