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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE5NjE2ODIsIm5iZiI6MTcyMTk2MTM4MiwicGF0aCI6Ii81MzI2MzY1LzI4ODAzOTM5Ny1lMzM3YjQ5MC1kY2NiLTRlNTgtOTcyYS01ZTZlNjNmMzA5ODYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcyNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MjZUMDIzNjIyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MDc0MmQ3ZTlkOTA1ODY0NDg4MzI2OWNhOTgxMGRlNjM0Njc3MTFiZjhlYzBjNTRkZDY3ZjE3YmJjMDg0MzQ5NCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.0e9SUc5V0CLbvAzPYfH1yyMUqQWq1F6p4OEPTsxLppI)
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