v2.0.0
- # Background
- # Features 🚀
- # New Default Template
- # Server-Side Runtime Images
- # Satori Vue SFC SupportWhen 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
- # Playground: Editable Props
- # Nuxt Icon Support
- # New Component Folder
- # New composable / component API
- # Runtime Cache
- # Nuxt Site Config
- # Deprecations and Breaking Changes
- Nuxt Redirects
- Nuxt Google Search Console
- Nuxt Internal Links
- Nuxt SEO Analyze
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:
Provider | Satori | Browser |
---|---|---|
Node | ✅ | ✅ |
Vercel | ✅ | ❌ |
Vercel Edge | ✅ | ❌ |
Cloudflare Pages | ✅ | ❌ |
Netlify | ✅ | ❌ |
Netlify Edge | (TBC) | ❌ |
StackBlitz | ✅ (emojis don't work) | ❌ |
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.
Satori Vue SFC
<style>
tag in your Vue SFCs. This comes in handy as Satori's Tailwind support is limited.<template>
<div>
<h1>Hello World</h1>
</div>
</template>
<style>
h1 {
font-size: 100px;
text-align: center;
}
</style>
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.
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.
Deprecations and Breaking Changes
API Changes
The following options have been removed from nuxt.config:
host
,siteUrl
forcePrerender
- removed, not neededsatoriProvider
- removed useruntimeSatori
browserProvider
- removed useruntimeBrowser
experimentalInlineWasm
- removed, this is now automatic based on environmentexperimentalRuntimeBrowser
- removed, this is now automatic based on environment
The following options have been deprecated from the defineOgImage
options:
static
- usecache
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, usedefineOgImage()
(default behaviour is to cache), if you want to be verbose you can usedefineOgImageCached()
or<OgImageCached />
<OgImageStatic />
is deprecated, use<OgImage />
defineOgImageDynamic()
is deprecated, usedefineOgImageWithoutCache()
<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
}
})