OG Image
Getting Started

Install Nuxt OG Image

Get started with Nuxt OG Image by installing the dependency to your project.

Using Nuxt SEO? This module is already installed for you.

  1. Install the nuxt-og-image dependency to your project:
npx nuxi@latest module add og-image
  1. Set a Site URL

To prerender pages that use OG Image, the module needs to know your site URL.

The easiest way to set a site URL is to provide it in your nuxt.config:

export default defineNuxtConfig({
  site: {
    // production URL
    url: 'https://example.com',

Otherwise, you can use an .env file or environment variables.


For more complex applications, learn more at the Nuxt Site Config docs.

  1. Enable Nuxt DevTools

Nuxt OG Image uses Nuxt DevTools to provide a live preview of your OG Images.

export default defineNuxtConfig({
  devtools: { enabled: true },
  1. Create your first image

Setup complete! Now get started with your first image.