antfu / vite-plugin-md

Markdown with Vue for Vite
MIT License
605 stars 89 forks source link

Using named slots in markdown files #134

Open marguerrrite opened 1 year ago

marguerrrite commented 1 year ago

To get component slots to render correctly, this issue references putting a full return between brackets:

I found the solution for this, you need an extra line between them

# Title
Paragraph Text

<MyComponent>

Is it possible to **parse** markdown and pass it to a slot?

</MyComponent>

Is there a trick in getting named slots to work? To do something like the following:

<MyComponent>

    <template #header>
        My title
    </template>
    <template #card>
        My other slot
    </template>

</MyComponent>

As soon as I introduce the #, I get this parsing error (regardless of full returns):

[plugin:vite:vue] Element is missing end tag.
DjilanoS commented 1 year ago

MyComponent.vue

<div>
    <header>
        <slot name="header"/>
    </header>

    <div class="card">
        <slot name="card" />
    </div>
</div>

Inside the .MD file

<MyComponent>
    <template v-slot:header>My header</template>
    <template v-slot:card>My card</template>
</MyComponent>

Hope this helps @margueriteroth

modelair commented 1 year ago

i have same issue

@DjilanoS not works

modelair commented 1 year ago

@margueriteroth did u found a solution?