OG Image
Getting Started
Install Nuxt OG Image
Get started with Nuxt OG Image by installing the dependency to your project.
Using Nuxt SEO? This module is already installed for you.
- Install the
nuxt-og-image
dependency to your project:
npx nuxi@latest module add og-image
- 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
:
nuxt.config.ts
export default defineNuxtConfig({
site: {
// production URL
url: 'https://example.com',
},
})
Otherwise, you can use an .env
file or environment variables.
.env
NUXT_PUBLIC_SITE_URL=https://example.com
For more complex applications, learn more at the Nuxt Site Config docs.
- Enable Nuxt DevTools
Nuxt OG Image uses Nuxt DevTools to provide a live preview of your OG Images.
nuxt.config.ts
export default defineNuxtConfig({
devtools: { enabled: true },
})
- Create your first image
Setup complete! Now get started with your first image.