v2.0.0

Background

I'm excited to finally tag a stable release, it has been in the works for many months.

Some fun numbers:

• 71 beta releases
• 285+ commits, hundreds of bug fixes
• 25+ issues closed

It has been a massive effort to get to this point, happy to move on from debugging WASM issues on different edge providers...

I'm very grateful for the support from the community and the sponsors who have made this possible.

Features 🚀

New Default Template

The default template has been modernized. It now matches the Nuxt branding.

See the Fallback.vue component for all props.

Server-Side Runtime Images

With v1 of the module, images would only work when you would prerender your app. This was great for small SSG apps.

However, it was really limiting for large SSR apps.

With v2, we introduce true runtime images. Allowing you to support any number of og images without the build time.

While this sounds like a small change, it's actually required an almost complete rewrite of the module.

Using this is zero-config, just deploy your app using nuxt build and it will work for for the following providers:

Check the compatibility below:

Satori Vue SFC

When using the Satori browser, you can now use the <style> tag in your Vue SFCs. This comes in handy as Satori's Tailwind support is limited.

It supports any preprocessor that you're using.

<template>
  <div>
    <h1>Hello World</h1>
  </div>
</template>

<style>
h1 {
  font-size: 100px;
  text-align: center;
}
</style>

For this to work, it will inline any styles, so they can be supported by the Satori parser.

Custom Font Support

You can now use any font that you want in your images with a simple config.

export default defineOgImage({
  ogImage: {
    fonts: [
      'Inter:400', // loads from google
      {
        name: 'optieinstein',
        weight: 800,
        path: '/OPTIEinstein-Black.otf', // loads locally
      }
    ],
  }
})

You can learn more on the Custom Fonts page.

Playground: Editable Props

The playground now supports editing the props of the image. This is useful for testing out different configurations.

Nuxt Icon Support

You can now use Nuxt Icons in your images.

<template>
  <div>
    <Icon icon="logos:nuxt-icon" />
  </div>
</template>

New Component Folder

The new recommendation for components is to put them inside the OgImage folder.

Any components in this folder will be configured to be a Nuxt Island. You can extend the folders by using the componentDirs option if you prefer your own convention. Setting up components in this dir will also allow you to reference the component using a shorthand instead of the full path.

For example, a component at ./components/OgImage/Foo.vue can be referenced as:

defineOgImage({
  component: 'Foo' // foo, OgImageFoo and og-image-foo will also work
})

Otherwise, any island components set up with the previous convention will still work.

New composable / component API

A cleaner, simpler API for defining your og images.

defineOgImage(options)

<template>
  <OgImage />
</template>

The old API is deprecated but will still work.

Runtime Cache

Server-Side rendered images will now be cached by default. This will speed up the time to first byte for your images and reduce the load on your server.

See the Cache page for more details.

Nuxt Site Config

The siteUrl config was required for prerendering the og:image to an absolute path, this is now deprecated.

Instead, nuxt-site-config is used which automatically sets the URL for some environments.

See the Prerendering Images page for more details.

Deprecations and Breaking Changes

API Changes

The following options have been removed from nuxt.config:

• host, siteUrl - see prerendering-images for details.
• forcePrerender - removed, not needed
• satoriProvider - removed use runtimeSatori
• browserProvider - removed use runtimeBrowser
• experimentalInlineWasm - removed, this is now automatic based on environment
• experimentalRuntimeBrowser - removed, this is now automatic based on environment

The following options have been deprecated from the defineOgImage options:

• static - use cache instead

If you were referencing the old default template, you will need to update it.

• OgImageBasic - remove the property, allow the fallback to be selected automatically

Composables & Components:

• defineOgImageStatic() is deprecated, use defineOgImage() (default behavior is to cache), if you want to be verbose you can use defineOgImageCached() or <OgImageCached />
• <OgImageStatic /> is deprecated, use <OgImage />
• defineOgImageDynamic() is deprecated, use defineOgImageWithoutCache()
• <OgImageDynamic /> is deprecated, use <OgImageWithoutCache />

Behaviour Changes

If you were using the runtime browser previously, you will need to manually opt-in for it to work in production.

export default defineNuxtConfig({
  ogImage: {
    runtimeBrowser: true
  }
})