og-image
og-image
Enlightened runtime images generated with Vue templates.
nuxt-og-image
Generate OG Images with Vue templates in Nuxt.
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
- 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 yournuxt.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