Feature request: Vue component source code demo

[liujiayii]

Is your feature request related to a problem? Please describe.

such as a vue components library site…… A common problem for a documentation page is to show how to use a component, both in code and with demo of live component.

Describe the solution you'd like

like this https://github.com/flingyp/vitepress-demo-preview

Describe alternatives you've considered

No response

Additional context

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Read the Contributing Guidelines.
• [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.

[mathiash98]

Vue component preview is already supported by supporting placing Vue code inside markdown.

[liujiayii]

Vue component preview is already supported by supporting placing Vue code inside markdown.

I know that vitepress can display Vue code, but it doesn't have a component that can conveniently display demos.

examples

<code path="./demos/demo1.vue"></code>

demo

demo and Vue code

[mathiash98]

Vue component preview is already supported by supporting placing Vue code inside markdown.

I know that vitepress can display Vue code, but it doesn't have a component that can conveniently display demos.

examples

<code path="./demos/demo1.vue"></code>

demo

demo and Vue code

You can create a custom vue component that takes a filePath as an argument, render the code in a text block and the imports and render the component itself. Or look at the source code for https://github.com/flingyp/vitepress-demo-preview and mimick their implementation (if the license is suitable)

[liujiayii]

Vue component preview is already supported by supporting placing Vue code inside markdown.

I know that vitepress can display Vue code, but it doesn't have a component that can conveniently display demos. examples

<code path="./demos/demo1.vue"></code>

demo

demo and Vue code

You can create a custom vue component that takes a filePath as an argument, render the code in a text block and the imports and render the component itself. Or look at the source code for https://github.com/flingyp/vitepress-demo-preview and mimick their implementation (if the license is suitable)

I think it would be great if vitepress could support <code path="./demos/demo1.vue"></code>

[mathiash98]

@liujiayii Your issue will probably get more traction if you rename it to Feature request: Vue component source code demo. And then update description to:

# Scenario
A common problem for a documentation page is to show how to use a component, both in code and with demo of live component.

But my general comment on this feature request is that users of a Component library is not interested in how the component is implemented, but rather how you use it and what props to pass in. This is not possible to showcase by rendering the source code. One must produce examples manually.