https://github.com/nuxt-modules/og-image
Generate OG Images with Vue templates in Nuxt.
https://github.com/nuxt-modules/og-image
Last synced: about 1 month ago
JSON representation
Generate OG Images with Vue templates in Nuxt.
- Host: GitHub
- URL: https://github.com/nuxt-modules/og-image
- Owner: nuxt-modules
- License: mit
- Created: 2022-12-14T10:14:51.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2026-02-03T15:30:19.000Z (about 2 months ago)
- Last Synced: 2026-02-03T15:51:28.435Z (about 2 months ago)
- Language: TypeScript
- Homepage: https://nuxtseo.com/og-image
- Size: 27.1 MB
- Stars: 503
- Watchers: 1
- Forks: 39
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
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) or [Takumi](https://github.com/kane50613/takumi): Tailwind / UnoCSS with your theme, Google fonts, 6 emoji families 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
[nuxt-href]: https://nuxt.com