diff --git a/packages/nitro/src/server/dev.ts b/packages/nitro/src/server/dev.ts
index 687a0fff21..0a43cde264 100644
--- a/packages/nitro/src/server/dev.ts
+++ b/packages/nitro/src/server/dev.ts
@@ -4,7 +4,7 @@ import { loading as loadingTemplate } from '@nuxt/design'
import chokidar, { FSWatcher } from 'chokidar'
import debounce from 'debounce'
import { stat } from 'fs-extra'
-import { createApp, Middleware } from 'h3'
+import { createApp, Middleware, useBase } from 'h3'
import { createProxy } from 'http-proxy'
import { listen, Listener, ListenOptions } from 'listhen'
import servePlaceholder from 'serve-placeholder'
@@ -12,6 +12,7 @@ import serveStatic from 'serve-static'
import { resolve } from 'upath'
import type { Server } from 'connect'
import type { NitroContext } from '../context'
+import { handleVfs } from './vfs'
export function createDevServer (nitroContext: NitroContext) {
// Worker
@@ -57,6 +58,9 @@ export function createDevServer (nitroContext: NitroContext) {
app.use(nitroContext._nuxt.publicPath, serveStatic(resolve(nitroContext._nuxt.buildDir, 'dist/client')))
app.use(nitroContext._nuxt.routerBase, serveStatic(resolve(nitroContext._nuxt.publicDir)))
+ // debugging endpoint to view vfs
+ app.use('/_vfs', useBase('/_vfs', handleVfs(nitroContext)))
+
// Dynamic Middlwware
const legacyMiddleware = createDynamicMiddleware()
const devMiddleware = createDynamicMiddleware()
diff --git a/packages/nitro/src/server/vfs.ts b/packages/nitro/src/server/vfs.ts
new file mode 100644
index 0000000000..3dcfc14669
--- /dev/null
+++ b/packages/nitro/src/server/vfs.ts
@@ -0,0 +1,53 @@
+import { createError, Handle } from 'h3'
+import { NitroContext } from '..'
+
+export function handleVfs (ctx: NitroContext): Handle {
+ return (req) => {
+ if (req.url === '/') {
+ return ''
+ }
+ const param = decodeURIComponent(req.url.slice(1))
+ if (param in ctx.vfs) {
+ return editorTemplate({
+ readOnly: true,
+ language: param.endsWith('html') ? 'html' : 'javascript',
+ theme: 'vs-dark',
+ value: ctx.vfs[param]
+ })
+ }
+ return createError({ message: 'File not found', statusCode: 404 })
+ }
+}
+
+const monacoVersion = '0.20.0'
+const monacoUrl = `https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/${monacoVersion}/min`
+const vsUrl = `${monacoUrl}/vs`
+
+const editorTemplate = (options: Record) => `
+
+
+
+
+
+
+
+
+
+
+
+`