Runtime Site Config

Site config can be set from many different sources from each environment.

The most flexible way to set your site config is at runtime. This gives you the ability to set it based on any condition you want, even allowing multi-tenancy.

Caveats

When setting site config at runtime, it's important to set it as early as possible on the server.

This is because modules will be using site config to generate your app, for example if you're using Nuxt SEO, site config is used for sitemap.xml and robots.txt generation.

Therefore, it's recommended to set it either within a Nitro plugin or middleware.

Plugin

A Nitro plugin is useful when you want to set site config based on a static condition, such as the environment or based on a result from a database.

Because Site Config is attached to a H3 Request context, you will need to use the site-config:init hook to set it.

For example, here we are setting site config based on a database query:

export default defineNitroPlugin(async (nitroApp) => {
  const site = await $fetch('/db/site-config', {
    params: { env: import.meta.env.NUXT_SITE_ENV },
  })
  nitroApp.hooks.hook('site-config:init', ({ event, siteConfig }) => {
    siteConfig.push(site)
  })
})

Middleware

If you prefer a simpler API, you can a Nitro middleware instead with updateSiteConfig function.

For example, here we are setting site config based on an admin host:

export default defineRequestMiddleware(async (e) => {
  const host = useNitroOrigin(e)
  if (host.startsWith('admin.')) {
    updateSiteConfig({
      name: 'Admin',
      indexable: false,
      url: 'https://admin.example.com'
    })
  }
})