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.
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
nuxt.config.ts
export default defineNuxtConfig( site: { url: 'https://example.com', name: 'My Awesome Website' }, })
.env
NUXT_SITE_URL=https://example.comNUXT_SITE_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?