nuxt-og-image

[![npm version][npm-version-src]][npm-version-href] [![npm downloads][npm-downloads-src]][npm-downloads-href] [![License][license-src]][license-href] [![Nuxt][nuxt-src]][nuxt-href] Nuxt OG Image allows you to easily generate OG Images using either Vue components or just screenshots of your pages. OG Images are known to improve click-through rates on social media. New to Open Graph? Check out the [Mastering Open Graph Tags](https://nuxtseo.com/learn/mastering-meta/open-graph) guide to learn more about why you might need this module.

_{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](https://github.com/vercel/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 Install `nuxt-og-image` dependency to your project: ```bash npx nuxi@latest module add og-image ``` ## Documentation [📖 Read the full documentation](https://nuxtseo.com/og-image/getting-started/installation) for more information. ## Demos - [👾 Playground](https://stackblitz.com/edit/nuxt-starter-pxs3wk?file=nuxt.config.ts) ## Sponsors

## License Licensed under the [MIT license](https://github.com/nuxt-modules/og-image/blob/main/LICENSE.md). [npm-version-src]: https://img.shields.io/npm/v/nuxt-og-image/latest.svg?style=flat&colorA=18181B&colorB=28CF8D [npm-version-href]: https://npmjs.com/package/nuxt-og-image [npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-og-image.svg?style=flat&colorA=18181B&colorB=28CF8D [npm-downloads-href]: https://npmjs.com/package/nuxt-og-image [license-src]: https://img.shields.io/github/license/nuxt-modules/og-image.svg?style=flat&colorA=18181B&colorB=28CF8D [license-href]: https://github.com/nuxt-modules/og-image/blob/main/LICENSE.md [nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js [nuxt-href]: https://nuxt.com