Compatibility

Last updated Oct 29, 2024 by

Harlan Wilton

in doc: fix links.

Copy for LLMs

Nuxt OG Image relies heavily on third-party packages that have different compatibility requirements.

Bindings

There are a number of bindings that can be used for each dependency: node, wasm, wasm-fs and false.

node binding is for default Node based environments.
wasm and wasm-fs bindings are used to run WebAssembly. They are mostly used for WebWorker support.
wasm-fs binding is for using WebAssembly in a development WebWorker development environment such as StackBlitz.
false disables the dependency.

Dependencies

`chromium`

Supports: node

Used to render browser screenshots.

This only works on Node based environments. However, it does not work on AWS Lambda as the Chromium binary is too large.

Due to the rendering times being slow, it's recommended to only use browser screenshots when prerendering them.

`satori`

Supports: node, wasm, wasm-fs

Used to render a HTML vNode tree into OG Images.

This is the default renderer, and works on all environments.

`resvg`

Supports: node, wasm, wasm-fs

Used to transform SVGs into PNGs. This should work on all environments.

When installing using the node binding, it can have issues resolving the correct binary. You may run into an issue like Cannot resolve "./resvgjs.android-arm64.node", in which case you should manually set the binding to wasm or wasm-fs.

`sharp`

Supports: node

Used to transform PNG to JPEG. This only works on Node based environments.

This is disabled by The dependency is quite heavy so it's disabled by default.

See the JPEGs guide for more information.

`css-inline`

Supports: node, wasm, wasm-fs

Used to support <style> tags within Vue SFCs.

Overriding compatibility

In some instances, it may be useful to override the compatibility, so you can toggle features or use more optimised bindings for your environment.

export default defineNuxtConfig({
  ogImage: {
    compatibility: {
      // disable chromium dependency for prerendering (skips the chromium install in CIs)
      prerender: {
        chromium: false
      }
    }
  }
})