nuxt-og-image 5.1.13 → 6.0.0-beta.2

package/dist/runtime/app/components/Templates/Community/SaaS.satori.vue

@@ -0,0 +1,60 @@
+<script setup>
+import { useSiteConfig } from "#site-config/app/composables";
+const props = defineProps({
+  title: { type: String, required: false },
+  icon: { type: String, required: false },
+  siteName: { type: String, required: false },
+  theme: { type: String, required: false, default: "#6366f1" },
+  image: { type: String, required: false }
+});
+const siteConfig = useSiteConfig();
+const title = props.title || siteConfig.title || "Build something amazing";
+const siteName = props.siteName || siteConfig.name || "Acme";
+</script>
+
+<template>
+  <div class="w-full h-full flex flex-col relative overflow-hidden" :style="{ background: theme }">
+    <!-- Main content area - full height -->
+    <div class="flex-1 flex flex-col p-7 relative">
+      <!-- Left side: Title + Site name -->
+      <div class="flex flex-col justify-between h-full w-full lg:w-[50%]">
+        <!-- Title -->
+        <h1
+          class="font-black leading-[1.08] tracking-tight text-white text-[56px] line-clamp-3"
+          style="display: block; font-style: italic; text-shadow: 0 2px 10px rgba(0,0,0,0.2);"
+        >
+          {{ title }}
+        </h1>
+
+        <!-- Logo / Site name -->
+        <div class="flex flex-row items-center gap-3">
+          <div v-if="icon" class="flex items-center justify-center rounded-full bg-white/20 w-14 h-14">
+            <span class="text-3xl text-white">{{ icon }}</span>
+          </div>
+          <span class="font-black text-white text-[56px]">{{ siteName }}</span>
+        </div>
+      </div>
+
+      <!-- Product screenshot - absolute positioned, cut off on right -->
+      <div
+        v-if="image"
+        class="absolute flex flex-col bg-[#1a1a1a] rounded-xl overflow-hidden shadow-2xl hidden lg:flex"
+        style="right: -120px; top: 20px; bottom: 20px; width: 55%;"
+      >
+        <!-- Browser toolbar -->
+        <div class="flex flex-row items-center bg-[#2d2d2d] px-4 py-3">
+          <div class="w-3 h-3 rounded-full bg-[#ff5f57]" />
+          <div class="w-3 h-3 rounded-full bg-[#febc2e] ml-2" />
+          <div class="w-3 h-3 rounded-full bg-[#28c840] ml-2" />
+        </div>
+        <!-- Screenshot area -->
+        <div class="flex-1 flex bg-[#f5f5f5]">
+          <img
+            :src="image"
+            class="w-full h-full object-cover object-left-top"
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,12 @@
+type __VLS_Props = {
+    title?: string;
+    icon?: string;
+    siteName?: string;
+    theme?: string;
+    image?: string;
+};
+declare const __VLS_export: import("@vue/runtime-core").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    theme: string;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    title?: string;
+    website?: string;
+};
+declare const __VLS_export: import("@vue/runtime-core").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,38 @@
+<script setup>
+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 }
+});
+const website = computed(() => {
+  return props.website || parseURL(useSiteConfig().url).host;
+});
+</script>
+
+<template>
+  <div class="h-full w-full flex relative overflow-hidden" style="background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);">
+    <!-- Accent bar -->
+    <div class="absolute left-0 top-0 bottom-0 w-3" style="background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);" />
+
+    <!-- Subtle pattern -->
+    <div class="absolute inset-0 opacity-[0.015]" style="background-image: radial-gradient(#64748b 1px, transparent 1px); background-size: 24px 24px;" />
+
+    <!-- Decorative circles -->
+    <div class="absolute w-[300px] h-[300px] rounded-full opacity-[0.04]" style="background: #3b82f6; top: -100px; right: -50px;" />
+    <div class="absolute w-[200px] h-[200px] rounded-full opacity-[0.03]" style="background: #3b82f6; bottom: -50px; right: 200px;" />
+
+    <div class="flex flex-col justify-between w-full h-full pl-12 pr-16 py-14 relative z-10">
+      <h1 class="text-[72px] font-bold text-slate-800 leading-[1.1] tracking-tight max-w-[90%]" style="display: block; line-clamp: 2; text-overflow: ellipsis;">
+        {{ title }}
+      </h1>
+      <div class="flex items-center gap-3">
+        <div class="w-3 h-3 rounded-full bg-blue-500" />
+        <p class="text-[26px] font-semibold text-slate-500" style="display: block; line-clamp: 1; text-overflow: ellipsis;">
+          {{ website }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    title?: string;
+    website?: string;
+};
+declare const __VLS_export: import("@vue/runtime-core").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/Templates/Community/{UnJs.d.vue.ts → UnJs.satori.d.vue.ts}

@@ -9,13 +9,13 @@ type __VLS_Props = {
     stars?: string | number;
     contributors?: string | number;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_export: import("@vue/runtime-core").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").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>;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/app/components/Templates/Community/{UnJs.vue → UnJs.satori.vue}

@@ -20,61 +20,68 @@ const description = computed(() => (props.description || "").slice(0, 200));
 </script>
 
 <template>
-  <div class="w-full h-full flex flex-col bg-white">
-    <div class="pt-[60px] pb-[70px] px-[6.75rem] h-full flex flex-col justify-between">
-      <div class="flex flex-row justify-between">
-        <div class="max-w-[700px]">
-          <h1 class="mb-[30px] max-w-[700px] text-[60px] text-gray-900 font-normal flex flex-row">
-            <p style="display: block; overflow: hidden; line-clamp: 1; text-overflow: clip;">
+  <div class="w-full h-full flex flex-col relative overflow-hidden" style="background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);">
+    <!-- Subtle pattern -->
+    <div class="absolute inset-0 opacity-[0.02]" style="background-image: radial-gradient(#9ca3af 1px, transparent 1px); background-size: 32px 32px;" />
+
+    <div class="py-14 px-16 h-full flex flex-col justify-between relative z-10">
+      <div class="flex flex-row justify-between items-start">
+        <div class="max-w-[680px]">
+          <h1 class="mb-6 text-[56px] text-gray-900 font-normal flex flex-row items-baseline tracking-tight">
+            <span style="display: block; overflow: hidden; line-clamp: 1; text-overflow: clip;" class="text-gray-500">
               {{ org }}
-            </p>
-            <p v-if="repo" style="display: block; overflow: hidden; line-clamp: 1; text-overflow: clip;" class="ml-2">
-              /
-            </p>
-            <p v-if="repo" style="display: block; overflow: hidden; line-clamp: 1; text-overflow: clip;" class="ml-2 font-bold">
+            </span>
+            <span v-if="repo" class="mx-2 text-gray-400">/</span>
+            <span v-if="repo" style="display: block; overflow: hidden; line-clamp: 1; text-overflow: clip;" class="font-bold text-gray-900">
               {{ repo }}
-            </p>
+            </span>
           </h1>
-          <p class="text-gray-500 max-w-[700px] text-[35px] leading-[60px]" style="display: block; line-clamp: 3; text-overflow: ellipsis;">
+          <p class="text-gray-500 max-w-[650px] text-[32px] leading-[1.5]" style="display: block; line-clamp: 3; text-overflow: ellipsis;">
             {{ description }}
           </p>
         </div>
-        <div class="text-[200px]">
+        <div class="text-[180px] leading-none" style="filter: drop-shadow(0 4px 12px rgba(0,0,0,0.06));">
           {{ emoji }}
         </div>
       </div>
       <div class="flex flex-row items-center justify-between">
-        <div class="flex flex-row text-[40px]">
-          <div class="flex flex-row pr-10">
-            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="#888888" d="m4.67 28l6.39-12l7.3 6.49a2 2 0 0 0 1.7.47a2 2 0 0 0 1.42-1.07L27 10.9l-1.82-.9l-5.49 11l-7.3-6.49a2 2 0 0 0-1.68-.51a2 2 0 0 0-1.42 1L4 25V2H2v26a2 2 0 0 0 2 2h26v-2Z" /></svg>
-            <div class="pl-2">
-              <div>{{ downloads }}</div>
-              <div class="text-lg text-gray-600">
-                Monthly Downloads
+        <div class="flex flex-row text-[36px] gap-10">
+          <div class="flex flex-row items-center gap-3">
+            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32" class="text-gray-400"><path fill="currentColor" d="m4.67 28l6.39-12l7.3 6.49a2 2 0 0 0 1.7.47a2 2 0 0 0 1.42-1.07L27 10.9l-1.82-.9l-5.49 11l-7.3-6.49a2 2 0 0 0-1.68-.51a2 2 0 0 0-1.42 1L4 25V2H2v26a2 2 0 0 0 2 2h26v-2Z" /></svg>
+            <div>
+              <div class="font-semibold text-gray-800">
+                {{ downloads }}
+              </div>
+              <div class="text-[20px] text-gray-500">
+                Monthly
               </div>
             </div>
           </div>
-          <div class="flex flex-row pr-10">
-            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="#888888" d="m16 6.52l2.76 5.58l.46 1l1 .15l6.16.89l-4.38 4.3l-.75.73l.18 1l1.05 6.13l-5.51-2.89L16 23l-.93.49l-5.51 2.85l1-6.13l.18-1l-.74-.77l-4.42-4.35l6.16-.89l1-.15l.46-1L16 6.52M16 2l-4.55 9.22l-10.17 1.47l7.36 7.18L6.9 30l9.1-4.78L25.1 30l-1.74-10.13l7.36-7.17l-10.17-1.48Z" /></svg>
-            <div class="pl-2">
-              <div>{{ stars }}</div>
-              <div class="text-lg text-gray-600">
+          <div class="flex flex-row items-center gap-3">
+            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32" class="text-amber-500"><path fill="currentColor" d="m16 6.52l2.76 5.58l.46 1l1 .15l6.16.89l-4.38 4.3l-.75.73l.18 1l1.05 6.13l-5.51-2.89L16 23l-.93.49l-5.51 2.85l1-6.13l.18-1l-.74-.77l-4.42-4.35l6.16-.89l1-.15l.46-1L16 6.52M16 2l-4.55 9.22l-10.17 1.47l7.36 7.18L6.9 30l9.1-4.78L25.1 30l-1.74-10.13l7.36-7.17l-10.17-1.48Z" /></svg>
+            <div>
+              <div class="font-semibold text-gray-800">
+                {{ stars }}
+              </div>
+              <div class="text-[20px] text-gray-500">
                 Stars
               </div>
             </div>
           </div>
-          <div class="flex flex-row pr-10">
-            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="#888888" d="M22.45 6a5.47 5.47 0 0 1 3.91 1.64a5.7 5.7 0 0 1 0 8L16 26.13L5.64 15.64a5.7 5.7 0 0 1 0-8a5.48 5.48 0 0 1 7.82 0l2.54 2.6l2.53-2.58A5.44 5.44 0 0 1 22.45 6m0-2a7.47 7.47 0 0 0-5.34 2.24L16 7.36l-1.11-1.12a7.49 7.49 0 0 0-10.68 0a7.72 7.72 0 0 0 0 10.82L16 29l11.79-11.94a7.72 7.72 0 0 0 0-10.82A7.49 7.49 0 0 0 22.45 4Z" /></svg>
-            <div class="pl-2">
-              <div>{{ contributors }}</div>
-              <div class="text-lg text-gray-600">
+          <div class="flex flex-row items-center gap-3">
+            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32" class="text-rose-400"><path fill="currentColor" d="M22.45 6a5.47 5.47 0 0 1 3.91 1.64a5.7 5.7 0 0 1 0 8L16 26.13L5.64 15.64a5.7 5.7 0 0 1 0-8a5.48 5.48 0 0 1 7.82 0l2.54 2.6l2.53-2.58A5.44 5.44 0 0 1 22.45 6m0-2a7.47 7.47 0 0 0-5.34 2.24L16 7.36l-1.11-1.12a7.49 7.49 0 0 0-10.68 0a7.72 7.72 0 0 0 0 10.82L16 29l11.79-11.94a7.72 7.72 0 0 0 0-10.82A7.49 7.49 0 0 0 22.45 4Z" /></svg>
+            <div>
+              <div class="font-semibold text-gray-800">
+                {{ contributors }}
+              </div>
+              <div class="text-[20px] text-gray-500">
                 Contributors
               </div>
             </div>
           </div>
         </div>
         <div class="flex flex-row">
-          <svg width="100" height="100" class="rounded-[0.25rem] w-[100px] h-[100px]" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <svg width="80" height="80" class="rounded-lg" style="filter: drop-shadow(0 2px 8px rgba(0,0,0,0.08));" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g clip-path="url(#clip0_206_4645)">
               <mask id="mask0_206_4645" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="32">
                 <path d="M32 0H0V32H32V0Z" fill="white" />
@@ -94,6 +101,7 @@ const description = computed(() => (props.description || "").slice(0, 200));
         </div>
       </div>
     </div>
-    <div class="absolute bottom-0 w-full h-8 bg-[#ECDC5A]" />
+    <!-- Refined accent bar -->
+    <div class="absolute bottom-0 w-full h-2" style="background: linear-gradient(90deg, #ECDC5A 0%, #F7E98E 50%, #ECDC5A 100%);" />
   </div>
 </template>

package/dist/runtime/app/components/Templates/Community/{UnJs.vue.d.ts → UnJs.satori.vue.d.ts}

@@ -9,13 +9,13 @@ type __VLS_Props = {
     stars?: string | number;
     contributors?: string | number;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_export: import("@vue/runtime-core").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").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>;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -0,0 +1,13 @@
+/**
+ * @credits Full Stack Heroes <https://fullstackheroes.com/>
+ */
+type __VLS_Props = {
+    emoji?: string;
+    title?: string;
+};
+declare const __VLS_export: import("@vue/runtime-core").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+    emoji: string;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/Templates/Community/WithEmoji.satori.vue

@@ -0,0 +1,27 @@
+<script setup>
+defineProps({
+  emoji: { type: String, required: false, default: "\u{1F44B}" },
+  title: { type: String, required: false, default: "title" }
+});
+</script>
+
+<template>
+  <div class="h-full w-full flex items-center justify-center relative overflow-hidden" style="background: linear-gradient(135deg, #fafbfc 0%, #f0f4f8 50%, #e8eef5 100%);">
+    <!-- Subtle grid pattern -->
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(#94a3b8 1px, transparent 1px), linear-gradient(90deg, #94a3b8 1px, transparent 1px); background-size: 40px 40px;" />
+
+    <!-- Soft glow behind emoji -->
+    <div class="absolute w-[400px] h-[400px] rounded-full opacity-20" style="background: radial-gradient(circle, #38bdf8 0%, transparent 70%); top: 50%; left: 50%; transform: translate(-50%, -65%);" />
+
+    <div class="flex flex-col justify-center items-center w-full text-center relative z-10 px-16">
+      <div class="mb-6" style="filter: drop-shadow(0 8px 24px rgba(0,0,0,0.08));">
+        <p class="text-[140px] leading-none">
+          {{ emoji }}
+        </p>
+      </div>
+      <h1 class="text-[58px] font-bold text-slate-800 leading-tight tracking-tight max-w-[900px]" style="display: block; line-clamp: 2; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,0.04);">
+        {{ title }}
+      </h1>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,13 @@
+/**
+ * @credits Full Stack Heroes <https://fullstackheroes.com/>
+ */
+type __VLS_Props = {
+    emoji?: string;
+    title?: string;
+};
+declare const __VLS_export: import("@vue/runtime-core").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+    emoji: string;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/composables/_defineOgImageRaw.d.ts

@@ -0,0 +1,6 @@
+import type { DefineOgImageInput } from '../../types.js';
+/**
+ * Internal raw implementation for defining OG images.
+ * Used by defineOgImage and defineOgImageScreenshot.
+ */
+export declare function _defineOgImageRaw(_options?: DefineOgImageInput | DefineOgImageInput[]): string[];

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

@@ -0,0 +1,70 @@
+import { appendHeader } from "h3";
+import { createError, useError, useNuxtApp, useRequestEvent, useRoute, useState } from "nuxt/app";
+import { ref, toValue } from "vue";
+import { createOgImageMeta, getOgImagePath, setHeadOgImagePrebuilt, useOgImageRuntimeConfig } from "../utils.js";
+export function _defineOgImageRaw(_options = {}) {
+  const nuxtApp = useNuxtApp();
+  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 && !useError().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 paths = [];
+  if (Array.isArray(_options)) {
+    for (const opt of _options) {
+      const path2 = processOgImageOptions(opt, nuxtApp, route, basePath);
+      if (path2)
+        paths.push(path2);
+    }
+    return paths;
+  }
+  const path = processOgImageOptions(_options, nuxtApp, route, basePath);
+  if (path)
+    paths.push(path);
+  return paths;
+}
+function processOgImageOptions(_options, nuxtApp, route, basePath) {
+  const { defaults } = useOgImageRuntimeConfig();
+  const options = toValue(_options);
+  if (options === false) {
+    return;
+  }
+  if (nuxtApp.ssrContext?.event.context._nitro?.routeRules?.ogImage === false) {
+    nuxtApp.ssrContext._ogImageInstance?.dispose();
+    nuxtApp.ssrContext._ogImageDevtoolsInstance?.dispose();
+    nuxtApp.ssrContext._ogImageInstance = void 0;
+    nuxtApp.ssrContext._ogImagePayloads = [];
+    return;
+  }
+  const validOptions = options;
+  for (const key in defaults) {
+    if (validOptions[key] === void 0)
+      validOptions[key] = defaults[key];
+  }
+  if (route.query)
+    validOptions._query = route.query;
+  if (validOptions.url) {
+    setHeadOgImagePrebuilt(validOptions);
+    return toValue(validOptions.url);
+  }
+  const { path, hash } = getOgImagePath(basePath, validOptions);
+  if (import.meta.prerender) {
+    const prerenderPath = (path.split("?")[0] || path).replace(/,/g, "%2C");
+    appendHeader(useRequestEvent(nuxtApp), "x-nitro-prerender", prerenderPath);
+  }
+  if (hash) {
+    validOptions._hash = hash;
+  }
+  createOgImageMeta(path, validOptions, nuxtApp.ssrContext);
+  return path;
+}

package/dist/runtime/app/composables/defineOgImage.d.ts

@@ -1,2 +1,14 @@
-import type { DefineOgImageInput } from '../../types.js';
-export declare function defineOgImage(_options?: DefineOgImageInput): void;
+import type { OgImageComponents } from '#og-image/components';
+import type { ExtractComponentProps, OgImageOptions } from '../../types.js';
+type OgImageComponentOptions<T extends keyof OgImageComponents> = OgImageOptions & {
+    props?: Partial<ExtractComponentProps<OgImageComponents[T]>>;
+};
+/**
+ * Define an OG image using a component.
+ *
+ * @param component - The component name (must match an OgImage component)
+ * @param propsOrOptions - Either component props, or an array of options for multiple images
+ * @param options - Additional OG image options (width, height, etc.)
+ */
+export declare function defineOgImage<T extends keyof OgImageComponents>(component: T, propsOrOptions?: Partial<ExtractComponentProps<OgImageComponents[T]>> | OgImageComponentOptions<T>[], options?: OgImageOptions): string[];
+export {};

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

@@ -1,43 +1,14 @@
-import { appendHeader } from "h3";
-import { createError, useNuxtApp, useRequestEvent, useRoute, useState } from "nuxt/app";
-import { ref, toValue } from "vue";
-import { createOgImageMeta, getOgImagePath, setHeadOgImagePrebuilt, useOgImageRuntimeConfig } from "../utils.js";
-export function defineOgImage(_options = {}) {
-  const nuxtApp = useNuxtApp();
-  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 { defaults } = useOgImageRuntimeConfig();
-  const options = toValue(_options);
-  if (options === false) {
-    return;
-  }
-  const validOptions = options;
-  for (const key in defaults) {
-    if (validOptions[key] === void 0)
-      validOptions[key] = defaults[key];
-  }
-  if (route.query)
-    validOptions._query = route.query;
-  if (validOptions.url) {
-    setHeadOgImagePrebuilt(validOptions);
-    return;
-  }
-  const path = getOgImagePath(basePath, validOptions);
-  if (import.meta.prerender) {
-    appendHeader(useRequestEvent(nuxtApp), "x-nitro-prerender", path);
-  }
-  createOgImageMeta(path, validOptions, nuxtApp.ssrContext);
+import { _defineOgImageRaw } from "./_defineOgImageRaw.js";
+export function defineOgImage(component, propsOrOptions = {}, options = {}) {
+  if (Array.isArray(propsOrOptions)) {
+    return _defineOgImageRaw(propsOrOptions.map((opt) => ({
+      ...opt,
+      component
+    })));
+  }
+  return _defineOgImageRaw({
+    ...options,
+    component,
+    props: propsOrOptions
+  });
 }

package/dist/runtime/app/composables/defineOgImageComponent.d.ts

@@ -1,3 +1,7 @@
 import type { OgImageComponents } from '#og-image/components';
 import type { ExtractComponentProps, OgImageOptions } from '../../types.js';
-export declare function defineOgImageComponent<T extends keyof OgImageComponents>(component: T, props?: Partial<ExtractComponentProps<OgImageComponents[T]>>, options?: OgImageOptions): void;
+/**
+ * @deprecated Use `defineOgImage()` instead. This function will be removed in a future version.
+ * Migration: `defineOgImageComponent('X', props, options)` → `defineOgImage('X', props, options)`
+ */
+export declare function defineOgImageComponent<T extends keyof OgImageComponents>(component: T, props?: Partial<ExtractComponentProps<OgImageComponents[T]>>, options?: OgImageOptions): string[];

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

@@ -1,8 +1,7 @@
 import { defineOgImage } from "./defineOgImage.js";
 export function defineOgImageComponent(component, props = {}, options = {}) {
-  return defineOgImage({
-    ...options,
-    component,
-    props
-  });
+  if (import.meta.dev) {
+    console.warn("[nuxt-og-image] `defineOgImageComponent()` is deprecated. Use `defineOgImage()` instead. Run `npx nuxt-og-image migrate v6 --api` to auto-migrate.");
+  }
+  return defineOgImage(component, props, options);
 }

package/dist/runtime/app/composables/defineOgImageScreenshot.d.ts

@@ -1,2 +1,2 @@
 import type { OgImagePageScreenshotOptions } from '../../types.js';
-export declare function defineOgImageScreenshot(options?: OgImagePageScreenshotOptions): void;
+export declare function defineOgImageScreenshot(options?: OgImagePageScreenshotOptions): string[];

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

@@ -1,9 +1,9 @@
 import { useRouter } from "#app";
-import { defineOgImage } from "./defineOgImage.js";
+import { _defineOgImageRaw } from "./_defineOgImageRaw.js";
 export function defineOgImageScreenshot(options = {}) {
   const router = useRouter();
   const route = router.currentRoute.value?.path || "/";
-  return defineOgImage({
+  return _defineOgImageRaw({
     alt: `Web page screenshot${route ? ` of ${route}` : ""}.`,
     renderer: "chromium",
     extension: "jpeg",

package/dist/runtime/app/composables/mock.d.ts

@@ -1,5 +1,8 @@
 import type { OgImageComponents } from '#og-image/components';
-import type { DefineOgImageInput, ExtractComponentProps, OgImageOptions, OgImagePageScreenshotOptions } from '../../types.js';
-export declare function defineOgImage(_options?: DefineOgImageInput): void;
-export declare function defineOgImageComponent<T extends keyof OgImageComponents>(component: T, props?: Partial<ExtractComponentProps<OgImageComponents[T]>>, options?: OgImageOptions): void;
-export declare function defineOgImageScreenshot(options?: OgImagePageScreenshotOptions): void;
+import type { ExtractComponentProps, OgImageOptions, OgImagePageScreenshotOptions } from '../../types.js';
+export declare function defineOgImage<T extends keyof OgImageComponents>(_component: T, _props?: Partial<ExtractComponentProps<OgImageComponents[T]>>, _options?: OgImageOptions): void;
+/**
+ * @deprecated Use `defineOgImage()` instead.
+ */
+export declare function defineOgImageComponent<T extends keyof OgImageComponents>(_component: T, _props?: Partial<ExtractComponentProps<OgImageComponents[T]>>, _options?: OgImageOptions): void;
+export declare function defineOgImageScreenshot(_options?: OgImagePageScreenshotOptions): void;

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

@@ -1,15 +1,15 @@
 import { useRuntimeConfig } from "nuxt/app";
-export function defineOgImage(_options = {}) {
+export function defineOgImage(_component, _props = {}, _options = {}) {
   if (import.meta.dev) {
     console.warn("`defineOgImage()` is skipped as the OG Image module is not enabled.");
   }
 }
-export function defineOgImageComponent(component, props = {}, options = {}) {
+export function defineOgImageComponent(_component, _props = {}, _options = {}) {
   if (import.meta.dev) {
-    console.warn("`defineOgImageComponent()` is skipped as the OG Image module is not enabled.");
+    console.warn("`defineOgImageComponent()` is deprecated and skipped. Use `defineOgImage()` instead.");
   }
 }
-export function defineOgImageScreenshot(options = {}) {
+export function defineOgImageScreenshot(_options = {}) {
   if (import.meta.dev) {
     if (useRuntimeConfig()["nuxt-og-image"]) {
       console.warn("`defineOgImageScreenshot()` is skipped as the `chromium` compatibility is disabled.");