Vue Component Preview



By default, the theme registers the .vue component under / .vuepress/vue- previews globally, so the components that need to be previewed should be placed in this directory. Note:-``_ is not allowed in the file name.

If our project is stored in a subdirectory of the project, such as the / docs folder, we need to set themeConfig.vuePreviewsDir to. / docs/.vuepress/vue- previews.




My name is reco.

This is a vue preview demo.

  <div class="demo-container">
    <h3 style="widht">My name is {{name}}.</h3>
    <p>This is a vue preview demo.</p>

<script setup lang="ts">
import { useInfo } from "./demo.ts";

const { name } = useInfo()

.demo-container {
  width: 300px;
export function useInfo() {
  const name = 'reco'

  return { name }
Last Updated 9/23/2023, 6:53:30 PM