Nuxt Hooks

Hook into the Nuxt OG Image build-time behaviour.

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',
      })
    }
  }
})
Did this page help you?