nuxt-og-image 0.4.3 → 0.4.5

package/README.md

@@ -32,6 +32,7 @@ Generate dynamic social share images for you Nuxt v3 app.
 - 🧙 Generate images for your entire site in minutes with minimal config
 - 🎨 Build your own template with Vue (powered by Nuxt Islands)
 - 📸 OR just generates page screenshots
+- 📦 Composable and component API
 
 ## Install
 
@@ -128,13 +129,17 @@ export default defineNuxtConfig({
 
 ## Generating Screenshots
 
+_Your page / app.vue / layout_
+
 ```vue
 <script lang="ts" setup>
+// Choose either Composition API
 defineOgImageScreenshot()
 </script>
 <template>
   <div>
-    <!-- Your page / app.vue / layout -->
+    <!-- OR Component API -->
+    <OgImageScreenshot />
   </div>
 </template>
 ```
@@ -144,17 +149,21 @@ defineOgImageScreenshot()
 The template image generator is powered by Nuxt Islands. This means that you can use any Vue
 component you want to generate your images.
 
+_Your page / app.vue / layout_
+
 ```vue
 <script lang="ts" setup>
+// Choose either Composition API
 defineOgImage({
-  component: 'OgImage', // Nuxt Island component
+  component: 'OgImageTemplate', // Nuxt Island component
   // pass in any custom props
   myCustomTitle: 'My Title'
 })
 </script>
 <template>
   <div>
-    <!-- Your page / app.vue / layout -->
+    <!-- OR Component API -->
+    <OgImage component="OgImageTemplate" my-custom-title="My Title" />
   </div>
 </template>
 ```
@@ -241,6 +250,10 @@ The host of your site. This is required to generate the absolute path of the og:
 Allows you to generate images at runtime in production. This uses a headless browser to generate images
 and may have deployment issues.
 
+## Examples
+
+- [Unhead Docs](https://github.com/unjs/unhead/tree/main/docs)
+
 ## Sponsors
 
 <p align="center">

package/dist/module.json

@@ -5,5 +5,5 @@
     "bridge": false
   },
   "configKey": "ogImage",
-  "version": "0.4.3"
+  "version": "0.4.5"
 }

package/dist/module.mjs

@@ -93,7 +93,7 @@ const module = defineNuxtModule({
       host: nuxt.options.runtimeConfig.public?.siteUrl,
       width: 1200,
       height: 630,
-      defaultIslandComponent: "OgImage",
+      defaultIslandComponent: "OgImageTemplate",
       outputDir: "_og-images",
       runtimeImages: nuxt.options.dev
     };
@@ -135,10 +135,17 @@ declare module 'nitropack' {
       from: resolve("./runtime/composables/defineOgImage")
     });
     await addComponent({
-      name: "OgImage",
-      filePath: resolve("./runtime/components/OgImage.vue"),
+      name: "OgImageTemplate",
+      filePath: resolve("./runtime/components/OgImageTemplate.island.vue"),
       island: true
     });
+    ["OgImage", "OgImageScreenshot"].forEach((name) => {
+      addComponent({
+        name,
+        filePath: resolve(`./runtime/components/${name}`),
+        island: true
+      });
+    });
     const runtimeDir = resolve("./runtime");
     nuxt.options.build.transpile.push(runtimeDir);
     const constScript = Object.entries(Constants).map(([k, v]) => `export const ${k} = '${v}'`).join("\n");

package/dist/runtime/components/OgImage.d.ts

@@ -0,0 +1,10 @@
+declare const _default: import("vue").DefineComponent<{
+    title?: string | undefined;
+    description?: string | undefined;
+    component?: string | undefined;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    title?: string | undefined;
+    description?: string | undefined;
+    component?: string | undefined;
+}>, {}>;
+export default _default;

package/dist/runtime/components/OgImage.mjs

@@ -0,0 +1,9 @@
+import { defineComponent } from "vue";
+import { defineOgImage } from "#imports";
+export default defineComponent({
+  name: "OgImage",
+  setup(_, { attrs }) {
+    defineOgImage(attrs);
+    return () => null;
+  }
+});

package/dist/runtime/components/OgImageScreenshot.d.ts

@@ -0,0 +1,10 @@
+declare const _default: import("vue").DefineComponent<{
+    title?: string | undefined;
+    description?: string | undefined;
+    component?: string | undefined;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    title?: string | undefined;
+    description?: string | undefined;
+    component?: string | undefined;
+}>, {}>;
+export default _default;

package/dist/runtime/components/OgImageScreenshot.mjs

@@ -0,0 +1,9 @@
+import { defineComponent } from "vue";
+import { defineOgImageScreenshot } from "#imports";
+export default defineComponent({
+  name: "OgImageScreenshot",
+  setup() {
+    defineOgImageScreenshot();
+    return () => null;
+  }
+});

package/dist/runtime/components/{OgImage.vue → OgImageTemplate.island.vue}

@@ -12,7 +12,7 @@ const props = defineProps({
     <div class="bg2" />
     <div>
       <p>This is the default og:image template from <a href="https://github.com/harlan-zw/nuxt-og-image" target="_blank">nuxt-og-image</a>.</p>
-      <p>Create your own at <code>components/islands/OgImage.vue</code>.</p>
+      <p>Create your own at <code>components/islands/OgImageTemplate.vue</code>.</p>
     </div>
     <div>
       <strong>Payload</strong>

package/dist/runtime/nitro/html.mjs

@@ -34,7 +34,7 @@ export default defineEventHandler(async (req) => {
     ...inferOgPayload(html),
     ...getQuery(req)
   };
-  const result = await $fetch(withQuery(`/__nuxt_island/${payload.component || "OgImage"}`, {
+  const result = await $fetch(withQuery(`/__nuxt_island/${payload.component || "OgImageTemplate"}`, {
     props: JSON.stringify(payload)
   }));
   const head = createHeadCore();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "packageManager": "pnpm@7.8.0",
   "license": "MIT",
   "funding": "https://github.com/sponsors/harlan-zw",