Vuepress: Using Vue components with slot in Markdown files.

[Buydens]

• [x] I confirm that this is an issue rather than a question.

Bug report

Steps to reproduce

Create a component "MyComponent" under .vuepress/components like so:

<template>
  <div>
    <slot>
      <p>Text that shows if no text is given.</p>
    </slot>
  </div>
</template>

What is expected?

That when the component is used in a .md file as such:

### Description 

< MyComponent >
    <p>My text for in this component.</p>
</MyComponent >

The text _"My text for in this component"_ is rendered as a p tag.

What is actually happening?

The text is rendered as a code tag:
<code>And if it's not empty...</code>

Other relevant information

Not sure what extra information I can provide.
I set up the project using $ yarn create vuepress [appName] and selected the Doc preset.
Let me know if there is any additional information that can help.

[ludanxer]

The project created by yarn create vuepress has the version 1.1.0 if I remember correctly.

Can you upgrade it to 1.2.0 and give it a go again?

[Buydens]

Hey,

Upgraded, but it didn't seem to do the trick.
From vuepress info:

npmPackages:
    @vuepress/core:  1.2.0 
    @vuepress/theme-default:  1.2.0 
    vuepress: ^1.2.0 => 1.2.0 

Still renders the slot as a code tag.

[Buydens]

Hello,

I started a new project, this time not using yarn create vuepress .
Now it looks to work just fine. However I cannot identify what went wrong in the earlier project on which I based this topic.

[ozguruysal]

I face the same issue too and noticed that it happens only when you use four-space indentation.

No indentation or 2-space indentation or wrapping the component in a div tag seems to work fine.

Using version 1.2.0.

4-space indentation doesn't work

<!-- 4 space indentation -->
<MyComponent >
    <p>Hello World</p>
</MyComponent >

<!-- output -->
<div>
  <pre><code>&lt;p&gt;Hello World&lt;/p&gt;</code></pre>
</div>

2-space indentation works

<!-- 2 space indentation -->
<MyComponent >
  <p>Hello World</p>
</MyComponent >

<!-- output  -->
<div><p>Hello World</p></div>

Wrapping the component in a div tag works regardless of the indentation used

<!-- Any indentation worls when the component is wrapped in a div tag -->
<div>
<MyComponent >
    <p>Hello World</p>
</MyComponent >
</div>

<!-- output -->
<div><p>Hello World</p></div>

[Buydens]

hey @ozguruysal ,

Thanks, this helps a lot.
The double indent doesn't work for me, it gives the same issue:
`rrors compiling template:

tag

has no matching end tag.

3 |

Test

4 |

# Secundair

5 | < MyComponent >
|
6 |

Plop
| ^^^
7 |

`

[ozguruysal]

@Buydens I'm just getting faimilar with VuePress and noticed that it's possible to use Markdown syntax inside components. Maybe you already know that. For example:

// Inside a markdown file

<my-component>

## An H2 Title   // output --> <h2>An H2 Title</h2>
Hello World      // output --> <p>Hello World</p>

</my-component>

Just notice the empty lines after the opening and before the closing tags. So I think it's best and logical to avoid HTML tags in a markdown file and if you nest components, use no indentation.

[ludanxer]

Hi @Buydens , is this problem still bothering you?

I can re-create your problem when I add 4 spaces and an empty line

<MyComponent>

    <p>My text for in this component.</p>
</MyComponent>

and as @ozguruysal says, it's possible to use MarkDown syntax inside components, so that code above will be treated as a code block.

If this helps you, can you help close this issue? If not, can you share your repo that still has the problem?

[Buydens]

Hello @ludanxer and @ozguruysal ,

Thank you both for the insight.

Using the MarkDown helps, feels a bit like a bandaid instead of a cure, but it does the job.