Core Concepts

Understanding Site Config

Why Site Config Exists

Every SEO module needs similar configuration.

For example, a site URL is needed by sitemaps for canonical links. OG images need it for absolute URLs. Schema.org needs it for identifiers.

Without Site Config, you'd set the same URL in multiple places which can lead to excessive duplication and boilerplate for more complex sites such as multilingual or multi-tenant setups.

Site Config solves this: set your site details once, every module has access to them automatically.

Quick Setup

For most sites, add this to nuxt.config.ts:

export default defineNuxtConfig({
  site: {
    url: 'https://example.com',
    name: 'My Site'
  }
})

That's it. All modules now know your canonical URL and site name.

Available Options

OptionPurposeDefault
urlCanonical site URL (required for SEO)Auto-detected in dev
nameSite name for meta tags, Schema.org-
descriptionDefault meta description-
defaultLocaleLanguage code (e.g., en)Auto from i18n
indexableAllow search engine indexingtrue in production
trailingSlashURLs end with /false

See full config reference for all options.

Environment-Specific Config

Running staging or preview environments? Use environment variables so each deployment gets the right URL:

# .env.staging
NUXT_SITE_URL=https://staging.example.com
NUXT_SITE_ENV=staging
# .env.production
NUXT_SITE_URL=https://example.com
NUXT_SITE_ENV=production

Non-production environments are automatically blocked from indexing.

Reading Site Config

Access your config anywhere with useSiteConfig():

<script setup>
const site = useSiteConfig()
// site.url, site.name, site.description, etc.
</script>

Works in components, composables, and server routes.

Multi-Tenancy

Serving multiple domains from one Nuxt app? Site Config handles this:

export default defineNuxtConfig({
  site: {
    multiTenancy: [
      {
        hosts: ['example.com', 'www.example.com'],
        config: { name: 'Example', url: 'https://example.com' }
      },
      {
        hosts: ['foo.com', 'www.foo.com'],
        config: { name: 'Foo', url: 'https://foo.com' }
      }
    ]
  }
})

The correct config loads based on the incoming request hostname.

See the Multi-Tenancy guide for runtime configuration.

Learn More

Did this page help you?