VitePress Plugin SFC

Documentation | 中文

Allows you to write Vue SFC within Markdown files and render them in VitePress.

Install

npm install -D [email protected]

Configuration

Configure it in .vitepress/config.ts and .vitepress/theme/index.ts:

.vitepress/config.ts

import { defineConfig } from "vitepress";
import { sfcPlugin, sfcVitePlugin } from "vitepress-plugin-sfc";

export default defineConfig({
  markdown: {
    config: (md) => {
      md.use(sfcPlugin);
    },
  },
  vite: {
    plugins: [sfcVitePlugin()],
    ssr: {
      noExternal: ["vitepress-plugin-sfc"],
    },
  },
});

.vitepress/theme/index.ts

import DefaultTheme from "vitepress/theme";
import { enhanceAppWithComponentView } from "vitepress-plugin-sfc/client";
import "vitepress-plugin-sfc/style";

export default {
  extends: DefaultTheme,
  async enhanceApp({ app }) {
    await enhanceAppWithComponentView(app);
  },
};

Usage

Wrap valid Vue SFC content with :::sfc:

:::sfc
<script setup>
import { ref } from "vue"
const msg = ref("");
</script>

<template>
<input v-model="msg" placeholder="Please enter text" />
</template>
:::

MIT