Vue named slots don't work in Markdown

[gorlanova]

Describe the bug

I'm writing documentation for a component library. Some components have slots.

• When it's a default slot, I fill it by simply placing content in <Component> </Component>, it works perfectly, and the slotted content renders in the markdown page.
• When it's a named slot, I have to wrap it in <template #nameoftheslot> </template> as per Vue slot system, and my content is not rendered. When reading Vitepress documentation, I read that <template> is not to be used in the Markdown page, and though I understand the redundance with Vue SFC templates, we need to be able to used named slots to make these kind of component work...

Did I miss something or am I trying to do this the wrong way ?
If not, it would be greatly appreciated to implement named slots in the Markdown pages.

Reproduction

• Use a Vue component in your Markdown page
• This component should have a named slot (eg: <slot name="header"> </slot>)
• Try to pass content to that slot (eg: <template #header> i'm slotted </template>)

=> "i"m slotted" won't be rendered

Expected behavior

Named slots should be parsed and rendered correctly, we should see slotted content passed in a named slot

System Info

System:
    OS: macOS 15.0
    CPU: (8) arm64 Apple M2
    Memory: 357.16 MB / 24.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.2.5 - /usr/local/bin/npm
    pnpm: 8.9.2 - /opt/homebrew/bin/pnpm
  Browsers:
    Safari: 18.0
  npmPackages:
    vitepress: ^1.3.4 => 1.3.4

Additional context

My carousel has no slide rendered

Validations

• Check if you're on the latest VitePress version.
• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[brc-dd]

Seems to work fine - https://stackblitz.com/edit/vite-th6x3s?file=docs/index.md,docs/Foo.vue

Can you share a minimal reproducible example?

[gorlanova]

Oh my, I was using this:

  import { defineClientComponent } from 'vitepress'

  const Foo = defineClientComponent(() => {
    return import('./Foo.vue');
  })

But yeah if I use a classic import it works, and it also works with the <ClientOnly> component wrapping my custom component! I don't remember why I used the other syntax, maybe I tested sth and I actually don't need it anymore...

Though the problem remains: if someone needs to use that syntax AND named slots, it won't work.
Demo: https://stackblitz.com/edit/vite-mn3qjy?file=docs%2Findex.md

But for what I need to do for now, it's all good :)

[brc-dd]

Duplicate of #3867