fix!: drop component support

Author: harlan-zw

docs/content/4.api/3.components.md

@@ -1,32 +1,14 @@
 ---
 title: Components
-description: Components that are included with the module, including OgImage and OgImageScreenshot.
+description: The OgImage and OgImageScreenshot components have been removed in v6.
+deprecated: true
 ---
 
-## Introduction
+## Removed in v6
 
-It's recommended to use composables over components, as they are more flexible and will provide better type safety.
+The `<OgImage>` and `<OgImageScreenshot>` components have been removed. Use the composable equivalents instead:
 
-## `OgImage`
+- [`defineOgImage()`](/docs/og-image/api/define-og-image) — replaces `<OgImage>`
+- [`defineOgImageScreenshot()`](/docs/og-image/api/define-og-image-screenshot) — replaces `<OgImageScreenshot>`
 
-Render a customisable OG Image.
-
-Uses the [defineOgImage](/docs/og-image/api/define-og-image) composable.
-
-```vue
-<template>
-  <OgImage />
-</template>
-```
-
-## `OgImageScreenshot`
-
-Takes a screenshot of the page and uses it as the image.
-
-Uses the [defineOgImageScreenshot](/docs/og-image/api/define-og-image-screenshot) composable.
-
-```vue
-<template>
-  <OgImageScreenshot />
-</template>
-```
+See the [v6 migration guide](/docs/og-image/migration-guide/v6) for details.

docs/content/6.migration-guide/v6.md

@@ -167,6 +167,44 @@ Install @nuxt/fonts (only needed for custom fonts):
 npx nuxi module add @nuxt/fonts
 ```
 
+### `<OgImage>` and `<OgImageScreenshot>` Components Removed
+
+The `<OgImage>` and `<OgImageScreenshot>` Vue components have been removed. Use the equivalent composables instead:
+
+```diff
+- <template>
+-   <OgImage />
+- </template>
+
++ <script setup>
++ defineOgImage()
++ </script>
+```
+
+```diff
+- <template>
+-   <OgImageScreenshot />
+- </template>
+
++ <script setup>
++ defineOgImageScreenshot()
++ </script>
+```
+
+The migration CLI handles this automatically.
+
+### `componentOptions` Config Removed
+
+The `ogImage.componentOptions` config option has been removed as there are no longer any components to configure.
+
+```diff
+export default defineNuxtConfig({
+  ogImage: {
+-   componentOptions: { global: true },
+  }
+})
+```
+
 ### `defineOgImageComponent` Deprecated
 
 The `defineOgImageComponent()` composable is deprecated. Use `defineOgImage()` with the component name as the first argument.

src/cli.ts

@@ -228,6 +228,24 @@ async function checkMigrationNeeded(rootDir: string): Promise<MigrationCheck> {
   return result
 }
 
+// Convert Vue template attrs like `title="Hello" :width="1200"` to a JS object string
+function attrsToProps(attrs: string): string {
+  if (!attrs)
+    return ''
+  const props: string[] = []
+  // Match :prop="expr" or prop="value" or prop (boolean)
+  const attrRegex = /:(\w+)="([^"]*)"|(\w+)="([^"]*)"|(\w+)/g
+  for (const m of attrs.matchAll(attrRegex)) {
+    if (m[1]) // dynamic :prop="expr"
+      props.push(`${m[1]}: ${m[2]}`)
+    else if (m[3]) // static prop="value"
+      props.push(`${m[3]}: '${m[4]}'`)
+    else if (m[5]) // boolean prop
+      props.push(`${m[5]}: true`)
+  }
+  return props.length ? `{ ${props.join(', ')} }` : ''
+}
+
 // Migrate defineOgImage API
 function migrateDefineOgImageApi(dryRun: boolean): { changes: Array<{ file: string, count: number }> } {
   const cwd = process.cwd()
@@ -241,6 +259,42 @@ function migrateDefineOgImageApi(dryRun: boolean): { changes: Array<{ file: stri
     let modified = false
     let changeCount = 0
 
+    // Pattern 0: <OgImageScreenshot /> and <OgImage /> component usage → composable
+    // Handles self-closing and open/close tags, with or without props
+    content = content.replace(/<OgImageScreenshot([^>]*?)\/>/g, (_match, attrs: string) => {
+      modified = true
+      changeCount++
+      const propsStr = attrsToProps(attrs.trim())
+      return propsStr
+        ? `<!-- Migrated: use defineOgImageScreenshot(${propsStr}) in <script setup> -->`
+        : `<!-- Migrated: use defineOgImageScreenshot() in <script setup> -->`
+    })
+    content = content.replace(/<OgImageScreenshot([^>]*)>[\s\S]*?<\/OgImageScreenshot>/g, (_match, attrs: string) => {
+      modified = true
+      changeCount++
+      const propsStr = attrsToProps(attrs.trim())
+      return propsStr
+        ? `<!-- Migrated: use defineOgImageScreenshot(${propsStr}) in <script setup> -->`
+        : `<!-- Migrated: use defineOgImageScreenshot() in <script setup> -->`
+    })
+    // OgImage but not OgImageScreenshot (use word boundary via negative lookahead)
+    content = content.replace(/<OgImage(?!Screenshot)([^>]*?)\/>/g, (_match, attrs: string) => {
+      modified = true
+      changeCount++
+      const propsStr = attrsToProps(attrs.trim())
+      return propsStr
+        ? `<!-- Migrated: use defineOgImage(${propsStr}) in <script setup> -->`
+        : `<!-- Migrated: use defineOgImage() in <script setup> -->`
+    })
+    content = content.replace(/<OgImage(?!Screenshot)([^>]*)>[\s\S]*?<\/OgImage>/g, (_match, attrs: string) => {
+      modified = true
+      changeCount++
+      const propsStr = attrsToProps(attrs.trim())
+      return propsStr
+        ? `<!-- Migrated: use defineOgImage(${propsStr}) in <script setup> -->`
+        : `<!-- Migrated: use defineOgImage() in <script setup> -->`
+    })
+
     // Pattern 1: defineOgImageComponent → defineOgImage
     if (/defineOgImageComponent\s*\(/.test(content)) {
       content = content.replace(/defineOgImageComponent\s*\(/g, 'defineOgImage(')
@@ -430,6 +484,7 @@ async function runMigrate(args: string[]): Promise<void> {
   if (migrationCheck.needsNuxtFonts) {
     tasks.push('Install @nuxt/fonts module')
   }
+  tasks.push('Migrate <OgImage> and <OgImageScreenshot> components to composables')
   tasks.push('Update defineOgImage() calls to new API')
 
   p.note(tasks.map(t => `• ${t}`).join('\n'), 'Migration tasks')

src/module.ts

@@ -1,4 +1,3 @@
-import type { AddComponentOptions } from '@nuxt/kit'
 import type { Nuxt } from '@nuxt/schema'
 import type { ResvgRenderOptions } from '@resvg/resvg-js'
 import type { SatoriOptions } from 'satori'
@@ -17,7 +16,7 @@ import type {
 import * as fs from 'node:fs'
 import { existsSync } from 'node:fs'
 import { readFile } from 'node:fs/promises'
-import { addBuildPlugin, addComponent, addComponentsDir, addImports, addPlugin, addServerHandler, addServerPlugin, addTemplate, addVitePlugin, createResolver, defineNuxtModule, getNuxtModuleVersion, hasNuxtModule, hasNuxtModuleCompatibility, updateTemplates } from '@nuxt/kit'
+import { addBuildPlugin, addComponentsDir, addImports, addPlugin, addServerHandler, addServerPlugin, addTemplate, addVitePlugin, createResolver, defineNuxtModule, getNuxtModuleVersion, hasNuxtModule, hasNuxtModuleCompatibility, updateTemplates } from '@nuxt/kit'
 import { defu } from 'defu'
 import { installNuxtSiteConfig } from 'nuxt-site-config/kit'
 import { hash } from 'ohash'
@@ -98,10 +97,6 @@ export interface ModuleOptions {
    * @false false
    */
   debug: boolean
-  /**
-   * Options to pass to the <OgImage> and <OgImageScreenshot> component.
-   */
-  componentOptions?: Pick<AddComponentOptions, 'global'>
   /**
    * Configure the runtime cache storage for generated OG images.
    * - `true` - Use Nitro's default cache storage (default)
@@ -737,12 +732,6 @@ export default defineNuxtModule<ModuleOptions>({
         }
       })
 
-    addComponent({
-      name: 'OgImageScreenshot',
-      filePath: resolve(`./runtime/app/components/OgImage/OgImageScreenshot`),
-      ...config.componentOptions,
-    })
-
     const basePluginPath = `./runtime/app/plugins${config.zeroRuntime ? '/__zero-runtime' : ''}`
     // allows us to add og images using route rules without calling defineOgImage
     addPlugin({ mode: 'server', src: resolve(`${basePluginPath}/route-rule-og-image.server`) })
@@ -914,7 +903,7 @@ export default defineNuxtModule<ModuleOptions>({
           valid = true
 
         if (valid && fs.existsSync(component.filePath)) {
-          // Only validate .vue files - non-vue files (like OgImageScreenshot.ts) are runtime components, not templates
+          // Only validate .vue files - non-vue files are runtime components, not templates
           if (!component.filePath.endsWith('.vue'))
             return