Install Nuxt OG Image

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

1. Install the nuxt-og-image dependency to your project:

pnpm i -D nuxt-og-image

2. Add nuxt-og-image to modules in your nuxt.config:

export default defineNuxtConfig({
  modules: ['nuxt-og-image']
})

3. 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.

NUXT_PUBLIC_SITE_URL=https://example.com

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

4. Enable Nuxt DevTools

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

export default defineNuxtConfig({
  devtools: { enabled: true },
})

4. Create your first image

Setup complete! Now get started with your first image.