Skip to content

Upgrading nuxt-og-image 1 to 2

Breaking1.5.9 → 2.2.6Breaking5Deprecated3New16Changed1Fixed131Other2

Full comparisonBack to nuxt-og-image
BreakingUpgrade verdict

5 breaking changes.

In plain terms
  • forcePrerender - removed, not needed.
  • satoriProvider - removed use runtimeSatori.
  • browserProvider - removed use runtimeBrowser.
  • experimentalInlineWasm - removed, this is now automatic based on environment.
Must act Top 5 of 8 that need code or config changes

Adds @resvg/resvg-js ^2.6.0, @resvg/resvg-wasm ^2.6.0, @twemoji/api ^14.1.2, css-inline ^0.11.0, globby ^13.2.2, image-size ^1.0.2, nuxt-site-config ^1.5.5, nuxt-site-config-kit ^1.5.5, nypm ^0.3.3, ofetch ^1.3.3.

Installs 353 packages in all (was 228).

What you must change

Breaking5
forcePrerender - removed, not needed.
forcePrerender
2.0.0GitHub ReleaseOriginalView source
satoriProvider - removed use runtimeSatori.
satoriProviderruntimeSatori
2.0.0GitHub ReleaseOriginalView source
browserProvider - removed use runtimeBrowser.
browserProviderruntimeBrowser
2.0.0GitHub ReleaseOriginalView source
experimentalInlineWasm - removed, this is now automatic based on environment.
experimentalInlineWasm
2.0.0GitHub ReleaseOriginalView source
experimentalRuntimeBrowser - removed, this is now automatic based on environment.
experimentalRuntimeBrowser
2.0.0GitHub ReleaseOriginalView source

Deprecations to plan for

Deprecated3
defineOgImageStatic() is deprecated, use defineOgImage() (default behavior is to cache), if you want to be verbose you can use defineOgImageCached() or.
defineOgImageStatic()defineOgImage()defineOgImageCached()
2.0.0GitHub ReleaseOriginalView source
is deprecated, use.
2.0.0GitHub ReleaseOriginalView source
defineOgImageDynamic() is deprecated, use defineOgImageWithoutCache().
defineOgImageDynamic()defineOgImageWithoutCache()
2.0.0GitHub ReleaseOriginalView source

API changes

Generated by DepDelta from published .d.ts files. Not mixed with prose notes.

  • added: interface NuxtHooks extends ModuleHooks
  • added: interface NuxtConfig
  • added: interface NuxtHooks extends ModuleHooks
  • added: interface NuxtOptions
  • added: property NuxtConfig['ogImage']?: Partial<ModuleOptions>
  • added: property NuxtOptions['ogImage']?: ModuleOptions
  • removed: property ModuleOptions.browserProvider: boolean
  • removed: property ModuleOptions.experimentalInlineWasm: boolean
  • removed: property ModuleOptions.experimentalRuntimeBrowser: boolean
  • removed: property ModuleOptions.forcePrerender: boolean
  • removed: property ModuleOptions.satoriProvider: boolean
  • changed: property ModuleOptions.fonts: `${string}:${number}`[] → property ModuleOptions.fonts: InputFontConfig[]
  • changed: property ModuleOptions.host: string → property ModuleOptions.host?: string
  • added: interface ModuleHooks
  • added: property ModuleHooks.'og-image:config': (config: ModuleOptions) => Promise<void> | void
  • added: property ModuleHooks.'og-image:prerenderScreenshots': (queue: OgImageOptions[]) => Promise<void> | void
  • added: property ModuleOptions.componentDirs: string[]
  • added: property ModuleOptions.debug: boolean
  • added: property ModuleOptions.enabled: boolean
  • added: property ModuleOptions.runtimeBrowser: boolean
  • added: property ModuleOptions.runtimeCacheStorage: boolean | (Record<string, any> & { driver: string })
  • added: property ModuleOptions.runtimeCompatibility?: Partial<RuntimeCompatibilitySchema>
  • added: property ModuleOptions.runtimeSatori: boolean
  • added: property ModuleOptions.siteUrl?: string
  • added: function useNitroCache<T>(e: H3Event, module: string, options: { key: string; cacheTtl: number; cache: boolean; headers: boolean; skipRestore?: boolean }): Promise<{ enabled: any; cachedItem: boolean | T; update(item: T): Promise<void> }>
  • added: const _default: import('vue').DefineComponent<OgImageOptions, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue…
  • added: default _default
  • added: const _default: import('vue').DefineComponent<OgImageOptions, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue…
  • added: default _default
  • added: const _default: import('vue').DefineComponent<OgImageScreenshotOptions, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, i…
  • added: default _default
  • added: const _default: import('vue').DefineComponent<OgImageOptions, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue…
  • added: default _default
  • added: const _default: import('vue').DefineComponent<OgImageOptions, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue…
  • added: default _default
  • added: const _default: import('vue').DefineComponent<OgImageOptions, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue…
  • added: default _default
  • removed: const _default: import('vue').DefineComponent<OgImageOptions, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue…
  • removed: default _default
  • removed: const _default: import('vue').DefineComponent<OgImageScreenshotOptions, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, i…
  • removed: default _default
  • removed: const _default: import('vue').DefineComponent<OgImageOptions, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue…
  • removed: default _default
  • changed: function defineOgImage(options?: OgImageOptions): void → function defineOgImage(_options?: OgImagePrebuilt | OgImageOptions): Promise<void>
  • changed: function defineOgImageDynamic(options?: OgImageOptions): void → function defineOgImageDynamic(options?: OgImageOptions): Promise<void>
  • changed: function defineOgImageScreenshot(options?: OgImageScreenshotOptions): void → function defineOgImageScreenshot(options?: OgImageScreenshotOptions): Promise<void>
  • changed: function defineOgImageStatic(options?: OgImageOptions): void → function defineOgImageStatic(options?: OgImageOptions): Promise<void>
  • added: function defineOgImageCached(options?: OgImageOptions): Promise<void>
  • added: function defineOgImageWithoutCache(options?: OgImageOptions): Promise<void>
  • added: function normaliseOgImageOptions(_options: OgImageOptions): any
  • changed: const _default: import('h3').EventHandler<any> → const _default: import('h3').EventHandler<import('h3').EventHandlerRequest, Promise<any>>
  • changed: const _default: import('h3').EventHandler<string | undefined> → const _default: import('h3').EventHandler<import('h3').EventHandlerRequest, Promise<string | undefined>>
  • added: const OgImagePrenderNitroPlugin: NitroAppPlugin
  • added: default OgImagePrenderNitroPlugin
  • changed: default function createBrowser(): Promise<import('puppeteer-core').Browser> → default function createBrowser(): Promise<any>
  • removed: default function createBrowser(): Promise<any>
  • added: default function createBrowser(): Promise<any>
  • added: default function createBrowser(): Promise<Browser | void>
  • added: default nodeFn
  • added: function nodeFn(html: string, options: any): string
  • added: namespace nodeFn
  • added: var nodeFn.__mock: boolean
  • added: const mockFn: { (s: string): string; __mock: boolean }
  • added: default mockFn
  • added: default function (svg: string, options: ResvgRenderOptions & RuntimeOgImageOptions): Promise<Buffer>
  • added: default function (svg: string, options: ResvgRenderOptions & RuntimeOgImageOptions): Promise<Uint8Array>
  • added: default function (svg: string, options: ConvertOptions & RuntimeOgImageOptions): Promise<Uint8Array>
  • added: default function (nodes: any, options: SatoriOptions): Promise<string>
  • removed: default function (nodes: any, options: SatoriOptions): Promise<string>
  • removed: default function (nodes: string, options: SatoriOptions & { baseUrl: string }): Promise<string>
  • added: default function (nodes: string, options: SatoriOptions & RuntimeOgImageOptions): Promise<string>
  • removed: default function (svg: string, options: ConvertOptions & { baseUrl: string }): Promise<Uint8Array>
  • removed: const _default: Renderer
  • removed: default _default
  • added: const BrowserRenderer: Renderer
  • added: default BrowserRenderer
  • removed: const _default: Renderer
  • removed: default _default
  • added: const SatoriRenderer: Renderer
  • added: default SatoriRenderer
  • changed: const _default: (url: import('ufo').ParsedURL) => import('../../../../../types').SatoriTransformer → const _default: import('../../../../types').SatoriTransformer | import('../../../../types').SatoriTransformer[]
  • changed: const _default: (url: import('ufo').ParsedURL) => import('../../../../../types').SatoriTransformer → const _default: import('../../../../types').SatoriTransformer | import('../../../../types').SatoriTransformer[]
  • changed: const _default: (url: import('ufo').ParsedURL) => import('../../../../../types').SatoriTransformer → const _default: import('../../../../types').SatoriTransformer | import('../../../../types').SatoriTransformer[]
  • changed: const _default: (url: import('ufo').ParsedURL) => import('../../../../../types').SatoriTransformer → const _default: import('../../../../types').SatoriTransformer | import('../../../../types').SatoriTransformer[]
  • changed: const _default: (url: import('ufo').ParsedURL) => import('../../../../../types').SatoriTransformer → const _default: import('../../../../types').SatoriTransformer | import('../../../../types').SatoriTransformer[]
  • changed: function defineSatoriTransformer(transformer: (url: ParsedURL) => SatoriTransformer): (url: ParsedURL) => SatoriTransformer → function defineSatoriTransformer(transformer: SatoriTransformer | SatoriTransformer[]): SatoriTransformer | SatoriTransformer[]
  • changed: function loadFont(font: string): Promise<any> → function loadFont(requestOrigin: string, font: FontConfig): Promise<any>
  • changed: function walkSatoriTree(url: ParsedURL, node: VNode, plugins: SatoriTransformer[]): Promise<void> → function walkSatoriTree(node: VNode, plugins: (SatoriTransformer | SatoriTransformer[])[], props: RuntimeOgImageOptions): Promise<void>
  • added: const _default: import('h3').EventHandler<import('h3').EventHandlerRequest, Promise<{ siteConfigUrl: { value: any; source: any }; dev: boolean | undefined; runtimeConfig: any;…
  • added: default _default
  • changed: const _default: import('h3').EventHandler<string | void> → const _default: import('h3').EventHandler<import('h3').EventHandlerRequest, Promise<string | void>>
  • changed: const _default: import('h3').EventHandler<false | OgImageOptions> → const _default: import('h3').EventHandler<import('h3').EventHandlerRequest, Promise<false | OgImageOptions>>
  • changed: const _default: import('h3').EventHandler<any> → const _default: import('h3').EventHandler<import('h3').EventHandlerRequest, Promise<any>>
  • changed: const _default: import('h3').EventHandler<any> → const _default: import('h3').EventHandler<import('h3').EventHandlerRequest, Promise<any>>
  • removed: function renderIsland(payload: OgImageOptions): Promise<{ html: string; head: any }>
  • removed: function useHostname(e: H3Event): string
  • changed: function fetchOptions(e: H3Event, path: string): Promise<OgImageOptions> → function fetchOptions(e: H3Event, path: string): Promise<RuntimeOgImageOptions>
  • changed: function readPublicAssetBase64(file: string): Promise<string | undefined> → function readPublicAssetBase64(file: string): Promise<{ src: string; width?: number; height?: number } | undefined>
  • changed: function wasmLoader(key: any, fallback: string, baseUrl: string): { loaded(): boolean | Promise<any>; load(): Promise<any> } → function wasmLoader(asyncModuleLoad: Promise<any> | Buffer | string, fallback: string): { load(options: RuntimeOgImageOptions): Promise<any> }
  • added: function fetchOptionsCached(e: H3Event, path: string): Promise<RuntimeOgImageOptions>
  • added: function toBase64Image(fileName: string, data: string | ArrayBuffer): string
  • removed: function extractOgImageOptions(html: string): false | Record<string, any>
  • removed: function stripOgImageOptions(html: string): string
  • added: function decodeHtml(html: string): string
  • added: function extractAndNormaliseOgImageOptions(path: string, html: string, routeRules: OgImageOptions, defaults: OgImageOptions): OgImageOptions | false
  • added: index OgImageOptions[key: string]: any
  • added: interface FontConfig
  • added: interface OgImageOptions extends Partial<ScreenshotOptions>
  • added: interface PlaygroundClientFunctions
  • added: interface PlaygroundServerFunctions
  • added: interface Renderer
  • added: interface RuntimeOgImageOptions extends OgImageOptions
  • added: interface SatoriTransformer
  • added: interface ScreenshotOptions
  • added: method PlaygroundClientFunctions.refresh(type: string): void
  • added: method PlaygroundServerFunctions.getConfig(): ModuleOptions
  • added: method PlaygroundServerFunctions.openInEditor(filepath: string): void
  • added: property FontConfig.name: string
  • added: property FontConfig.path?: string
  • added: property FontConfig.weight: number
  • added: property OgImageOptions.alt?: string
  • added: property OgImageOptions.cache?: boolean
  • added: property OgImageOptions.cacheKey?: string
  • added: property OgImageOptions.cacheTtl?: number
  • added: property OgImageOptions.component?: string | null
  • added: property OgImageOptions.description?: string
  • added: property OgImageOptions.html?: string
  • added: property OgImageOptions.provider?: 'browser' | 'satori'
  • added: property OgImageOptions.static?: boolean
  • added: property OgImageOptions.title?: string
  • added: property Renderer.createPng: (options: RuntimeOgImageOptions) => Promise<Buffer>
  • added: property Renderer.createSvg: (options: RuntimeOgImageOptions) => Promise<string>
  • added: property Renderer.createVNode: (options: RuntimeOgImageOptions) => Promise<VNode>
  • added: property Renderer.name: 'browser' | 'satori'
  • added: property RuntimeOgImageOptions.path: string
  • added: property RuntimeOgImageOptions.requestOrigin: string
  • added: property SatoriTransformer.filter: (node: VNode) => boolean
  • added: property SatoriTransformer.transform: (node: VNode, props: RuntimeOgImageOptions) => Promise<void>
  • added: property ScreenshotOptions.colorScheme?: 'dark' | 'light'
  • added: property ScreenshotOptions.delay?: number
  • added: property ScreenshotOptions.height: number
  • added: property ScreenshotOptions.mask?: string
  • added: property ScreenshotOptions.selector?: string
  • added: property ScreenshotOptions.width: number
  • added: type InputFontConfig = (`${string}:${number}` | FontConfig)
  • added: type OgImageScreenshotOptions = Omit<OgImageOptions, 'component'>
  • added: type VNode = ReturnType<typeof html>
  • added: declare module 'nuxt/schema'
  • added: export { ModuleHooks } from './module'