How can I send props to an slotted component?

[isorna]

Hi there, I've been testing vitepress for a time, and I decided to add a custom breadcrumbs component to my doc pages:

<template>
  <div class="bread-crumbs">
    <span v-for="(crumb, index) in breadCrumbs" :key="crumb.path">
      <a
        class="bread-crumb"
        :href="crumb.path"
        :class="{ 'bread-crumb-nolink': crumb.path === '' }">{{ crumb.text }}</a>
      <span v-if="index !== breadCrumbs.length - 1" class="bread-crumb-separator">&nbsp;&gt;&nbsp;</span>
    </span>
  </div>
</template>

<script setup>
const props = defineProps(['breadCrumbs'])
</script>

Then I added the component to the layout slot as documented:

  Layout() {
    return h(Theme.Layout, null, {
      'doc-before': () => h(BreadCrumbs),
    })
  },

But I need to send the prop to the slotted component, so I tried 'doc-before': () => h(BreadCrumbs, { 'breadCrumbs': breadCrumbs }) as documented on render method by vue, but as it's invoked on the theme setup() the breadcrumbs doesn't reflect the current page path... I've searched how to make this possible, getting current page path and sending to the breadcrumbs component without having to copy the following code to each .md page:

<script setup>
  import { toRaw } from 'vue'
  import { useData } from 'vitepress'
  import BreadCrumbs from '../.vitepress/components/BreadCrumbs.vue'
  const { frontmatter } = useData()
  const breadCrumbs = toRaw(frontmatter.value).breadcrumbs
</script>

<BreadCrumbs :breadCrumbs="breadCrumbs"></BreadCrumbs>

I wanted to send the breadCrumbs prop from outside, that way the component will be agnostic to its context and could be unit-tested without a dependency on the whole page. May anyone please help me?

Regards

[brc-dd]

Create a Layout.vue file:

<script setup lang="ts">
import DefaultTheme from 'vitepress/theme';
import BreadCrumbs from './BreadCrumbs.vue';
</script>

<template>
  <DefaultTheme.Layout>
    <template #doc-before>
      <BreadCrumbs :breadCrumbs="$frontmatter.breadcrumbs" />
    </template>
  </DefaultTheme.Layout>
</template>

Then use it your theme:

// .vitepress/theme/index.ts

import DefaultTheme from 'vitepress/theme';
import Layout from '../components/Layout.vue';

export default {
  ...DefaultTheme,
  Layout,
};

[isorna]

Thank you very much Divyansh, I tried a similar solution but I used "CustomLayout.vue" instead of "Layout.vue", seems that it needs to be that exact name in order to be processed with the md files.

Id like to ask about the $frontmatter variable use on your example, I'm using latest version (alpha 48) and TS lint failed so I had to change to this:

<script setup lang="ts">
import DefaultTheme from 'vitepress/theme';
import BreadCrumbs from './BreadCrumbs.vue';
import { useData } from 'vitepress'
const { frontmatter } = useData()
</script>

<template>
  <DefaultTheme.Layout>
    <template #doc-before>
      <BreadCrumbs :breadCrumbs="frontmatter.breadcrumbs" />
    </template>
  </DefaultTheme.Layout>
</template>

Because TS linter says Property '$frontmatter' does not exist on type, do I have to declare it somewhere else? I thought it was on by default on standard vitepress.

[brc-dd]

I tried a similar solution but I used "CustomLayout.vue" instead of "Layout.vue", seems that it needs to be that exact name in order to be processed with the md files.

Not exactly. You need to export Layout from theme/index file.

So if you've import Foo from 'path/to/foo' then you need to do export { ...DefaultTheme, Layout: Foo }. Docs: https://vitepress.vuejs.org/guide/customization-intro#layout-slots

Because TS linter says Property '$frontmatter' does not exist on type, do I have to declare it somewhere else? I thought it was on by default on standard vitepress.

Yeah, it isn't declared globally IG. The way you're doing is fine too. That $frontmatter thing is mainly there for markdown files where you don't want to import useData, etc.

[isorna]

Understood, amazing response! Thank you very much again.
Regards

[Alexufo]

@brc-dd will this work on pages with Dynamic Routes? I get empty frontmatter.value

[brc-dd]

You don't need props. You can use useRoute (but don't destructure it, otherwise it will lose reactivity; you can't use window.location.pathname because browser APIs are not available during SSR). OPs original version had props passed to it, that's why they were in my example. It will solely depend on your need and how you've implemented your component. If your implementation doesn't need props, you don't need props.

[Alexufo]

Thanks. SSR works for the navigation chain, but when I navigate without refreshing the page the breadcrumbs don't change. Should I add logic to hide the extra chains?

[brc-dd]

You probably are doing something wrong which is causing the reactivity to be lost. Can you show the relevant code?

[Alexufo]

Yeah. I'm missing something.

import { useRoute } from 'vitepress'
const { path } = useRoute()

const cleanPath = path.replace(/\/$/g, '').replace(/^\//g, "")
const paths = cleanPath.split('/')

function genUrl(index) {
  return "/" + paths.slice(0, (paths.length - (paths.length - index)) + 1).join("/") + "/"
}

const items = paths.map((el, index) => ({
  url: genUrl(index),
  index,
  text: el
}));
</script>

<template>
  <div class="breadcrumbs">
    <span v-for="(item, index) in items" :key="item.index">
      <a class="breadcrumb" :href="item.url">{{ item.text }}</a>
      <span class="bread-crumb-separator">&nbsp;/&nbsp;</span>
    </span>
  </div>
</template>

[brc-dd]

Like I said earlier const { path } = useRoute() won't work. You'll need to do something like:

const route = useRoute()

const items = computed(() => {
  const cleanPath = route.path.replace(/\/$/g, '').replace(/^\//g, "")
  const paths = cleanPath.split('/')
  
  function genUrl(index) {
    return "/" + paths.slice(0, (paths.length - (paths.length - index)) + 1).join("/") + "/"
  }

  return paths.map((el, index) => ({
    url: genUrl(index),
    index,
    text: el
  }))
})