Join the Nuxt Team at Frontend Nation 4-7 June.

og-image
og-image

Enlightened runtime images generated with Vue templates.

nuxt-og-image

NPM versionNPM DownloadsGitHub stars

Generate OG Images with Vue templates in Nuxt.

Nuxt OG Image DevTools Preview

Status: v3 RC is available
Please report any issues ๐Ÿ›
Made possible by my Sponsor Program ๐Ÿ’–
Follow me @harlan_zw ๐Ÿฆ โ€ข Join Discord for help

Features

  • โœจ Create an og:image using the built-in templates or make your own with Vue components
  • ๐ŸŽจ Design and test your og:image in the Nuxt DevTools OG Image Playground with full HMR
  • โ–ฒ Render using Satori: Tailwind / UnoCSS with your theme, Google fonts, 6 emoji families supported 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

  1. Install nuxt-og-image dependency to your project:
npx nuxi@latest module add og-image
  1. 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