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.
npx nuxi module add og-image
npm i nuxt-og-image
You will need to manually add the module to your Nuxt config.
export default defineNuxtConfig({
modules: [
'nuxt-og-image',
],
})
yarn add nuxt-og-image
You will need to manually add the module to your Nuxt config.
export default defineNuxtConfig({
modules: [
'nuxt-og-image',
],
})
pnpm i nuxt-og-image
You will need to manually add the module to your Nuxt config.
export default defineNuxtConfig({
modules: [
'nuxt-og-image',
],
})
bun i nuxt-og-image
You will need to manually add the module to your Nuxt config.
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_PUBLIC_SITE_URL=https://example.comNUXT_PUBLIC_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.