OG Image
Api
Nuxt Hooks
Hook into the Nuxt OG Image build-time behavior.
Built-time hooks for Nuxt OG Image.
nuxt-og-image:runtime-config
Type: (config: ModuleOptions) => HookResult
Allows you to modify the Nuxt OG IMage runtime config at build-time.
Useful for other modules that want to modify the config.
nuxt.config.ts
export default defineNuxtConfig({
hooks: {
'nuxt-og-image:runtime-config': (config) => {
// modify the config
config.colorPreference = 'dark'
}
}
})
nuxt-og-image:components
Type: (ctx: { components: OgImageComponent[] }) => HookResult
This hook allows you to programmatically modify the components that are used by the module.
nuxt.config.ts
export default defineNuxtConfig({
hooks: {
'nuxt-og-image:components': (ctx) => {
// remove community components
ctx.components = ctx.components.filter(c => c.category !== 'community')
// add our own community component
const myComponentPath = resolve('./MyComponent.vue')
const myComponentContents = fsp.readFile(myComponentPath)
components.push({
hash: hash(myComponentContents),
pascalName: 'MyComponent',
kebabName: 'my-component',
path: nuxt.options.dev ? myComponentPath : undefined,
category: 'community',
credits: 'My Company',
})
}
}
})