diff --git a/package.json b/package.json
index 3673137ff..34cefe7fd 100755
--- a/package.json
+++ b/package.json
@@ -75,6 +75,7 @@
     "defu": "^5.0.0",
     "detab": "^3.0.0",
     "directory-tree": "^2.2.9",
+    "fast-glob": "^3.2.6",
     "flat": "^5.0.2",
     "graceful-fs": "^4.2.6",
     "gray-matter": "^4.0.3",
@@ -90,7 +91,7 @@
     "nuxt-extend": "^0.1.0",
     "nuxt-i18n": "^6.27.2",
     "nuxt-vite": "^0.1.1",
-    "nuxt-windicss": "1.1.3",
+    "nuxt-windicss": "^1.1.3",
     "ohmyfetch": "^0.1.8",
     "plausible-tracker": "^0.3.1",
     "prism-theme-vars": "^0.2.2",
@@ -121,7 +122,8 @@
     "vue-docgen-api": "^4.40.0",
     "vue-plausible": "^1.1.4",
     "vue3": "npm:vue@next",
-    "vue3-router": "npm:vue-router@next"
+    "vue3-router": "npm:vue-router@next",
+    "windicss-analysis": "^0.3.4"
   },
   "devDependencies": {
     "@iconify/json": "^1.1.372",
diff --git a/src/admin/api/functions/components.ts b/src/admin/api/functions/components.ts
new file mode 100644
index 000000000..29fd4dce2
--- /dev/null
+++ b/src/admin/api/functions/components.ts
@@ -0,0 +1,65 @@
+import { promises as fs } from 'fs'
+import { join, extname } from 'path'
+import { createError, Middleware, useBody } from 'h3'
+import dirTree from 'directory-tree'
+import { FileData, File } from '../../type'
+import { normalizeFiles, r } from '../utils'
+
+export default <Middleware>async function componentsHandler(req) {
+  const url = req.url
+
+  if (req.method === 'GET') {
+    // List all files in components/
+    if (url === '/') {
+      const tree = dirTree(r('components'))
+      return normalizeFiles(tree.children, r('components'))
+    }
+    // Read a single content file
+    try {
+      const path = join(r('components'), url)
+      const file = await fs.readFile(path, 'utf-8')
+
+      return <File>{
+        path: path.replace(r('components'), ''),
+        extension: extname(path),
+        raw: file
+      }
+    } catch (err) {
+      return createError({
+        statusCode: 404,
+        statusMessage: 'File not found'
+      })
+    }
+  }
+
+  // Update changes
+  if (req.method === 'PUT') {
+    const { raw } = await useBody<FileData>(req)
+    if (raw == null) {
+      return createError({
+        statusCode: 400,
+        statusMessage: '"raw" key is required'
+      })
+    }
+
+    const path = join(r('components'), url)
+
+    try {
+      // @ts-ignore
+      // await fs.stat(path, 'utf-8')
+      await fs.writeFile(path, raw)
+
+      return { ok: true }
+    } catch (err) {
+      return createError({
+        statusCode: 404,
+        statusMessage: 'File not found'
+      })
+    }
+  }
+
+  return createError({
+    statusCode: 400,
+    statusMessage: 'Bad Request'
+  })
+}
diff --git a/src/admin/api/functions/config.ts b/src/admin/api/functions/config.ts
new file mode 100644
index 000000000..1f3853aca
--- /dev/null
+++ b/src/admin/api/functions/config.ts
@@ -0,0 +1,49 @@
+import { parse } from 'path'
+import fs from 'fs-extra'
+import { createError, Middleware, useBody } from 'h3'
+import { FileData } from '../../type'
+import { r } from '../utils'
+
+export default <Middleware>async function configHandler(req) {
+  const root = r()
+  let path = [r('nuxt.config.ts'), r('nuxt.config.js')].find(i => fs.existsSync(i))
+  const exist = Boolean(path)
+  path = path || r('nuxt.config.ts')
+
+  if (req.method === 'GET') {
+    // Get config file
+    return {
+      path: path.replace(root, ''),
+      exist,
+      extension: parse(path).ext,
+      raw: exist ? await fs.readFile(path, 'utf-8') : ''
+    }
+  }
+
+  // Update config
+  if (req.method === 'PUT') {
+    const { raw } = await useBody<FileData>(req)
+    if (raw == null) {
+      return createError({
+        statusCode: 400,
+        statusMessage: '"raw" key is required'
+      })
+    }
+
+    try {
+      await fs.writeFile(path, raw)
+
+      return { ok: true }
+    } catch (err) {
+      return createError({
+        statusCode: 404,
+        statusMessage: 'File not found'
+      })
+    }
+  }
+
+  return createError({
+    statusCode: 400,
+    statusMessage: 'Bad Request'
+  })
+}
diff --git a/src/admin/api/index.ts b/src/admin/api/index.ts
index 830173ecf..ea6defa51 100644
--- a/src/admin/api/index.ts
+++ b/src/admin/api/index.ts
@@ -2,11 +2,15 @@ import { createApp } from 'h3'
 import contentHandler from './functions/content'
 import previewHandler from './functions/preview'
 import staticHandler from './functions/static'
+import componentsHandler from './functions/components'
+import configHandler from './functions/config'
 
 const app = createApp()
 
 app.useAsync('/content', contentHandler)
 app.useAsync('/preview', previewHandler)
 app.useAsync('/static', staticHandler)
+app.useAsync('/components', componentsHandler)
+app.useAsync('/config', configHandler)
 
 export default app._handle
diff --git a/src/admin/app/components/AppHeaderNav.vue b/src/admin/app/components/AppHeaderNav.vue
index a63fd1c84..6b031b988 100644
--- a/src/admin/app/components/AppHeaderNav.vue
+++ b/src/admin/app/components/AppHeaderNav.vue
@@ -9,11 +9,35 @@
     <RouterLink
       to="/static"
       class="relative flex-none px-4 py-1 text-sm font-medium leading-5 d-border border rounded-md"
-      :class="[$route.path.includes('static') ? 'router-link-active' : '']"
+      :class="[$route.path.startsWith('/static') ? 'router-link-active' : '']"
     >
       Static
     </RouterLink>
 
+    <RouterLink
+      to="/components"
+      class="relative flex-none px-4 py-1 text-sm font-medium leading-5 d-border border rounded-md"
+      :class="[$route.path.startsWith('/components') ? 'router-link-active' : '']"
+    >
+      Components
+    </RouterLink>
+
+    <RouterLink
+      to="/config"
+      class="relative flex-none px-4 py-1 text-sm font-medium leading-5 d-border border rounded-md"
+      :class="[$route.path.startsWith('/config') ? 'router-link-active' : '']"
+    >
+      Config
+    </RouterLink>
+
+    <RouterLink
+      to="/windicss"
+      class="relative flex-none px-4 py-1 text-sm font-medium leading-5 d-border border rounded-md"
+      :class="[$route.path.startsWith('/windicss') ? 'router-link-active' : '']"
+    >
+      Windi Analyzer
+    </RouterLink>
+
     <div class="flex-auto"></div>
 
     <button class="p-1 opacity-50 hover:opacity-100 !outline-none" @click="toggleDark">
diff --git a/src/admin/app/components/Editor.vue b/src/admin/app/components/Editor.vue
index 447fdfdeb..ea8ed4649 100644
--- a/src/admin/app/components/Editor.vue
+++ b/src/admin/app/components/Editor.vue
@@ -1,10 +1,10 @@
 <template>
-  <Monaco :value="raw" language="markdown" @change="update" />
+  <Monaco :value="raw" :language="language" @change="update" />
 </template>
 
 <script setup lang="ts">
 import type { PropType } from 'vue3'
-import { ref, watch, defineProps } from 'vue3'
+import { ref, watch, defineProps, computed } from 'vue3'
 import type { File } from '../../type'
 import { useApi } from '../plugins/api'
 import Monaco from './Monaco.vue'
@@ -13,12 +13,23 @@ const props = defineProps({
   file: {
     type: Object as PropType<File>,
     required: true
+  },
+  apiEntry: {
+    type: String,
+    default: '/content'
   }
 })
 
 const api = useApi()
 const raw = ref(props.file.raw)
 
+const language = computed(() => {
+  if (props.file.extension === '.vue') return 'html'
+  if (props.file.extension === '.ts') return 'javascript'
+  if (props.file.extension === '.js') return 'javascript'
+  return 'markdown'
+})
+
 // Sync local data when file changes
 watch(
   () => props.file,
@@ -28,7 +39,7 @@ watch(
 )
 
 function update(content) {
-  api.put(`/content${props.file.path}`, {
+  api.put(props.apiEntry + props.file.path, {
     raw: content
   })
 }
diff --git a/src/admin/app/components/Preview.vue b/src/admin/app/components/Preview.vue
index e9db26e71..4dd905df8 100644
--- a/src/admin/app/components/Preview.vue
+++ b/src/admin/app/components/Preview.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onBeforeMount, ref, watch } from 'vue3'
+import { onPreviewNavigated } from '../composables/content'
 import { fetchPreviewOrigin, previewOrigin, previewUrl, previewPath } from '../composables/preview'
 
 const iframe = ref<HTMLIFrameElement>()
@@ -18,9 +19,10 @@ watch(
 
 function updateIframe(url: string) {
   if (!iframe.value) return
-  if (!url.startsWith(previewOrigin.value)) return updateIframeHard(url)
+  if (!url.startsWith(previewOrigin.value) || previewPath.value.startsWith('/admin')) return updateIframeHard(url)
 
   try {
+    // use nuxt router
     iframe.value.contentWindow.$nuxt.$router.push(previewPath.value)
   } catch (e) {
     // fallback to hard refresh when working with cross-origin
@@ -41,6 +43,18 @@ function onUrlInput() {
 
   updateIframe(url.value)
 }
+
+function onIframeLoad() {
+  try {
+    iframe.value.contentWindow.$nuxt.$router.afterEach(to => {
+      previewPath.value = to.path
+      onPreviewNavigated(to.path)
+    })
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.warn(e)
+  }
+}
 </script>
 
 <template>
@@ -58,6 +72,6 @@ function onUrlInput() {
         <heroicons-outline:external-link class="m-auto" />
       </a>
     </div>
-    <iframe ref="iframe" :src="previewOrigin" class="w-full h-full" />
+    <iframe ref="iframe" :src="previewOrigin" class="w-full h-full" @load="onIframeLoad" />
   </div>
 </template>
diff --git a/src/admin/app/composables/content.ts b/src/admin/app/composables/content.ts
new file mode 100644
index 000000000..07018d9ac
--- /dev/null
+++ b/src/admin/app/composables/content.ts
@@ -0,0 +1,37 @@
+import { ref } from 'vue3'
+import { useApi } from '../plugins/api'
+import { File } from '../../type'
+import { getRoutePath, navigateToFile } from './preview'
+
+const api = useApi()
+
+export const files = ref<File[]>([])
+export const currentFile = ref(null)
+
+export const openFile = async (file: File) => {
+  if (currentFile.value?.path === file.path) return
+
+  navigateToFile(file.path)
+  currentFile.value = await api.get(`/content${file.path}`)
+}
+
+export async function fetchFiles() {
+  files.value = await api.get('/content')
+}
+
+export function findFileFromRoute(routePath: string, fileList: File[] = files.value) {
+  for (const file of fileList) {
+    if (getRoutePath(file.path) === routePath) {
+      return file
+    }
+    if (file.children) {
+      const result = findFileFromRoute(routePath, file.children)
+      if (result) return result
+    }
+  }
+}
+
+export function onPreviewNavigated(routePath: string) {
+  const file = findFileFromRoute(routePath)
+  if (file) openFile(file)
+}
diff --git a/src/admin/app/composables/monaco.ts b/src/admin/app/composables/monaco.ts
index cc5aa20ce..d4c58681b 100644
--- a/src/admin/app/composables/monaco.ts
+++ b/src/admin/app/composables/monaco.ts
@@ -41,7 +41,8 @@ const setupMonaco = createSingletonPromise(async () => {
         getWorker(_: any, label: string) {
           if (label === 'json') return new JsonWorker()
           if (label === 'css' || label === 'scss' || label === 'less') return new CssWorker()
-          if (label === 'html' || label === 'handlebars' || label === 'razor') return new HtmlWorker()
+          if (label === 'html' || label === 'handlebars' || label === 'razor' || label === 'vue')
+            return new HtmlWorker()
           if (label === 'typescript' || label === 'javascript') return new TsWorker()
           return new EditorWorker()
         }
@@ -110,10 +111,8 @@ export function useMonaco(
 
         isSetup.value = true
 
-        // const plugins = editorPlugins.filter(({ language }) => language === options.language)
         editor.getModel()?.onDidChangeContent(() => {
           options.onChanged?.(editor.getValue())
-          // plugins.forEach(({ onContentChanged }) => onContentChanged(editor))
         })
       },
       {
diff --git a/src/admin/app/composables/preview.ts b/src/admin/app/composables/preview.ts
index b4e622c57..1d0cad012 100644
--- a/src/admin/app/composables/preview.ts
+++ b/src/admin/app/composables/preview.ts
@@ -13,9 +13,13 @@ export async function fetchPreviewOrigin() {
   previewOrigin.value = url
 }
 
-export function navigateToFile(filepath: string) {
-  previewPath.value = filepath
-    .replace(/\/\d+\./g, '/')
+export function getRoutePath(filepath: string) {
+  return filepath
+    .replace(/\/\d+\./g, '/') // remove digit index
     .replace(/\.md$/, '')
     .replace(/\/index$/, '/')
 }
+
+export function navigateToFile(filepath: string) {
+  previewPath.value = getRoutePath(filepath)
+}
diff --git a/src/admin/app/pages/components.vue b/src/admin/app/pages/components.vue
new file mode 100644
index 000000000..3a71c9e8c
--- /dev/null
+++ b/src/admin/app/pages/components.vue
@@ -0,0 +1,42 @@
+<template>
+  <Splitpanes class="h-full default-theme" :push-other-panes="false">
+    <Pane size="15" max-size="30">
+      <div class="h-full overflow-y-scroll">
+        <FilesTree :files="files" :current-file="currentFile" @open="openFile" />
+      </div>
+    </Pane>
+    <Pane>
+      <Editor v-if="currentFile" :file="currentFile" api-entry="/components" />
+      <p v-else class="p-4 opacity-75">👈 &nbsp;Select a file to edit.</p>
+    </Pane>
+    <Pane>
+      <KeepAlive>
+        <Preview />
+      </KeepAlive>
+    </Pane>
+  </Splitpanes>
+</template>
+
+<script setup lang="ts">
+import { Splitpanes, Pane } from 'splitpanes'
+import { ref, onMounted } from 'vue3'
+import FilesTree from '../components/FilesTree.vue'
+import Editor from '../components/Editor.vue'
+import Preview from '../components/Preview.vue'
+import { useApi } from '../plugins/api'
+import { navigateToFile } from '../composables/preview'
+
+const api = useApi()
+
+const files = ref([])
+const currentFile = ref(null)
+
+const openFile = async file => {
+  navigateToFile(`/__components${file.path}`)
+  currentFile.value = await api.get(`/components${file.path}`)
+}
+
+onMounted(async () => {
+  files.value = await api.get('/components')
+})
+</script>
diff --git a/src/admin/app/pages/config.vue b/src/admin/app/pages/config.vue
new file mode 100644
index 000000000..94123d7dc
--- /dev/null
+++ b/src/admin/app/pages/config.vue
@@ -0,0 +1,32 @@
+<template>
+  <Splitpanes class="h-full default-theme" :push-other-panes="false">
+    <Pane>
+      <Editor v-if="currentFile" :file="currentFile" api-entry="/config" />
+      <p v-else class="p-4 opacity-75">👈 &nbsp;Select a file to edit.</p>
+    </Pane>
+    <Pane>
+      <KeepAlive>
+        <Preview />
+      </KeepAlive>
+    </Pane>
+  </Splitpanes>
+</template>
+
+<script setup lang="ts">
+import { Splitpanes, Pane } from 'splitpanes'
+import { ref, onMounted } from 'vue3'
+import Editor from '../components/Editor.vue'
+import Preview from '../components/Preview.vue'
+import { useApi } from '../plugins/api'
+
+const api = useApi()
+const currentFile = ref(null)
+
+const openFile = async () => {
+  currentFile.value = await api.get('/config')
+}
+
+onMounted(() => {
+  openFile()
+})
+</script>
diff --git a/src/admin/app/pages/index.vue b/src/admin/app/pages/index.vue
index 945b77d14..f75111685 100644
--- a/src/admin/app/pages/index.vue
+++ b/src/admin/app/pages/index.vue
@@ -19,25 +19,14 @@
 
 <script setup lang="ts">
 import { Splitpanes, Pane } from 'splitpanes'
-import { ref, onMounted } from 'vue3'
+import { onMounted } from 'vue3'
 import FilesTree from '../components/FilesTree.vue'
 import Editor from '../components/Editor.vue'
 import Preview from '../components/Preview.vue'
-import { useApi } from '../plugins/api'
-import { navigateToFile } from '../composables/preview'
-
-const api = useApi()
-
-const files = ref([])
-const currentFile = ref(null)
-
-const openFile = async file => {
-  navigateToFile(file.path)
-  currentFile.value = await api.get(`/content${file.path}`)
-}
+import { files, fetchFiles, currentFile, openFile } from '../composables/content'
 
 onMounted(async () => {
-  files.value = await api.get('/content')
+  await fetchFiles()
 
   if (!currentFile.value) {
     const indexFile = files.value.find(file => file.path === '/index.md')
diff --git a/src/admin/app/pages/windicss.vue b/src/admin/app/pages/windicss.vue
new file mode 100644
index 000000000..80d0aa414
--- /dev/null
+++ b/src/admin/app/pages/windicss.vue
@@ -0,0 +1,3 @@
+<template>
+  <iframe src="/admin/__windicss/" class="w-full h-full"></iframe>
+</template>
diff --git a/src/admin/app/plugins/router.ts b/src/admin/app/plugins/router.ts
index 9c1dfebc6..1fbf01c0c 100644
--- a/src/admin/app/plugins/router.ts
+++ b/src/admin/app/plugins/router.ts
@@ -3,6 +3,9 @@ import { createRouter, createWebHistory } from 'vue3-router'
 // Pages
 import Index from '../pages/index.vue'
 import Static from '../pages/static.vue'
+import Components from '../pages/components.vue'
+import Config from '../pages/config.vue'
+import WindiCSS from '../pages/windicss.vue'
 
 // Router plugin
 export const router = createRouter({
@@ -17,6 +20,21 @@ export const router = createRouter({
       path: '/static',
       name: 'static',
       component: Static as any
+    },
+    {
+      path: '/components',
+      name: 'components',
+      component: Components as any
+    },
+    {
+      path: '/config',
+      name: 'config',
+      component: Config as any
+    },
+    {
+      path: '/windicss',
+      name: 'windicss',
+      component: WindiCSS as any
     }
   ]
 })
diff --git a/src/admin/index.ts b/src/admin/index.ts
index d47cb0dda..5aa28c467 100644
--- a/src/admin/index.ts
+++ b/src/admin/index.ts
@@ -1,67 +1,7 @@
-import { join } from 'upath'
-import chalk from 'chalk'
-import { NuxtOptionsServer } from '@nuxt/types/config/server'
-import serveStatic from 'serve-static'
+import { resolve } from 'path'
 import { Module } from '@nuxt/types'
-import { createServer as createViteServer } from 'vite'
-import api from './api'
 
 export default <Module>function () {
-  const { nuxt, addServerMiddleware, options } = this
-
-  process.options = nuxt.options
-  process.previewUrl = 'http://localhost:4000'
-
-  // Add runtime plugin
-  if (options.dev) this.options.plugins.push(require.resolve(join(__dirname, '/runtime/plugin')))
-
-  nuxt.hook('listen', (_: any, { host, port }: NuxtOptionsServer) => {
-    process.previewUrl = `http://${host}:${port}`
-
-    nuxt.options.cli.badgeMessages.push(
-      '',
-      chalk.bold('📝 Admin: ') + chalk.underline.yellow(`${process.previewUrl}/admin/`)
-    )
-  })
-
-  if (process.env.ADMIN_DEV) {
-    // use Vite as middleware
-    const server = createViteServer({
-      root: join(__dirname, 'app'),
-      server: {
-        middlewareMode: 'html'
-      },
-      plugins: [
-        {
-          name: 'docus:admin-api',
-          configureServer(server) {
-            server.middlewares.use('/api', api)
-          }
-        }
-      ]
-    })
-
-    nuxt.hook('render:setupMiddleware', async () => {
-      const middleware = (await server).middlewares
-
-      // remove Vite's base middleware since it's already handled by connect route
-      // it's right before '/__open-in-editor' middleware
-      const viteBaseMiddlewareIndex = middleware.stack.findIndex(i => i.route === '/__open-in-editor') - 1
-      if (viteBaseMiddlewareIndex >= 0) {
-        middleware.stack.splice(viteBaseMiddlewareIndex, 1)
-      }
-
-      nuxt.server.app.use('/admin/', middleware)
-    })
-  } else {
-    // use built dist
-    addServerMiddleware({
-      path: '/admin/',
-      handle: serveStatic(join(__dirname, 'app/dist'))
-    })
-    addServerMiddleware({
-      path: '/admin/api',
-      handler: api
-    })
-  }
+  this.addModule(resolve(__dirname, 'modules/admin.ts'))
+  this.addModule(resolve(__dirname, 'modules/components.ts'))
 }
diff --git a/src/admin/modules/admin.ts b/src/admin/modules/admin.ts
new file mode 100644
index 000000000..a9947a624
--- /dev/null
+++ b/src/admin/modules/admin.ts
@@ -0,0 +1,66 @@
+import { join } from 'path'
+import chalk from 'chalk'
+import { NuxtOptionsServer } from '@nuxt/types/config/server'
+import serveStatic from 'serve-static'
+import { Module } from '@nuxt/types'
+import { createServer as createViteServer } from 'vite'
+import api from '../api'
+import windicss from './windicss'
+
+export default <Module>function () {
+  const { nuxt, addServerMiddleware, options } = this
+
+  process.options = nuxt.options
+  process.previewUrl = 'http://localhost:4000'
+
+  // Add runtime plugin
+  if (options.dev) this.options.plugins.push(require.resolve(join(__dirname, '../runtime/plugin')))
+
+  nuxt.hook('listen', (_: any, { host, port }: NuxtOptionsServer) => {
+    process.previewUrl = `http://${host}:${port}`
+
+    nuxt.options.cli.badgeMessages.push(
+      '',
+      chalk.bold('📝 Admin: ') + chalk.underline.yellow(`${process.previewUrl}/admin/`)
+    )
+  })
+
+  const windiMiddleware = windicss(nuxt)
+
+  if (process.env.ADMIN_DEV) {
+    // use Vite as middleware
+    const server = createViteServer({
+      root: join(__dirname, '../app'),
+      server: {
+        middlewareMode: 'html'
+      },
+      plugins: [
+        {
+          name: 'docus:admin-api',
+          configureServer(server) {
+            server.middlewares.use('/api', api)
+            server.middlewares.use('/__windicss', windiMiddleware)
+          }
+        }
+      ]
+    })
+
+    nuxt.hook('render:setupMiddleware', async () => {
+      nuxt.server.app.use('/admin/', (await server).middlewares)
+    })
+  } else {
+    // use built dist
+    addServerMiddleware({
+      path: '/admin/',
+      handle: serveStatic(join(__dirname, '../app/dist'))
+    })
+    addServerMiddleware({
+      path: '/admin/api',
+      handler: api
+    })
+    addServerMiddleware({
+      path: '/admin/__windicss',
+      handler: windiMiddleware
+    })
+  }
+}
diff --git a/src/admin/modules/components.ts b/src/admin/modules/components.ts
new file mode 100644
index 000000000..afd9e2054
--- /dev/null
+++ b/src/admin/modules/components.ts
@@ -0,0 +1,24 @@
+import { resolve } from 'path'
+import { Module } from '@nuxt/types'
+import fg from 'fast-glob'
+
+// serve components preview under `/__components`
+export default <Module>async function () {
+  const { nuxt } = this
+
+  const dir = resolve(nuxt.options.srcDir, 'components')
+  const components = await fg('**/*.vue', { cwd: dir })
+
+  nuxt.options.layouts.none = resolve(__dirname, '../runtime/layouts/none.vue')
+  nuxt.hook('build:extendRoutes', (routes: any[]) => {
+    routes.unshift({
+      name: 'components-preview',
+      path: '/__components',
+      component: resolve(__dirname, '../runtime/preview.vue'),
+      children: components.map(i => ({
+        path: i,
+        component: resolve(dir, i)
+      }))
+    })
+  })
+}
diff --git a/src/admin/modules/windicss.ts b/src/admin/modules/windicss.ts
new file mode 100644
index 000000000..565acbc24
--- /dev/null
+++ b/src/admin/modules/windicss.ts
@@ -0,0 +1,42 @@
+import { resolve, dirname, join } from 'path'
+import fs from 'fs'
+import { ApiMiddleware } from 'windicss-analysis'
+import sirv from 'sirv'
+import Connect from 'connect'
+
+export default function (nuxt: any): Connect.NextHandleFunction {
+  const analysisRoot = dirname(resolve(require.resolve('windicss-analysis/package.json')))
+
+  let utils: any
+  nuxt.hook('windicss:utils', _utils => {
+    utils = _utils
+  })
+
+  const api = ApiMiddleware(
+    {
+      root: nuxt.options.srcDir
+    },
+    {
+      // reuse the utils instance from `nuxt-windicss`
+      get utils() {
+        return utils
+      }
+    }
+  )
+  const serve = sirv(join(analysisRoot, 'dist/app'), {
+    dev: true,
+    single: true
+  })
+
+  return (req, res, next) => {
+    if (req.url === '/') {
+      const index = fs.readFileSync(join(analysisRoot, 'dist/app/index.html'), 'utf-8')
+      res.end(index.replace(/="\//g, '="/admin/__windicss/'))
+    } else if (req.url.startsWith('/api/')) {
+      req.url = req.url.slice(4)
+      api(req, res, next)
+    } else {
+      serve(req, res, next)
+    }
+  }
+}
diff --git a/src/admin/runtime/layouts/none.vue b/src/admin/runtime/layouts/none.vue
new file mode 100644
index 000000000..5d3ae9c40
--- /dev/null
+++ b/src/admin/runtime/layouts/none.vue
@@ -0,0 +1,3 @@
+<template>
+  <Nuxt />
+</template>
diff --git a/src/admin/runtime/preview.vue b/src/admin/runtime/preview.vue
new file mode 100644
index 000000000..5a7a841ab
--- /dev/null
+++ b/src/admin/runtime/preview.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <RouterView />
+  </div>
+</template>
+
+<script>
+export default {
+  layout: 'none'
+}
+</script>
diff --git a/yarn.lock b/yarn.lock
index d9e8189fb..83f1f3a7d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1912,6 +1912,11 @@
     mustache "^2.3.0"
     stack-trace "0.0.10"
 
+"@polka/url@^1.0.0-next.15":
+  version "1.0.0-next.15"
+  resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.15.tgz#6a9d143f7f4f49db2d782f9e1c8839a29b43ae23"
+  integrity sha512-15spi3V28QdevleWBNXE4pIls3nFZmBbUGrW9IVPwiQczuSb9n76TCB4bsk8TSel+I1OkHEdPhu5QKMfY6rQHA==
+
 "@polka/url@^1.0.0-next.9":
   version "1.0.0-next.12"
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.12.tgz#431ec342a7195622f86688bbda82e3166ce8cb28"
@@ -2892,6 +2897,19 @@
     micromatch "^4.0.4"
     windicss "^3.1.3"
 
+"@windicss/plugin-utils@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@windicss/plugin-utils/-/plugin-utils-1.1.1.tgz#7f70952adc8d33f607706e434a153e2cdff52b64"
+  integrity sha512-niKEDyUpOfCGemFHopI9fxdWPpJQIZ/jmaU4spQXsGc1oEts164P8LUJPQmXc8C6vjKwkrH7KA+lxYNG5LmlDA==
+  dependencies:
+    "@antfu/utils" "^0.2.3"
+    debug "^4.3.2"
+    fast-glob "^3.2.5"
+    jiti "^1.10.1"
+    magic-string "^0.25.7"
+    micromatch "^4.0.4"
+    windicss "^3.1.3"
+
 "@windicss/plugin-utils@^1.2.4":
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/@windicss/plugin-utils/-/plugin-utils-1.2.4.tgz#b319355d6e9b4e529c965b5a55af6d57679e417f"
@@ -4335,6 +4353,30 @@ chardet@^0.7.0:
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
+cheerio-select@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/cheerio-select/-/cheerio-select-1.5.0.tgz#faf3daeb31b17c5e1a9dabcee288aaf8aafa5823"
+  integrity sha512-qocaHPv5ypefh6YNxvnbABM07KMxExbtbfuJoIie3iZXX1ERwYmJcIiRrr9H05ucQP1k28dav8rpdDgjQd8drg==
+  dependencies:
+    css-select "^4.1.3"
+    css-what "^5.0.1"
+    domelementtype "^2.2.0"
+    domhandler "^4.2.0"
+    domutils "^2.7.0"
+
+cheerio@^1.0.0-rc.3:
+  version "1.0.0-rc.10"
+  resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.0.0-rc.10.tgz#2ba3dcdfcc26e7956fc1f440e61d51c643379f3e"
+  integrity sha512-g0J0q/O6mW8z5zxQ3A8E8J1hUgp4SMOvEoW/x84OwyHKe/Zccz83PVT4y5Crcr530FV6NgmKI1qvGTKVl9XXVw==
+  dependencies:
+    cheerio-select "^1.5.0"
+    dom-serializer "^1.3.2"
+    domhandler "^4.2.0"
+    htmlparser2 "^6.1.0"
+    parse5 "^6.0.1"
+    parse5-htmlparser2-tree-adapter "^6.0.1"
+    tslib "^2.2.0"
+
 chokidar@^2.1.8:
   version "2.1.8"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
@@ -5199,7 +5241,7 @@ css-what@^3.2.1:
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.4.2.tgz#ea7026fcb01777edbde52124e21f327e7ae950e4"
   integrity sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==
 
-css-what@^5.0.0:
+css-what@^5.0.0, css-what@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-5.0.1.tgz#3efa820131f4669a8ac2408f9c32e7c7de9f4cad"
   integrity sha512-FYDTSHb/7KXsWICVsxdmiExPjCfRC4qRFBdVwv7Ax9hMnvMmEjP9RfxTEZ3qPZGmADDn2vAKSo9UcN1jKVYscg==
@@ -5382,6 +5424,13 @@ decamelize@^1.1.0, decamelize@^1.1.2, decamelize@^1.2.0:
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
   integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
 
+declass@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/declass/-/declass-0.0.1.tgz#2c3cbda5e4ac66bc445b8bd61aa5449bf6ed39d1"
+  integrity sha512-V1tO9kGH+GLfkeiYCF016HSBcTP5mI+eMusSFgxZv0BzKvUQgI/Xn6FdoFuMwQHEqxKXhaW02s8oZqXPclKPUg==
+  dependencies:
+    cheerio "^1.0.0-rc.3"
+
 decode-uri-component@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
@@ -5612,6 +5661,15 @@ dom-serializer@^1.0.1:
     domhandler "^4.0.0"
     entities "^2.0.0"
 
+dom-serializer@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.3.2.tgz#6206437d32ceefaec7161803230c7a20bc1b4d91"
+  integrity sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^4.2.0"
+    entities "^2.0.0"
+
 domain-browser@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
@@ -5649,7 +5707,7 @@ domutils@^1.5.1, domutils@^1.7.0:
     dom-serializer "0"
     domelementtype "1"
 
-domutils@^2.6.0:
+domutils@^2.5.2, domutils@^2.6.0, domutils@^2.7.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.7.0.tgz#8ebaf0c41ebafcf55b0b72ec31c56323712c5442"
   integrity sha512-8eaHa17IwJUPAiB+SoTYBo5mCdeMgdcAoXJ59m6DT1vw+5iLS3gNoqYaRowaBKtGVrOF1Jz4yDTgYKLK2kvfJg==
@@ -7368,6 +7426,16 @@ htmlparser2@^3.10.1:
     inherits "^2.0.1"
     readable-stream "^3.1.1"
 
+htmlparser2@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7"
+  integrity sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^4.0.0"
+    domutils "^2.5.2"
+    entities "^2.0.0"
+
 http-errors@~1.7.2:
   version "1.7.3"
   resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.3.tgz#6c619e4f9c60308c38519498c14fbb10aacebb06"
@@ -7619,9 +7687,9 @@ ip@^1.1.5:
   integrity sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=
 
 ipx@^0.6.4:
-  version "0.6.4"
-  resolved "https://registry.yarnpkg.com/ipx/-/ipx-0.6.4.tgz#df6757ab2c3ef717879d8d06accbfb156ba623e1"
-  integrity sha512-t1DvrB5tA52eSuGWNzxs2uJGsbcmTRP9Bv89OQk7xjOO/2UU1i7zniRXrL3pxg853UhvgXPHzwlTgqxejI99pA==
+  version "0.6.7"
+  resolved "https://registry.yarnpkg.com/ipx/-/ipx-0.6.7.tgz#4db5418b368b4bc7925aacd134e68100e0e53ae1"
+  integrity sha512-Y9xxAXfGqmupTTNH3l1V2mKWWfgVY+PJ9wN57h8NDcLZZxHAk3qYIRxbDKs+POn/dinpU3vQZjBBRe8Q7xnW1g==
   dependencies:
     consola "^2.15.3"
     defu "^5.0.0"
@@ -9515,7 +9583,7 @@ nuxt-vite@^0.1.1:
     vite "^2.3.4"
     vite-plugin-vue2 "^1.5.1"
 
-nuxt-windicss@1.1.3:
+nuxt-windicss@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/nuxt-windicss/-/nuxt-windicss-1.1.3.tgz#9efd6260b008631e9685ca5bb9609cdd4528756e"
   integrity sha512-9LKng04V4eZm4dv+Ur0YCax7IIlJRJT0BuOhyS01fORTM3hkH5edsUZJtP+EU2Da+AncPW8FDeL/OIJ+DsCyfw==
@@ -9895,7 +9963,14 @@ parse-url@^5.0.0:
     parse-path "^4.0.0"
     protocols "^1.4.0"
 
-parse5@^6.0.0:
+parse5-htmlparser2-tree-adapter@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz#2cdf9ad823321140370d4dbf5d3e92c7c8ddc6e6"
+  integrity sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==
+  dependencies:
+    parse5 "^6.0.1"
+
+parse5@^6.0.0, parse5@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
   integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
@@ -12206,6 +12281,15 @@ siroc@^0.9.3:
     upath "^2.0.1"
     v8-compile-cache "^2.3.0"
 
+sirv@^1.0.12:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/sirv/-/sirv-1.0.12.tgz#d816c882b35489b3c63290e2f455ae3eccd5f652"
+  integrity sha512-+jQoCxndz7L2tqQL4ZyzfDhky0W/4ZJip3XoOuxyQWnAwMxindLl3Xv1qT4x1YX/re0leShvTm8Uk0kQspGhBg==
+  dependencies:
+    "@polka/url" "^1.0.0-next.15"
+    mime "^2.3.1"
+    totalist "^1.0.0"
+
 sirv@^1.0.7:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/sirv/-/sirv-1.0.11.tgz#81c19a29202048507d6ec0d8ba8910fda52eb5a4"
@@ -13082,7 +13166,7 @@ tslib@^2.0.1, tslib@^2.0.3:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.2.0.tgz#fb2c475977e35e241311ede2693cee1ec6698f5c"
   integrity sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==
 
-tslib@^2.3.0:
+tslib@^2.2.0, tslib@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
   integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
@@ -13934,6 +14018,19 @@ widest-line@^3.1.0:
   dependencies:
     string-width "^4.0.0"
 
+windicss-analysis@^0.3.4:
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/windicss-analysis/-/windicss-analysis-0.3.4.tgz#52d0d4d542f42b57d69ae0d38e3fefc1ecc0ea6a"
+  integrity sha512-3GbzXNQ53UuyMAnrdSw6qaB6+mR8sZziRqPo/ZUamD9L8aQu+paw2NFuJ4CF/FLfPZo+kjUZika7e/XGHCf9kQ==
+  dependencies:
+    "@windicss/plugin-utils" "^1.1.1"
+    cac "^6.7.3"
+    connect "^3.7.0"
+    declass "^0.0.1"
+    fast-glob "^3.2.6"
+    fs-extra "^10.0.0"
+    sirv "^1.0.12"
+
 windicss-webpack-plugin@1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/windicss-webpack-plugin/-/windicss-webpack-plugin-1.2.4.tgz#c799370c307af48f1b7dd38b32fdce551a250f3d"