it works!

lib/app/index.js

@@ -1,7 +1,17 @@
-import { createApp, ref, provide, h } from 'vue'
+import {
+  createApp,
+  ref,
+  h,
+  provide,
+  inject,
+  watchEffect,
+  shallowRef
+} from 'vue'
 import { Layout } from '/@theme/index.js'
 
-const app = createApp({
+const PathSymbol = Symbol()
+
+const App = {
   setup() {
     const path = ref(window.location.pathname)
 
@@ -14,10 +24,42 @@ const app = createApp({
     //   }
     // })
 
-    provide('vitepress:path', path)
+    provide(PathSymbol, path)
 
     return () => h(Layout)
   }
+}
+
+const Default404 = () => '404 Not Found'
+
+const Content = {
+  setup() {
+    const path = inject(PathSymbol)
+    const comp = shallowRef()
+
+    watchEffect(() => {
+      let pagePath = path.value.replace(/\.html$/, '')
+      if (pagePath.endsWith('/')) {
+        pagePath += 'index.md'
+      } else {
+        pagePath += '.md'
+      }
+
+      import(pagePath)
+        .then((m) => {
+          comp.value = m.default
         })
+        .catch(err => {
+          comp.value = Default404
+        })
+    })
+
+    return () => (comp.value ? h(comp.value) : null)
+  }
+}
+
+const app = createApp(App)
+
+app.component('Content', Content)
 
 app.mount('#app')

lib/markdown.ts

@@ -0,0 +1,3 @@
+export function markdownToVue(content: string): string {
+  return `<template>${content}</template>`
+}

lib/server.ts

@@ -1,10 +1,12 @@
 import path from 'path'
+import { promises  as fs } from 'fs'
 import {
   createServer as createViteServer,
   cachedRead,
   Plugin,
   Resolver
 } from 'vite'
+import { markdownToVue } from './markdown'
 
 const debug = require('debug')('vitepress')
 
@@ -32,34 +34,46 @@ const VitePressResolver: Resolver = {
   }
 }
 
-const VitePressPlugin: Plugin = ({ app, root, watcher }) => {
+const VitePressPlugin: Plugin = ({ app, root, watcher, resolver }) => {
   // watch theme files if it's outside of project root
   if (path.relative(root, themePath).startsWith('..')) {
     debug(`watching theme dir outside of project root: ${themePath}`)
     watcher.add(themePath)
   }
 
+  // hot reload .md files as .vue files
+  watcher.on('change', async (file) => {
+    if (file.endsWith('.md')) {
+      const content = await fs.readFile(file, 'utf-8')
+      watcher.handleVueReload(file, Date.now(), markdownToVue(content))
+    }
+  })
+
   app.use(async (ctx, next) => {
+    if (ctx.path.endsWith('.md')) {
+      await cachedRead(ctx, resolver.publicToFile(ctx.path))
+      // let vite know this is supposed to be treated as vue file
+      ctx.vue = true
+      ctx.body = markdownToVue(ctx.body)
+      debug(`serving ${ctx.url}`)
+      return next()
+    }
+
     // detect and serve vitepress files
     const file = VitePressResolver.publicToFile(ctx.path, root)
     if (file) {
       ctx.type = path.extname(file)
-      ctx.body = await cachedRead(file)
+      await cachedRead(ctx, file)
 
       debug(`serving file: ${ctx.url}`)
       return next()
     }
 
-    if (ctx.path.endsWith('.md')) {
-      debug(`serving .md: ${ctx.path}`)
-    }
-
     await next()
 
     // serve our index.html after vite history fallback
     if (ctx.url === '/index.html') {
-      ctx.type = 'text/html'
+      await cachedRead(ctx, path.join(appPath, 'index-dev.html'))
-      ctx.body = await cachedRead(path.join(appPath, 'index-dev.html'))
     }
   })
 }

lib/theme-default/Layout.vue

@@ -1,3 +1,11 @@
 <template>
-hello world
+  <div class="theme-container">
+    <Content/>
+  </div>
 </template>
+
+<style>
+.theme-container {
+  font-family: Arial, Helvetica, sans-serif;
+}
+</style>