useSpConfigStore
import { useSpConfigStore } from '@bbc/front-end-kit/vue/showpad'
The useSpConfigStore manages the injection and generation of Showpad Experience configurations. It handles reading the configuration from the SDK and applying it to the DOM via data attributes.
Tips
This store is automatically initialized by useSpStore. While it can be used independently, it is designed to be accessed through the main useSpStore to ensure consistent state management across the application. All of its properties and methods are proxied directly on useSpStore, so you rarely need to import this store directly.
Overview
This store wraps the core Config manager and ConfigGenerator utilities into a reactive Pinia store. It is primarily used during the initialization phase of the application to ensure that the Showpad-driven configuration is available to all components.
Getting started
The useSpConfigStore is generally initialized during the core setup of the application (often inside useSpStore.init()). However, you may need to interact with it directly when setting up configuration generation tools for development.
import { useSpConfigStore } from '@bbc/front-end-kit/vue/showpad'
import { watch } from 'vue'
const spConfigStore = useSpConfigStore()
// Load the configuration from Showpad
await spConfigStore.loadConfig()
// Enable config generation mode (usually only in development via a dev toggle)
spConfigStore.genConfig = true
// Listen for future config changes (e.g. if updated via Showpad admin)
spConfigStore.initConfigListener()
// Manually trigger a DOM update or Config Generation log
spConfigStore.updateDom()
Use Cases
Automated DOM Injection
The primary use case of this store is to manage the automated injection of Showpad config.json values directly into your Vue components via DOM data attributes.
Instead of manually fetching config values in every component's <script> block, developers can decorate their templates with data-sp-* attributes. When spConfigStore.updateDom() is called, the store reads the DOM and applies the configuration globally.
Config JSON Generation Tooling
Writing a config.json file by hand for complex Showpad applications is tedious and error-prone. The useSpConfigStore solves this by reversing the injection process during development.
If a developer sets genConfig = true, calling updateDom() will not inject values. Instead, it scans the current DOM for data-sp-* attributes, builds a correctly formatted config.json payload, and logs it to the browser console for the user to copy back into the codebase.
Developers can navigate through all views of their app and trigger this generation to automatically build their final config.json file.
Warning
Only DOM elements present in the DOM will be included in the generated config. Make sure invisible elements such as popups are added to the DOM when generating the config.
API
State & Properties
config
The instance of the core Config manager.
Values: Ref<Config | null>
genConfig
Boolean flag that, when enabled in development mode, triggers config generation instead of injection. This is often bound to a developer-only UI toggle (like a ConfigGenButton).
Values: Ref<Boolean>
isConfigBuilding
Computed flag indicating if the store is currently in "Config Building" mode. This is true only when all three conditions are met: dev mode is active (isDevMode), genConfig is enabled, and useShowpadSDKStore.userInfo.isAdmin is truthy. The admin check requires the SDK to have finished loading userInfo — this will be false until that data is available.
Values: ComputedRef<Boolean>
Actions
loadConfig ()
Calls the underlying Config manager's load() method to fetch and parse the config.json. Once loaded, the Config instance is also exposed on window.config for debugging convenience.
Returns: Promise<void>
setDevMode (value)
Sets the internal isDevMode flag. Called internally by useSpStore to keep dev mode in sync, but can also be used directly to enable or disable config-building mode.
Parameters:
value(Boolean): Whether dev mode should be active.
updateDom ()
The core execution method. It decides whether to inject the current configuration into the DOM elements or (if isConfigBuilding is true) generate a new config JSON object and log it to the console.
genSingleConfig ()
Forces the generation of the config JSON object from the current DOM state to the console, bypassing the updateDom checks.
initConfigListener ()
Sets up an event listener on the core Config instance to automatically call updateDom whenever the SDK broadcasts a configuration update.
Utilities
These utilities help resolve dynamic paths within the configuration system based on the application's DOM structure. They are primarily used internally by the Config instance placeholder resolvers.
getRegionPath ($el)
Determines the hierarchical path of nested Showpad regions (defined by data-sp-region) starting from the given element.
processConfigPath ($el, pathToProcess)
Processes a configuration path string, replacing placeholders like {{ path }} with the actual resolved region path of the element.