Install Nuxt OG Image

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

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.

bash
npx nuxi module add 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.

Site Config Quick Setup
export default defineNuxtConfig( site: {  url: 'https://example.com',  name: 'My Awesome Website'  }, }) 
For more advanced configurations, check out the site config guide .

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.

Did this page help you?