nuxt-modules / og-image

Generate OG Images with Vue templates in Nuxt.

528 stars

46 forks

8 issues

TypeScriptVueJavaScript

Chat with Codebase Architecture Scan Security Audit Explain Codebase

AI Architecture Analysis

This repository is indexed by RepoMind. By analyzing nuxt-modules/og-image in our AI interface, you can instantly generate complete architecture diagrams, visualize control flows, and perform automated security audits across the entire codebase.

Our Agentic Context Augmented Generation (Agentic CAG) engine loads full source files into context on-demand, avoiding the fragmentation of traditional RAG systems. Ask questions about the architecture, dependencies, or specific features to see it in action.

Source files are only loaded when you start an analysis to optimize performance.

Click here to launch the interactive analysis workspace

Embed this Badge

Showcase RepoMind's analysis directly in your repository's README.

[![Analyzed by RepoMind](https://img.shields.io/badge/Analyzed%20by-RepoMind-4F46E5?style=for-the-badge)](https://repomind.in/repo/nuxt-modules/og-image)

Preview:

Repository Overview (README excerpt)

Crawler view

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 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 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 using the built-in templates or make your own with Vue components • 🎨 Design and test your in the Nuxt DevTools OG Image Playground with full HMR • ▲ Render using Satori or Takumi: Tailwind / UnoCSS with your theme, Google fonts, 6 emoji families and more. • 🤖 Or prerender using the Browser: Supporting painless, complex templates • 📸 Feeling lazy? 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 dependency to your project: > [!TIP] > Generate an Agent Skill for this package using skilld: > Documentation 📖 Read the full documentation for more information. Demos • 👾  Playground Sponsors License Licensed under the MIT license. [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