What is the best way to replace a particular component in the default template

[wighawag]

The default template is great but I would like to change the VPHero component so instead of <span>{name}</span> I can put an image (see

vitepress/src/client/theme-default/components/VPHero.vue

Line 30 in f60b32f

<span class="clip">{{ name }}</span>

)

What is the best way to achieve this ?

[wighawag]

Following https://vitepress.dev/guide/extending-default-theme I managed to static content replacing this by using

<template>
	<Layout>
		<template #home-hero-info>
			<h1 class="name">Hello</h1>
			<p v-if="text" class="text">{{ text }}</p>
			<p v-if="tagline" class="tagline">{{ tagline }}</p>
		</template>
	</Layout>
</template>

but dynamic content like {{ text}} is not picked up

anything to declare in the script tag ?

[wighawag]

I managed to get it work using frontmatter.hero.text, etc...

// .vitepress/theme/MyLayout.vue
<script setup>
import DefaultTheme from 'vitepress/theme';
const {Layout} = DefaultTheme;

import {useData} from 'vitepress';
const {frontmatter} = useData();
</script>

<template>
	<Layout>
		<template #home-hero-info>
			<h1 class="name"><img src="/logo.svg" /></h1>
			<p v-if="frontmatter.hero.text" class="text">{{ frontmatter.hero.text }}</p>
			<p v-if="frontmatter.hero.tagline" class="tagline">{{ frontmatter.hero.tagline }}</p>
		</template>
	</Layout>
</template>

I leave the discussion open in case there is a better / more idiomatic way