useShowpadSDKStore
import { useShowpadSDKStore } from '@bbc/front-end-kit/vue/showpad'
The useShowpadSDKStore is a dedicated wrapper for the official Showpad Experience App SDK. It provides a reactive layer over the SDK's asynchronous methods, making it easy to use SDK data (like user and device info) directly in Vue templates.
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. For most use cases, prefer the unified methods on useSpStore which handle SDK/API fallback logic automatically.
Overview
While useSpStore is the high-level hub, useShowpadSDKStore focuses specifically on SDK interactions. It manages the SDK lifecycle, handles initial data fetching (UserInfo, DeviceInfo), and provides clean wrappers for common SDK actions.
Translation Layer
Beyond reactivity, this store acts as a translation layer between the application codebase and the Showpad Experience App SDK. Showpad's SDK has historically introduced breaking changes without deprecation periods, which can cascade through an entire project.
By centralising all SDK interactions inside this single store, the rest of the codebase is fully isolated from those changes. When Showpad updates or breaks an SDK method, the fix is contained to this file alone — the store's public API remains unchanged, only the internal translation to the new SDK contract needs updating.
Any changes to the store's own public API will always go through a proper deprecation cycle with internal translations, so consuming components can migrate at their own pace.
Getting started
import { useShowpadSDKStore } from '@bbc/front-end-kit/vue/showpad'
const showpadSDKStore = useShowpadSDKStore()
// Initialize the SDK connection
await showpadSDKStore.init()
API
State & Properties
loaded
Boolean flag indicating if the SDK is loaded and initial data (user, device) has been fetched.
Values: Ref<Boolean>
loading
Boolean flag indicating if the SDK or an initial data fetch is in progress.
Values: Ref<Boolean>
loadStage
Current description of the SDK initialization phase (e.g., "Loading Showpad SDK", "Checking for Admin status").
Values: Ref<String>
userInfo
Reactive object containing the current user's details. Includes an isAdmin flag.
Values: Ref<Object | null>
deviceInfo
Reactive object containing details about the device the app is running on.
Values: Ref<Object | null>
accessToken
The OAuth access token obtained from the SDK during initialization. Used internally by asset and AppsDB methods.
Values: Ref<String | null>
Methods
init ()
Initializes the SDK connection. This method:
- Waits for the SDK library to be ready.
- Fetches user information.
- Checks for admin status (if online).
- Fetches device information.
- Triggers the configuration loading process.
Returns: Promise<void>
getShowpadApi ()
Retrieves the authenticated API configuration from the SDK.
Returns: Promise<ApiConfig>
trackEvent (event)
A wrapper for Showpad.trackEvent. Logs a custom event to Showpad analytics.
Parameters:
event(Object): The event data.
Returns: Promise<void>
openAssetViewer (slug)
A wrapper for Showpad.openAssetViewer. Opens the native SDK viewer for an asset.
getAssetPreview (id, slug)
A wrapper for the SDK's asset preview method. Returns the preview URL for the given asset. Handles accessToken injection internally.
getAssetFileUrl (id, slug)
A wrapper for the SDK's file URL method. Returns the binary file URL for the given asset. Handles accessToken injection internally.
getAssetFile (id, slug)
A wrapper for the SDK's file download method. Returns the asset content as a Blob. Handles accessToken injection internally.
AppsDB Wrappers
The following methods are thin wrappers over the Showpad SDK's AppsDB entry management. They are used internally by useAppsDbStore, which provides a higher-level, reactive interface that is recommended for all project use.
These methods are exposed because this store is a translation layer — keeping them available means you can bypass useAppsDbStore entirely when debugging raw SDK behaviour or diagnosing kit-level issues.
createStore (id)
A wrapper for the SDK's AppsDB store creation method.
getStoreEntries (id) / getGlobalStoreEntries (id)
Wrappers for the SDK's AppsDB entry retrieval methods for local and global stores respectively.
getStoreEntryValue (id, entryId) / getGlobalStoreEntryValue (id, entryId)
Wrappers for the SDK's AppsDB single-entry read methods for local and global stores respectively.
setStoreEntryValue (id, entryId, value) / setGlobalStoreEntryValue (id, entryId, value)
Wrappers for the SDK's AppsDB entry write methods for local and global stores respectively.
deleteStoreEntry (id, entryId) / deleteGlobalStoreEntry (id, entryId)
Wrappers for the SDK's AppsDB entry delete methods for local and global stores respectively.