Install Nuxt OG Image

Setup Module

Want to know why you might need this module? Check out the introduction.

To get started with Nuxt OG Image, you need to install the dependency and add it to your Nuxt config.

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

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

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

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

Verifying Installation

Out-of-the-box the module will not do anything until you configure it.

You can verify the module is installed correctly by checking the Nuxt DevTools for the OG Image tab.

The DevTools is the starting point, providing a playground to design and test your OG Image with full HMR support.

Configuration

OG Images must be served with absolute URLs, if you're prerendering, you will need to provide a Site URL.

export default defineNuxtConfig( site: {  url: 'https://example.com',  name: 'My Awesome Website'  }, }) 

NUXT_SITE_URL=https://example.comNUXT_SITE_NAME=My Awesome Website

Next Steps

You've successfully installed Nuxt OG Image, but you need to make your first OG Image.

Follow the Getting Familiar with Nuxt OG Image tutorial to get started.