Generate OG Images with Vue templates in Nuxt.
![Nuxt OG Image DevTools Preview](https://private-user-images.githubusercontent.com/5326365/288039397-e337b490-dccb-4e58-972a-5e6e63f30986.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjA1OTIxMDIsIm5iZiI6MTcyMDU5MTgwMiwicGF0aCI6Ii81MzI2MzY1LzI4ODAzOTM5Ny1lMzM3YjQ5MC1kY2NiLTRlNTgtOTcyYS01ZTZlNjNmMzA5ODYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcxMCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MTBUMDYxMDAyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MzRkOGY3M2JjOTBmNGFiN2YwMWZhN2RjODM4NzZmNDE4OTA3NTYwNmM4NmE1MmMzNzczN2M5ODVjMTA0MWZjYSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.Maj1AInE-T5yAfgjhxvAUEi2AL-6bheiCn8ez5hjbcU)
Status: v3 RC is available Please report any issues π Made possible by my Sponsor Program π Follow me @harlan_zw π¦ β’ Join Discord for help |
- β¨ 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
Install nuxt-og-image
dependency to your project:
npx nuxi@latest module add og-image
π Read the full documentation for more information.
MIT License Β© 2023-PRESENT Harlan Wilton