nuxt4-demo/app/composables/useGlobalConfig.ts

import { request, unwrapApiBody, type ApiResponse } from '../utils/http/factory'

export type GlobalConfig = {
  siteName: string
  allowRegister: boolean
}

type GlobalConfigResult = {
  config: GlobalConfig
}

const DEFAULT_GLOBAL_CONFIG: GlobalConfig = {
  siteName: 'Person Panel',
  allowRegister: true,
}

export function useGlobalConfig() {
  const { data, pending, error, refresh } = useAsyncData(
    'global:config',
    async () => {
      const payload = await request<ApiResponse<GlobalConfigResult>>('/api/config/global')
      return unwrapApiBody(payload).config
    },
    {
      default: () => ({ ...DEFAULT_GLOBAL_CONFIG }),
    },
  )

  const config = computed<GlobalConfig>(() => data.value ?? DEFAULT_GLOBAL_CONFIG)

  return {
    config,
    siteName: computed(() => {
      const n = config.value.siteName?.trim()
      return n && n.length > 0 ? n : DEFAULT_GLOBAL_CONFIG.siteName
    }),
    allowRegister: computed(() => config.value.allowRegister),
    pending,
    error,
    refresh,
  }
}