Logo

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

A structured way to provide a logo component accros projects with built in routing and using vue components.

Getting started

<template>
    <div>
        <Logo :visual="IconMagicWand" :to="{ name: 'home' }" />        
    </div>
</template>

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

</script>

Guidelines

• Always extend or wrap the component, provide it with default values, and ensure consistency across the project.

API

Properties

visual

The Vue component to show as a logo when rendered.

Values: Vue Component

Default: IconPlaceholder

visualProps

Object of properties that will be applied to the Visual component when rendered.

Values: Object

Default: {}

to

Url/path string or route object to route to when clicked.

Values: 'url' | Named Route Object

Default: { name: 'home' }

RouterLink

RouterLink instance to override the one used by this component.

Some projects may extend RouterLink to add project specific logic (like tracking). Pass the custom RouterLink component using this attribute so the Logo instance are consistent with the rest of the project.

Values: RouterLink

Default: RouterLink

Slots

logo

Replaces the logo component with the contents of the slot.

Properties

• to: The route passed to the RouterLink.
• routerLink: The RouterLink component in use.
• visual: The visual component passed via the visual prop.
• visualProps: The props passed via the visualProps prop.