og-image

Go to documentation

Easily generate dynamic social share images.

-

-

nuxt-og-image

Enlightened runtime images generated with Vue templates, for Nuxt.

Status: v2 Released
^{Please report any issues 🐛}
_{Made possible by my Sponsor Program 💖
Follow me @harlan_zw 🐦 • Join Discord for help}

Features

✨ Turn your Vue components into og:image templates
🎨 Design them in the OG Image Playground with full HMR
▲ Render using Satori: Tailwind classes, Google fonts, emoji support and more!
🤖 Or prerender using the Browser: Supporting painless, complex templates
📸 Feeling lazy? Just generate screenshots for every page: hide elements, wait for animations, and more
⚙️ Works on the edge: Vercel Edge, Netlify Edge and Cloudflare Workers

Installation

Install nuxt-og-image dependency to your project:

#
yarn add -D nuxt-og-image
#
npm install -D nuxt-og-image
#
pnpm i -D nuxt-og-image

Add it to your modules section in your nuxt.config:

export default defineNuxtConfig({
  modules: ['nuxt-og-image']
})

Playgrounds

Documentation

📖 Read the full documentation for more information.

Sponsors

License

MIT License © 2023-PRESENT Harlan Wilton