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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk5MTE4NDMsIm5iZiI6MTcxOTkxMTU0MywicGF0aCI6Ii81MzI2MzY1LzI4ODAzOTM5Ny1lMzM3YjQ5MC1kY2NiLTRlNTgtOTcyYS01ZTZlNjNmMzA5ODYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcwMiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MDJUMDkxMjIzWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZWM4MzU2ZDY0YWJiMjM3MmNlYzlkYjdmYzY5Mjg0NTcyYWRlZTFkMzY0ZDg1Zjc5NGVlZjJmNWQ2ZmJiMDU0OSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.451phQ8P7koKQi2ZCn9Jz3ySYr95D11jWGhZnNPvqsI)
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