usePageConfig

Read the config with this page's overrides applied. definePageConfig supplies them, and nothing is written to the store.

Import

import { definePageConfig, usePageConfig } from '@core/config/definePageConfig'

Signature

function definePageConfig(overrides: DeepPartial<SmartAdminConfig>): void
function usePageConfig(): ComputedRef<SmartAdminConfig>

Returns

Member	Type	Description
(return value)	ComputedRef<SmartAdminConfig>	The store's config with any provided overrides deep-merged over it.

With no override in scope, the computed returns the store's own config object unchanged, so there is no merge cost on a page that does not use it.

Example

<script setup lang="ts">
import { definePageConfig, usePageConfig } from '@core/config/definePageConfig'

definePageConfig({
  ui: { density: 'compact' },
  features: { activityLog: false },
})

const config = usePageConfig()
</script>

<template>
  <section>
    <p>Density here: {{ config.ui.density }}</p>
    <p v-if="config.features.activityLog">
      Activity is being recorded.
    </p>
  </section>
</template>

Notes

• The override reaches components that call usePageConfig(), and nothing else. It does not reach the singleton engines. Those mutate document-global state — classes on <html>, links in <head>, variables on :root — which Vue cannot scope to one subtree. So a page can ask for compact density in its own components, but it cannot re-theme the shell around it.
• The overrides object is captured when definePageConfig runs. Swapping it for a new reference afterwards does not re-flow to children. Changes to the underlying store do, because the merge is inside a computed.
• definePageConfig calls provide, so it belongs in setup, at the top level, like any other provide.

Related

• useConfig — the store itself.
• Global config — what each key does.