v2.0.0-beta.60

Features 🚀

New Folder Convention (279c293)

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.

Clearer API

In an effort to make the behavior clearer, the static keyword has been deprecated from the project. Previously static meant that the image would be cached and could be prerendered. For clarity, we now just use call this cache.

• 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 />

Cache options can always be passed in as the options, so it's recommended to just use defineOgImage with the needed options.

defineOgImage({
  cache: true,
  cacheTtl: 3600
})

Cache Enabled by Default (67d32b4)

Runtime images that are created without using defineOgImageWithoutCache() or <OgImageWithoutCache /> will now be cached by default.

You can control the caching using the runtimeCacheStorage config.

This should also speed up prerendering time within the CI, you can cache the .nuxt/cache/og-image folder between builds.

Nuxt Site Config (8bf08af)

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

Instead, you should use the nuxt-site-config config. For example:

export default defineNuxtConfig(() => {
  site: {
      url: 'https://example.com'
   }
})

There are assertions in-built when prerendering to notify you when it's missing.

Bug Fixes

• cache key for index route (21411d4)
• prerender dynamic Satori when prerendering (6db51d8)

Features

• add enabled config (fbfc4e0)