Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Ozcaar/real-estate-template/llms.txt

Use this file to discover all available pages before exploring further.

useSiteConfig() is the single composable every component uses to read the active agency identity and its resolved theme tokens at runtime. It is backed by Nuxt’s useState primitive, which means the value is serialized into the SSR payload and rehydrated on the client without an extra network round-trip — no flash of unstyled content, no mismatch between server and client renders. Components must never import siteConfig directly from ~/config/site.config; always go through useSiteConfig() so a future multi-tenant loader can swap the active agency without changing any component. 
import { useSiteConfig } from '~/composables/useSiteConfig'

​
Signature

function useSiteConfig(): Ref<SiteConfig>
​
returns
Ref<SiteConfig>
A reactive Ref wrapping the active SiteConfig. The value is initialized from the static agency config on first call and shared across all components via the 'site-config' state key.

​
SiteConfig Interface

export interface SiteConfig {
  agency: AgencyConfig
  theme: ThemeConfig
}
​
agency
AgencyConfig
Identity, contact details, social links, module toggles, locale settings, and currency for the active agency. See AgencyConfig below.
​
theme
ThemeConfig
The resolved design-token set: color palette, font stacks, border-radius scale, shadow scale, and layout constraints. See ThemeConfig below.

​
AgencyConfig Reference

export interface AgencyConfig {
  id: string
  name: string
  slogan?: string
  logo: string
  favicon?: string
  theme: string
  defaultLocale: string
  availableLocales: string[]
  currency: string
  measurementUnit: 'metric' | 'imperial'
  contact: AgencyContactConfig
  social: AgencySocialConfig
  modules: AgencyModulesConfig
}

​
AgencyContactConfig

export interface AgencyContactConfig {
  phone: string
  whatsapp: string
  email: string
  address: string
  businessHours?: string
}

​
AgencySocialConfig

export interface AgencySocialConfig {
  facebook?: string
  instagram?: string
  linkedin?: string
  tiktok?: string
  youtube?: string
}

​
AgencyModulesConfig

export interface AgencyModulesConfig {
  properties: boolean
  developments: boolean
  agents: boolean
  blog: boolean
  testimonials: boolean
  contact: boolean
}
Each boolean toggles an entire feature module. Pages and navigation items check modules.* to conditionally render their content — no code changes are needed to enable or disable a module across the whole site.

​
ThemeConfig Reference

export interface ThemeConfig {
  id: string
  name: string
  colors: ThemeColors
  fonts: ThemeFonts
  radius: ThemeRadius
  shadow: ThemeShadow
  layout: ThemeLayout
}
At runtime the active theme’s tokens are serialized into CSS custom properties (e.g. --color-primary, --radius-md) so every component can reference them via var(--color-primary) without coupling to any specific hex value.

​
Basic Usage

const site = useSiteConfig()

// Agency identity
const agencyName = site.value.agency.name
const logoPath = site.value.agency.logo

// Contact channels
const phone = site.value.agency.contact.phone
const whatsapp = site.value.agency.contact.whatsapp
const email = site.value.agency.contact.email

// Module toggles
const hasProperties = site.value.agency.modules.properties
const hasAgents = site.value.agency.modules.agents

// Theme colors
const primaryColor = site.value.theme.colors.primary
const surfaceColor = site.value.theme.colors.surface

​
Common Access Patterns

ExpressionTypeDescription
site.value.agency.namestringDisplay name for the agency
site.value.agency.sloganstring | undefinedOptional marketing slogan
site.value.agency.logostringLogo path, served from public/
site.value.agency.currencystringISO 4217 currency code (e.g. 'USD', 'MXN')
site.value.agency.measurementUnit'metric' | 'imperial'Default area unit for the catalog
site.value.agency.contact.phonestringAgency phone number
site.value.agency.contact.whatsappstringWhatsApp number (digits or formatted)
site.value.agency.contact.emailstringAgency email address
site.value.agency.contact.addressstringPhysical address string
site.value.agency.social.instagramstring | undefinedInstagram URL, if configured
site.value.agency.modules.propertiesbooleanWhether the properties module is enabled
site.value.agency.modules.agentsbooleanWhether the agents module is enabled
site.value.agency.defaultLocalestringDefault locale code (e.g. 'en', 'es')
site.value.theme.colors.primarystringBrand primary hex color
site.value.theme.colors.backgroundstringPage background color
site.value.theme.colors.surfacestringCard/panel background color
site.value.theme.fonts.headingstringHeading font stack
site.value.theme.fonts.bodystringBody font stack

​
Conditional Rendering with Module Toggles

The modules object is the canonical way to gate UI sections. Check it in <template> to conditionally render navigation items and page sections: 
<script setup lang="ts">
import { computed } from 'vue'

const site = useSiteConfig()
const modules = computed(() => site.value.agency.modules)
</script>

<template>
  <nav>
    <NuxtLink to="/">Home</NuxtLink>
    <NuxtLink v-if="modules.properties" to="/properties">Properties</NuxtLink>
    <NuxtLink v-if="modules.agents" to="/agents">Agents</NuxtLink>
    <NuxtLink v-if="modules.contact" to="/contact">Contact</NuxtLink>
  </nav>
</template>

​
SSR Safety and the useState Guarantee

useSiteConfig() calls useState<SiteConfig>('site-config', () => siteConfig) internally. The 'site-config' key is the shared state identifier: the first call during SSR initializes the state from the static agency config, and Nuxt serializes it into the HTML payload. When the client hydrates, useState reads the serialized value from the payload instead of re-running the factory function — so the initial value is identical on both sides and hydration never mismatches.
Do not import siteConfig directly from ~/config/site.config in components or pages. A future multi-tenant loader will replace the static factory with a server-side agency lookup (keyed to the request host). Components that bypass useSiteConfig() will not receive the dynamically resolved value and will break in multi-tenant mode.

​
i18n Integration

AgencyConfig does not hold i18n-translated strings. Fields like agency.name, agency.contact.address, and agency.social.* are agency-owned content (not locale strings). Human-readable UI labels — page titles, section headings, button text — live in the locale files under ~/i18n/ and are accessed via useI18n(). Both composables are commonly used together: 
const { t } = useI18n()
const site = useSiteConfig()

// Page title uses the i18n key interpolated with the agency name from config
const seoTitle = computed(() =>
  t('home.seo.title', { agencyName: site.value.agency.name })
)

Build docs developers (and LLMs) love

Get started for freeTalk to us