General
import * as BBCSPVUE from '@bbc/front-end-kit/vue/showpad'
Tips
This import adds the Showpad-related components to the list of the original components. Components that were wrapped as an extension of the original components may override the original.
Introduction
The Showpad Vue components serve as a specialized extension to our generic Vue components, tailored specifically for use within Showpad environments.
These components have been designed with two primary goals in mind:
Extended Functionality:
Many Showpad components act as wrappers or extensions around our generic Vue components. By doing so, they integrate our own Showpad-related features (most notably, the use of data-sp-* attributes and Showpad tracking).
It prepares the html with the data-sp tags, ready for the original Showpad logic to either build a configuration file out of it or inject the values from the configuration file into the appropriate DOM elements.
For a deeper dive into how this mechanism works, check out the following pages:
- Config: For management of data-sp attributes and the injection of the values on page load.
- ConfigGenerator: About the generation phase of the config.
Dedicated Components:
In addition to the extended variants, our kit includes an extra set of Vue components frequently used in Showpad projects. These components address common patterns and needs that arise specifically in the Showpad context, ensuring that developers have a consistent and reliable set of tools at their disposal to increase development speed and reduce repeated Showpad frustrations.
What you get
Components
Showpad-aware wrappers and dedicated components for common Showpad patterns. See the sidebar for the full list.
Stores
Seven Pinia stores that cover the full Showpad integration surface:
| Store | Purpose |
|---|---|
| useSpStore | Central hub — SDK-first, API-fallback orchestration |
| useShowpadSDKStore | Showpad Experience App SDK wrapper |
| useShowpadAPIStore | Showpad REST API wrapper |
| useSpConfigStore | Config injection and config generation tooling |
| useSpTrackingStore | Analytics tracking (clicks and pageviews) |
| useAppsDbStore | AppsDB reactive store management |
| useBreadcrumbStore | Breadcrumb trail state |
Composables
- useConnectionStatus — online/offline detection pre-configured for Showpad environments
Router
Use SPRouterView instead of the standard RouterView in Showpad apps. It calls useSpStore.updateDom() after each route transition so config injection runs on every new view.
Common dependencies
Within the Showpad ecosystem, our projects typically incorporate several key libraries and frameworks, such as: