Tried

// Composable : useWhitelabel.ts:
export interface WhitelabelConfig {
  tenantName: string
  logo: {
    light: string
    dark: string
  }
  favicon: string

  primaryColor: string
  neutralColor: string

  features: {
    showThemeCustomizer: boolean
    showTemplatesMenu: boolean
    showDocumentation: boolean
    customMenuItems?: Array<{
      label: string
      icon: string
      to: string
      target?: string
    }>
  }
}

export function useWhitelabel() {
  const config = useState<WhitelabelConfig | null>('whitelabel-config', () => null)
  const appConfig = useAppConfig()

  async function loadWhitelabelConfig() {
    try {
      const { data } = await useFetch<WhitelabelConfig>('/api/whitelabel')

      if (data.value) {
        config.value = data.value

        if (data.value.primaryColor) {
          appConfig.ui.colors.primary = data.value.primaryColor
        }
        if (data.value.neutralColor) {
          appConfig.ui.colors.neutral = data.value.neutralColor
        }
      }
    } catch (error) {
      console.error('Failed to load whitelabel config:', error)
    }
  }

  return {
    config: readonly(config),
    loadWhitelabelConfig
  }
}


////////////////////////////////////////////////////////////////////////

// Plugin : whitelabel.client.ts:
export default defineNuxtPlugin(async () => {
  const { loadWhitelabelConfig } = useWhitelabel()

  await loadWhitelabelConfig()
})