Og Image

Overview

The Nuxt OG Image theme is a powerful tool designed to help users create attractive og:images for their websites. With built-in templates and the ability to create custom images using Vue components, users can easily design and test their og:images. The theme also offers the Nuxt DevTools OG Image Playground, allowing for real-time testing with Hot Module Replacement. Additionally, the theme supports rendering using Satori: Tailwind / UnoCSS, providing a variety of styling options including Google fonts and support for multiple emoji families. The theme is also compatible with popular edge platforms such as Vercel Edge, Netlify Edge, and Cloudflare Workers.

Features

• Create og:image: Choose from built-in templates or use Vue components to create custom og:images.
• Nuxt DevTools OG Image Playground: Design and test og:images with full Hot Module Replacement support.
• Render using Satori: Tailwind / UnoCSS: Style og:images using the Satori framework, including options like Google fonts and support for multiple emoji families.
• Prerendering using the Browser: Easily generate screenshots of every page, with the ability to hide elements and wait for animations.
• Works on the edge: Compatible with popular edge platforms like Vercel Edge, Netlify Edge, and Cloudflare Workers.

Installation

To install the Nuxt OG Image theme, follow these steps:

1. Add the nuxt-og-image dependency to your project.

   npm install nuxt-og-image
   

2. Add nuxt-og-image to the modules section in your nuxt.config.js.

   modules: [
     'nuxt-og-image',
   ]
   

Summary

The Nuxt OG Image theme offers a range of features to help users create visually appealing og:images for their websites. With customizable templates, real-time testing options, and compatibility with popular edge platforms, this theme is a valuable tool for web developers and designers.