Index of every page on this site: llms.txt

When using Nuxt as a server-side app with prerendered OG Images, you are forced to have runtime OG images as well which adds significant overhead to the server build.

To address this, we introduce the zeroRuntime config, which removes all tree-shakable OG image code from the final output.

Usage

Enable zero runtime when your OG images only change at build time (not dynamically at runtime):

To enable zero runtime, add the following to your config:

nuxt.config.ts
export default {
  ogImage: {
    zeroRuntime: true
  }
}

Prerender every page that uses OG images, because the server runtime is not available. A page that is not prerendered gets no og:image tag: defineOgImage() only runs during prerender.

nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    prerender: {
      crawlLinks: true,
      routes: [
        '/',
        // ...
      ],
    },
  }
})

Limitations: community templates are not in production builds, with or without Zero Runtime. Eject each community template that you use into your components/OgImage folder, or the build fails.

Benchmarks

Nuxt OG Image - Defaults

Nitro: 1.6mb

  • node_modules: 25mb

Nuxt OG Image - Zero Runtime

Nitro: 306kb (81% reduction)

  • node_modules: 2.0mb (92% reduction)
Was this page helpful?