import code

single file import

input

@[code](../../.vuepress/vue-previews/demo.vue)

output

File not found

vue component import

TIP

By default, the theme registers the .vue components under /.vuepress/vue-previews globally, so the components that need to be previewed should be placed in this directory.

If our documentation 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.

vue component preview

input

@[preview-demo](@/docs/.vuepress/vue-previews/demo.vue)

output

My name is reco.

This is a vue preview demo.

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

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

const { name } = useInfo()
</script>

<style>
.demo-container {
  width: 200px;
}
</style>
export function useInfo() {
  const name = 'reco'

  return { name }
}

The vue group only shows the code group

input

@[preview](@/docs/.vuepress/vue-previews/demo.vue)

output

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

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

const { name } = useInfo()
</script>

<style>
.demo-container {
  width: 200px;
}
</style>
export function useInfo() {
  const name = 'reco'

  return { name }
}