SPRouterView

Extends ByltRouterView

import { SPRouterView } from '@bbc/front-end-kit/vue/showpad'

A thin wrapper around ByltRouterView that calls useSpStore.updateDom() after every route transition. This ensures config injection runs on the newly mounted view's DOM.

Use this instead of RouterView in Showpad apps

Without SPRouterView, data-sp-* attributes on components in newly navigated views will not receive their injected config values until updateDom() is called manually. Drop this in as a direct replacement for <RouterView />.

Getting started

<template>
    <SPRouterView />
</template>

<script setup>
import { SPRouterView } from '@bbc/front-end-kit/vue/showpad'
</script>

How it works

On every route enter event fired by ByltRouterView, SPRouterView schedules a updateDom() call with a 100ms delay. The delay ensures the new view's DOM is fully rendered before the config injection pass runs.

API

Properties

No props. All behavior is driven by useSpStore internally.

Slots

No additional slots next to ByltRouterView.