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, I'm happy to move on from debugging Wasm issues on different edge providers...

I'm 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 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 required a complete rewrite of the module.

Using this is zero-config, deploy your app using nuxt build and it will work 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, the module inlines any styles so the Satori parser can support them.

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 name="logos:nuxt-icon" />
  </div>
</template>

New Component Folder

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

The module configures any components in this folder as 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

The module now caches server-side rendered images by default. This will speed up the time to first byte for your images and reduce the load on your server.

See the Runtime Cache page for more details.

Nuxt Site Config

The module no longer requires the siteUrl config for prerendering the og:image to an absolute path; this is now deprecated.

Instead, the module uses nuxt-site-config, which automatically sets the URL for some environments.

Deprecations and Breaking Changes

API Changes

The module removed the following options from nuxt.config:

• host, siteUrl
• 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, allowing the module to select the fallback 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 />

Behavior 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
  }
})