Vue Kit

The front-end kit also provides a set of generic and frequently reused Vue 3 components. These components extend upon the native js front-end kit and are ready to be used in or extended from in projects & UI Kits.

These vue components can be used in any type of vue-related project.

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

Showpad vue components

The kit also provides Showpad-ready Vue components which are the generic Vue components with extra logic like support for showpad data attributes, showpad tracking, … Showpad components also include a set of extra Showpad specific components like AssetList, Media, useSpStore, …

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

How to extend a component

Next to using these components directly in a project. It is also possible to extend from them to add extra logic and/or add a basic style that is specific to the project or kit.

Extending component is made possible, thanks to the way Vue 3 is set up.

<template>
    <Popup>
        <h1>Extended Popup</h1>
        <slot />
    </Popup>
</template>

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

<style lang="scss">

</style>

In this example we extend from Popup.vue in the Front-end kit and add a title. Every time this extended popup will be used in the project, it will contain that title.

Tips

It is preferred to always extend components in projects. A small cost during initial setup but a great win during maintenance, bugfixing and extensibility in the future as imports don't need to be updated in the codebase when suddenly the generic component needs to be extended in a later phase of the project.

General guidelines

Javascript

Always use Composition API. Options API is the original Vue 2 structure, but there were talks of phasing out this API in favour of the Composition API and Vue 3's Options API is build as a layer on top of the Composition API, which makes it a redundant. It is also adviced to use Composition API for more complex apps and apps that use single file components like our projects.

Css

Never scope the styling of a component. Scoped styling will obfuscate the html and remove the possibility to easily override parent styles of an extended component, something we do extensively considering the usage of our kits.