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
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
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
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'
})
}
})