ConfigGenButton

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

The config generation button. When clicked, it automatically starts the config generation process by navigating through all pages defined in useSpStore.configGenRoutes and scanning each for data-sp-* tags.

After every page is processed, it logs the current state of the config object in the browser console. Copy and paste the object as JSON into config.json when the process is finished.

The process silently stops at the last page.

Auto-hidden outside config-building mode

This button only renders when the following conditions are met:

Dev mode is active (useSpStore.isConfigBuilding is true)
The current user is a Showpad admin
genConfig is enabled

Outside of that context the component renders nothing.

Getting started

<template>
    <div>
        <ConfigGenButton />        
    </div>
</template>

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

API

Properties

No props. The button reads useSpStore.configGenRoutes and useSpStore.isConfigBuilding directly from the store.