View

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

The View component is designed to ensure that all view pages share a consistent layout and structure.

By using slots, it allows developers to inject custom content into predefined regions, enabling a flexible yet standardized page layout.

Getting started

<template>
    <View>
        <!-- view contents here -->
    </View>
</template>

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

Slots

before-page

Content rendered before the main page area, outside the view__page wrapper.

default

The main page content. Rendered inside view__page with data-sp-region="page".

after-page

Content rendered after the main page area, outside the view__page wrapper.

popups

Content rendered inside view__popups with data-sp-region="popups". This wrapper is position: absolute, intended for Popup components that should overlay the view.

cms

Content rendered inside view__cms with data-sp-region="cms". This wrapper is always hidden (v-show="false") — it exists solely as a container for data-sp-* elements that need to be scanned by the ConfigGenerator but should not be visible to the user.