how can I dynamically reder some md content into cusomer theme (vue template)

[lucky-yang]

in one .vue file(component) of the theme, I just want to dynamically render some md content as below in to the .vue template

md content:

::: slot aaa
# Here is slot aaa
:::
- A Paragraph
- Another Paragraph
::: slot bbb
Here is slot bbb
:::

and vue theme template is like this:

<template>
  <div class="theme-container">
    <Content slot-key="aaa" />
   <br/>=============
    <Content />
   <br/>=============
    <Content slot-key="bbb" />
    <br />
  </div>
</template>

And the md content I can get it from some back-end api, I want to dynamically render it in the page, how can I do it.

Many thanks.

[fvanwijk]

In reply to https://github.com/vuejs/vuepress/issues/2353#issuecomment-621789396

I'm sorry I can't help you. I never tried this with Vuepress, but I know it works in Gridsome:

// index.md
import 'MyComponent' from './my-component.vue';

Lorem ipsum

<my-component>
  <template #top>
    Content used in slot
  </template>
</my-component>

More lorem ipsum

// my-component.vue
<template>
  <div class="theme-container">
      <slot name="top" />
      <div>Rest of the template</div>
  </div>
</template>

The markdown page will render as:

<p>Lorem ipsum</p>

<div class="theme-container">
  Content used in slot
  <div>Rest of the template</div>
</div>

<p>More lorem ipsum</p>

[lucky-yang]

In reply to #2353 (comment)

I'm sorry I can't help you. I never tried this with Vuepress, but I know it works in Gridsome:

// index.md
import 'MyComponent' from './my-component.vue';

Lorem ipsum

<my-component>
  <template #top>
    Content used in slot
  </template>
</my-component>

More lorem ipsum

// my-component.vue
<template>
  <div class="theme-container">
      <slot name="top" />
      <div>Rest of the template</div>
  </div>
</template>

The markdown page will render as:

<p>Lorem ipsum</p>

<div class="theme-container">
  Content used in slot
  <div>Rest of the template</div>
</div>

<p>More lorem ipsum</p>

Hi dear friend,

is there anyway I can use the vuepress markdown instance to do something in my code(I mean in my .vue file in my vuepress project)

I just want to use vuepress's markdown instance to dynamically generate some content.

many thanks.

[Mister-Hope]

Vuepress isn't providing this function, since it's not bundling any markdown-it related files to the build result. If you really want this feature, you can fork this project and look through @vuepress/markdown folder, and make a plugin with markdown-it instance ejected to Vue instance. Then make a v-html render.

[ulivz]

You can create dynamic page with additionalPages.

[Mister-Hope]

You can create dynamic page with additionalPages.

It seems that he wants to render markdown content in browser runtime @ulivz How can additional pages do that

Glad you are back, but watch more carefully please

[ulivz]

@Mister-Hope

Hmmm, since the md content he can get it from some back-end api, why this request should be ONLY occurred under runtime? watch more carefully please?

[Mister-Hope]

@Mister-Hope

Hmmm, since the md content he can get it from some back-end api, why this request should be ONLY occurred under runtime? watch more carefully please?

Emmm, fine. Let's wait him reply @lucky-yang

Besides, I am sure that I have seen issues about runtime render

[ulivz]

So, is it in this issue？

[Mister-Hope]

。🙃

By the way, what's the next step? Vuepress V2 with Vue3 or just some bug fix and use vitepress?