Regional Technical Details

Regional Content Architecture

The system uses a fallback chain to serve the most appropriate content based on the user's detected country and locale. The user's country is detected via the Cloudflare CF-IPCountry header.

Fallback Chain Logic:

1. [collection]_[country]_[locale] (e.g., pricing_us_en)
2. [collection]_[country] (e.g., pricing_us)
3. [collection]_[tier]_[locale] (e.g., pricing_tier1_en)
4. [collection]_[tier] (e.g., pricing_tier1)
5. [collection]_[locale] (e.g., pricing_en)
6. [collection] (e.g., pricing)

Configuration

Regional content settings are defined in app.config.ts.

Example configuration:

export default defineAppConfig({
  content: {
    regionalContent: {
      enabled: true,
      enabledFor: {
        pricing: true, // Enable for specific content types
      },
      countryMapping: {
        US: 'tier1',
        GB: 'tier1',
        IN: 'tier2',
      },
      countryOverrides: ['us'], // Explicitly override for specific countries
    },
  },
})

Programmatic Usage

To fetch regional content programmatically, use the useContent composable with the regional: true option.

<script setup>
// Automatically resolves the best content match
const { data: page } = await useContent('pricing', { regional: true })
</script>