diff --git a/.eslintignore b/.eslintignore
index 1905aa4a8..a0c203ada 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -4,5 +4,8 @@
 /tests/fixtures
 /tests/integrations/eslint-plugin-import
 
-!.vuepress
-/docs/.vuepress/dist
+!.vitepress
+/docs/.vitepress/dist
+/docs/.vitepress/build-system/shim/eslint.mjs
+/docs/.vitepress/build-system/shim/assert.mjs
+/docs/.vitepress/.temp
diff --git a/.gitignore b/.gitignore
index e1401b951..06fb2db3b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,5 +7,8 @@
 /test.*
 yarn.lock
 yarn-error.log
-docs/.vuepress/dist
+/docs/.vitepress/dist
+/docs/.vitepress/build-system/shim/eslint.mjs
+/docs/.vitepress/build-system/shim/assert.mjs
+/docs/.vitepress/.temp
 typings/eslint/lib/rules
diff --git a/docs/.vitepress/build-system/build.ts b/docs/.vitepress/build-system/build.ts
new file mode 100644
index 000000000..698b0809d
--- /dev/null
+++ b/docs/.vitepress/build-system/build.ts
@@ -0,0 +1,66 @@
+/**
+ * Pre-build cjs packages that cannot be bundled well.
+ */
+import esbuild from 'esbuild'
+import path from 'path'
+import fs from 'fs'
+import { fileURLToPath } from 'url'
+
+const dirname = path.dirname(
+  fileURLToPath(
+    // @ts-expect-error -- Cannot change `module` option
+    import.meta.url
+  )
+)
+
+build(
+  path.join(dirname, './src/eslint.mjs'),
+  path.join(dirname, './shim/eslint.mjs'),
+  ['path', 'assert', 'util']
+)
+build(
+  path.join(dirname, '../../../node_modules/assert'),
+  path.join(dirname, './shim/assert.mjs'),
+  ['path']
+)
+
+function build(input: string, out: string, injects: string[] = []) {
+  // eslint-disable-next-line no-console -- ignore
+  console.log(`build@ ${input}`)
+  let code = bundle(input, injects)
+  code = transform(code, injects)
+  fs.mkdirSync(path.dirname(out), { recursive: true })
+  fs.writeFileSync(out, code, 'utf8')
+}
+
+function bundle(entryPoint: string, externals: string[]) {
+  const result = esbuild.buildSync({
+    entryPoints: [entryPoint],
+    format: 'esm',
+    bundle: true,
+    external: externals,
+    write: false,
+    inject: [path.join(dirname, './src/process-shim.mjs')]
+  })
+
+  return `${result.outputFiles[0].text}`
+}
+
+function transform(code: string, injects: string[]) {
+  const newCode = code.replace(/"[a-z]+" = "[a-z]+";/u, '')
+  return `
+${injects
+  .map(
+    (inject) =>
+      `import $inject_${inject.replace(/-/gu, '_')}$ from '${inject}';`
+  )
+  .join('\n')}
+const $_injects_$ = {${injects
+    .map((inject) => `${inject.replace(/-/gu, '_')}:$inject_${inject}$`)
+    .join(',\n')}};
+function require(module, ...args) {
+  return $_injects_$[module] || {}
+}
+${newCode}
+`
+}
diff --git a/docs/.vitepress/build-system/shim/globby.mjs b/docs/.vitepress/build-system/shim/globby.mjs
new file mode 100644
index 000000000..57d1de9f1
--- /dev/null
+++ b/docs/.vitepress/build-system/shim/globby.mjs
@@ -0,0 +1,2 @@
+export {}
+export default {}
diff --git a/docs/.vitepress/build-system/shim/path.mjs b/docs/.vitepress/build-system/shim/path.mjs
new file mode 100644
index 000000000..544792b00
--- /dev/null
+++ b/docs/.vitepress/build-system/shim/path.mjs
@@ -0,0 +1,38 @@
+// @ts-nocheck
+export const sep = '/'
+export function basename(path, ext) {
+  const b = (/[^\/]*$/u.exec(path) || [''])[0]
+  return ext && b.endsWith(ext) ? b.slice(0, -ext.length) : b
+}
+export function extname(path) {
+  return (/[^.\/]*$/u.exec(path) || [''])[0]
+}
+export function isAbsolute() {
+  return false
+}
+export function join(...args) {
+  return args.length > 0 ? normalize(args.join('/')) : '.'
+}
+
+function normalize(path) {
+  const result = []
+  for (const part of path.replace(/\/+/gu, '/').split('/')) {
+    if (part === '..') {
+      if (result[0] && result[0] !== '..' && result[0] !== '.') result.shift()
+    } else if (part === '.' && result.length > 0) {
+      // noop
+    } else {
+      result.unshift(part)
+    }
+  }
+  return result.reverse().join('/')
+}
+const posix = {
+  sep,
+  basename,
+  extname,
+  isAbsolute,
+  join
+}
+posix.posix = posix
+export default posix
diff --git a/docs/.vitepress/build-system/src/eslint.mjs b/docs/.vitepress/build-system/src/eslint.mjs
new file mode 100644
index 000000000..6604e0bb4
--- /dev/null
+++ b/docs/.vitepress/build-system/src/eslint.mjs
@@ -0,0 +1,5 @@
+// @ts-nocheck
+import * as all from '../../../../node_modules/eslint/lib/linter/linter.js'
+const Linter = all.Linter
+export { Linter }
+export default { Linter }
diff --git a/docs/.vitepress/build-system/src/process-shim.mjs b/docs/.vitepress/build-system/src/process-shim.mjs
new file mode 100644
index 000000000..6b75bf56e
--- /dev/null
+++ b/docs/.vitepress/build-system/src/process-shim.mjs
@@ -0,0 +1,10 @@
+/* globals window */
+// @ts-nocheck
+export const process = {
+  env: {},
+  cwd: () => '',
+  stdout: {}
+}
+if (typeof window !== 'undefined') {
+  window.process = process
+}
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
new file mode 100644
index 000000000..9990ed7bd
--- /dev/null
+++ b/docs/.vitepress/config.ts
@@ -0,0 +1,222 @@
+import type { DefaultTheme } from 'vitepress'
+import { defineConfig } from 'vitepress'
+import { BUNDLED_LANGUAGES } from 'shiki'
+import path from 'path'
+import { fileURLToPath } from 'url'
+import rules from '../../tools/lib/rules'
+import { viteCommonjs, vitePluginRequireResolve } from './vite-plugin'
+
+// Pre-build cjs packages that cannot be bundled well.
+import './build-system/build'
+
+const dirname = path.dirname(
+  fileURLToPath(
+    // @ts-expect-error -- Cannot change `module` option
+    import.meta.url
+  )
+)
+
+// Include `json5` as alias for jsonc
+const jsonc = BUNDLED_LANGUAGES.find((lang) => lang.id === 'jsonc')
+if (jsonc) {
+  jsonc.aliases = [...(jsonc.aliases ?? []), 'json5']
+}
+
+const uncategorizedRules = rules.filter(
+  (rule) =>
+    !rule.meta.docs.categories &&
+    !rule.meta.docs.extensionRule &&
+    !rule.meta.deprecated
+)
+const uncategorizedExtensionRule = rules.filter(
+  (rule) =>
+    !rule.meta.docs.categories &&
+    rule.meta.docs.extensionRule &&
+    !rule.meta.deprecated
+)
+const deprecatedRules = rules.filter((rule) => rule.meta.deprecated)
+
+const sidebarCategories = [
+  { title: 'Base Rules', categoryIds: ['base'] },
+  {
+    title: 'Priority A: Essential',
+    categoryIds: ['vue3-essential', 'essential']
+  },
+  {
+    title: 'Priority A: Essential for Vue.js 3.x',
+    categoryIds: ['vue3-essential']
+  },
+  { title: 'Priority A: Essential for Vue.js 2.x', categoryIds: ['essential'] },
+  {
+    title: 'Priority B: Strongly Recommended',
+    categoryIds: ['vue3-strongly-recommended', 'strongly-recommended']
+  },
+  {
+    title: 'Priority B: Strongly Recommended for Vue.js 3.x',
+    categoryIds: ['vue3-strongly-recommended']
+  },
+  {
+    title: 'Priority B: Strongly Recommended for Vue.js 2.x',
+    categoryIds: ['strongly-recommended']
+  },
+  {
+    title: 'Priority C: Recommended',
+    categoryIds: ['vue3-recommended', 'recommended']
+  },
+  {
+    title: 'Priority C: Recommended for Vue.js 3.x',
+    categoryIds: ['vue3-recommended']
+  },
+  {
+    title: 'Priority C: Recommended for Vue.js 2.x',
+    categoryIds: ['recommended']
+  }
+]
+
+const categorizedRules: DefaultTheme.SidebarGroup[] = []
+for (const { title, categoryIds } of sidebarCategories) {
+  const categoryRules = rules
+    .filter((rule) => rule.meta.docs.categories && !rule.meta.deprecated)
+    .filter((rule) =>
+      categoryIds.every((categoryId) =>
+        rule.meta.docs.categories.includes(categoryId)
+      )
+    )
+  const children: DefaultTheme.SidebarItem[] = categoryRules
+    .filter(({ ruleId }) => {
+      const exists = categorizedRules.some(({ items }) =>
+        items.some(({ text: alreadyRuleId }) => alreadyRuleId === ruleId)
+      )
+      return !exists
+    })
+    .map(({ ruleId, name }) => {
+      return {
+        text: ruleId,
+        link: `/rules/${name}`
+      }
+    })
+
+  if (children.length === 0) {
+    continue
+  }
+  categorizedRules.push({
+    text: title,
+    collapsible: false,
+    items: children
+  })
+}
+
+const extraCategories: DefaultTheme.SidebarGroup[] = []
+if (uncategorizedRules.length > 0) {
+  extraCategories.push({
+    text: 'Uncategorized',
+    collapsible: false,
+    items: uncategorizedRules.map(({ ruleId, name }) => ({
+      text: ruleId,
+      link: `/rules/${name}`
+    }))
+  })
+}
+if (uncategorizedExtensionRule.length > 0) {
+  extraCategories.push({
+    text: 'Extension Rules',
+    collapsible: false,
+    items: uncategorizedExtensionRule.map(({ ruleId, name }) => ({
+      text: ruleId,
+      link: `/rules/${name}`
+    }))
+  })
+}
+if (deprecatedRules.length > 0) {
+  extraCategories.push({
+    text: 'Deprecated',
+    collapsible: false,
+    items: deprecatedRules.map(({ ruleId, name }) => ({
+      text: ruleId,
+      link: `/rules/${name}`
+    }))
+  })
+}
+
+export default defineConfig({
+  base: '/',
+  title: 'eslint-plugin-vue',
+  description: 'Official ESLint plugin for Vue.js',
+  head: [['link', { rel: 'icon', href: '/favicon.png' }]],
+
+  vite: {
+    publicDir: path.resolve(dirname, './public'),
+    plugins: [vitePluginRequireResolve(), viteCommonjs()],
+    resolve: {
+      alias: {
+        eslint: path.join(dirname, './build-system/shim/eslint.mjs'),
+        assert: path.join(dirname, './build-system/shim/assert.mjs'),
+        path: path.join(dirname, './build-system/shim/path.mjs'),
+
+        tslib: path.join(dirname, '../../node_modules/tslib/tslib.es6.js'),
+        globby: path.join(dirname, './build-system/shim/globby.mjs')
+      }
+    },
+    define: {
+      'process.env.NODE_DEBUG': 'false',
+      'require.cache': '{}'
+    }
+  },
+
+  lastUpdated: true,
+  themeConfig: {
+    editLink: {
+      pattern:
+        'https://github.com/vuejs/eslint-plugin-vue/edit/master/docs/:path'
+    },
+    socialLinks: [
+      {
+        icon: 'github',
+        link: 'https://github.com/vuejs/eslint-plugin-vue'
+      }
+    ],
+
+    nav: [
+      { text: 'User Guide', link: '/user-guide/' },
+      { text: 'Developer Guide', link: '/developer-guide/' },
+      { text: 'Rules', link: '/rules/' },
+      {
+        text: 'Demo',
+        link: 'https://ota-meshi.github.io/eslint-plugin-vue-demo/'
+      }
+    ],
+
+    sidebar: {
+      '/rules/': [
+        {
+          text: 'Rules',
+          items: [{ text: 'Available Rules', link: '/rules/' }]
+        },
+
+        // Rules in each category.
+        ...categorizedRules,
+
+        // Rules in no category.
+        ...extraCategories
+      ],
+
+      '/': [
+        {
+          text: 'Guide',
+          items: [
+            { text: 'Introduction', link: '/' },
+            { text: 'User Guide', link: '/user-guide/' },
+            { text: 'Developer Guide', link: '/developer-guide/' },
+            { text: 'Rules', link: '/rules/' }
+          ]
+        }
+      ]
+    },
+
+    algolia: {
+      appId: '2L4MGZSULB',
+      apiKey: 'fdf57932b27a6c230d01a890492ab76d',
+      indexName: 'eslint-plugin-vue'
+    }
+  }
+})
diff --git a/docs/.vuepress/public/favicon.png b/docs/.vitepress/public/favicon.png
similarity index 100%
rename from docs/.vuepress/public/favicon.png
rename to docs/.vitepress/public/favicon.png
diff --git a/docs/.vitepress/theme/Layout.vue b/docs/.vitepress/theme/Layout.vue
new file mode 100644
index 000000000..3be00694b
--- /dev/null
+++ b/docs/.vitepress/theme/Layout.vue
@@ -0,0 +1,21 @@
+<script setup>
+import { useData } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+import { computed } from 'vue'
+const BaseLayout = DefaultTheme.Layout
+const { frontmatter } = useData()
+const pageClass = computed(() => frontmatter.value.pageClass || '')
+</script>
+
+<template>
+  <div :class="pageClass">
+    <BaseLayout />
+  </div>
+</template>
+
+<style scoped>
+/* Rule Page */
+.rule-details :deep(.main h1 + blockquote ::first-letter) {
+  text-transform: uppercase;
+}
+</style>
diff --git a/docs/.vuepress/components/eslint-code-block.vue b/docs/.vitepress/theme/components/eslint-code-block.vue
similarity index 78%
rename from docs/.vuepress/components/eslint-code-block.vue
rename to docs/.vitepress/theme/components/eslint-code-block.vue
index b95e0d070..77d4fd7cf 100644
--- a/docs/.vuepress/components/eslint-code-block.vue
+++ b/docs/.vitepress/theme/components/eslint-code-block.vue
@@ -3,7 +3,7 @@
     <eslint-editor
       :linter="linter"
       :config="config"
-      v-model="code"
+      v-model:code="code"
       :style="{ height }"
       class="eslint-code-block"
       :filename="filename"
@@ -18,8 +18,10 @@
 </template>
 
 <script>
-import EslintEditor from 'vue-eslint-editor'
-import { rules, processors } from '../../../'
+import EslintEditor from '@ota-meshi/site-kit-eslint-editor-vue'
+import { markRaw } from 'vue'
+import * as plugin from '../../../..'
+const { rules, processors } = plugin.default || plugin
 
 export default {
   name: 'ESLintCodeBlock',
@@ -55,14 +57,9 @@ export default {
   },
 
   data() {
-    const code = this.computeCodeFromSlot()
-    // The height is determined in the initial processing.
-    // This is because later code changes do not change the height.
-    const lines = code.split('\n').length
-    const height = `${Math.max(120, 19 * lines)}px`
     return {
-      code,
-      height,
+      code: '',
+      height: '100px',
       linter: null,
       preprocess: processors['.vue'].preprocess,
       postprocess: processors['.vue'].postprocess,
@@ -152,26 +149,27 @@ export default {
   },
 
   methods: {
-    computeCodeFromSlot() {
-      return `${computeCodeFromSlot(this.$slots.default).trim()}\n`
-    },
-
     async loadTypescriptESLint() {
       this.tsEslintParser = await import('@typescript-eslint/parser')
     }
   },
 
   async mounted() {
+    this.code = `${computeCodeFromSlot(
+      findCode(this.$slots.default?.())
+    ).trim()}\n`
+    const lines = this.code.split('\n').length
+    this.height = `${Math.max(120, 20 * (1 + lines))}px`
     // Load linter.
     const [{ Linter }, { parseForESLint }] = await Promise.all([
-      import('eslint/lib/linter'),
+      import('eslint'),
       import('espree').then(() => import('vue-eslint-parser'))
     ])
     if (this.langTs || this.typescript) {
       await this.loadTypescriptESLint()
     }
 
-    const linter = (this.linter = new Linter())
+    const linter = (this.linter = markRaw(new Linter()))
 
     for (const ruleId of Object.keys(rules)) {
       linter.defineRule(`vue/${ruleId}`, rules[ruleId])
@@ -181,12 +179,39 @@ export default {
   }
 }
 
-function computeCodeFromSlot(nodes) {
-  if (!Array.isArray(nodes)) {
+/**
+ * Find VNode of <code> tag
+ */
+function findCode(n) {
+  const nodes = Array.isArray(n) ? n : [n]
+  for (const node of nodes) {
+    if (!node) {
+      continue
+    }
+    if (node.type === 'code') {
+      return node
+    }
+    const c = findCode(node.children)
+    if (c) {
+      return c
+    }
+  }
+  return null
+}
+
+/**
+ * Extract text
+ */
+function computeCodeFromSlot(n) {
+  if (!n) {
     return ''
   }
+  const nodes = Array.isArray(n) ? n : [n]
+  // debugger
   return nodes
-    .map((node) => node.text || computeCodeFromSlot(node.children))
+    .map((node) =>
+      typeof node === 'string' ? node : computeCodeFromSlot(node.children)
+    )
     .join('')
 }
 </script>
diff --git a/docs/.vuepress/components/rules-table.vue b/docs/.vitepress/theme/components/rules-table.vue
similarity index 95%
rename from docs/.vuepress/components/rules-table.vue
rename to docs/.vitepress/theme/components/rules-table.vue
index 29d31c4c6..c517d4591 100644
--- a/docs/.vuepress/components/rules-table.vue
+++ b/docs/.vitepress/theme/components/rules-table.vue
@@ -77,10 +77,10 @@ export default {
 </script>
 
 <style scoped>
-.table-root ::v-deep .highlighting tr {
+.table-root :deep(.highlighting tr) {
   opacity: 0.3;
 }
-.table-root ::v-deep .highlighting .highlight {
+.table-root :deep(.highlighting .highlight) {
   opacity: 1;
 }
 .filter-tool label {
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
new file mode 100644
index 000000000..8afcf4054
--- /dev/null
+++ b/docs/.vitepress/theme/index.ts
@@ -0,0 +1,30 @@
+// @ts-expect-error -- Browser
+if (typeof window !== 'undefined') {
+  if (typeof require === 'undefined') {
+    // @ts-expect-error -- Browser
+    ;(window as any).require = () => {
+      const e = new Error('require is not defined')
+      ;(e as any).code = 'MODULE_NOT_FOUND'
+      throw e
+    }
+  }
+}
+import type { Theme } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+// @ts-expect-error -- ignore
+import Layout from './Layout.vue'
+// @ts-expect-error -- ignore
+import ESLintCodeBlock from './components/eslint-code-block.vue'
+// @ts-expect-error -- ignore
+import RulesTable from './components/rules-table.vue'
+
+const theme: Theme = {
+  ...DefaultTheme,
+  Layout,
+  enhanceApp(ctx) {
+    DefaultTheme.enhanceApp(ctx)
+    ctx.app.component('eslint-code-block', ESLintCodeBlock)
+    ctx.app.component('rules-table', RulesTable)
+  }
+}
+export default theme
diff --git a/docs/.vitepress/vite-plugin.ts b/docs/.vitepress/vite-plugin.ts
new file mode 100644
index 000000000..0df6a54fe
--- /dev/null
+++ b/docs/.vitepress/vite-plugin.ts
@@ -0,0 +1,53 @@
+import type { UserConfig } from 'vitepress'
+import path from 'path'
+import { fileURLToPath } from 'url'
+import { viteCommonjs as baseViteCommonjs } from '@originjs/vite-plugin-commonjs'
+type Plugin = Extract<
+  NonNullable<NonNullable<UserConfig['vite']>['plugins']>[number],
+  { name: string }
+>
+
+const libRoot = path.join(
+  fileURLToPath(
+    // @ts-expect-error -- Cannot change `module` option
+    import.meta.url
+  ),
+  '../../../lib'
+)
+export function vitePluginRequireResolve(): Plugin {
+  return {
+    name: 'vite-plugin-require.resolve',
+    transform(code, id, _options) {
+      if (id.startsWith(libRoot)) {
+        return code.replace(/require\.resolve/gu, '(function(){return 0})')
+      }
+      return undefined
+    }
+  }
+}
+
+export function viteCommonjs(): Plugin {
+  const base = baseViteCommonjs({
+    include: [libRoot],
+    skipPreBuild: true
+  }) as Plugin
+  return {
+    ...base,
+    // The `@originjs/vite-plugin-commonjs` is 'serve' only, but use it in 'build' as well.
+    apply: () => true,
+    async transform(code, id, options) {
+      if (typeof base.transform !== 'function') {
+        return null
+      }
+      const result = await base.transform.call(this, code, id, options)
+      if (result && typeof result === 'object' && result.code) {
+        return {
+          ...result,
+          // Replace it with null, because blanks can be given to the sourcemap and cause an error.
+          map: undefined
+        }
+      }
+      return result
+    }
+  }
+}
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
deleted file mode 100644
index 38ad965e9..000000000
--- a/docs/.vuepress/config.js
+++ /dev/null
@@ -1,193 +0,0 @@
-/**
- * @author Toru Nagashima <https://github.com/mysticatea>
- * See LICENSE file in root directory for full license.
- */
-'use strict'
-
-const rules = require('../../tools/lib/rules')
-const path = require('path')
-
-const uncategorizedRules = rules.filter(
-  (rule) =>
-    !rule.meta.docs.categories &&
-    !rule.meta.docs.extensionRule &&
-    !rule.meta.deprecated
-)
-const uncategorizedExtensionRule = rules.filter(
-  (rule) =>
-    !rule.meta.docs.categories &&
-    rule.meta.docs.extensionRule &&
-    !rule.meta.deprecated
-)
-const deprecatedRules = rules.filter((rule) => rule.meta.deprecated)
-
-const sidebarCategories = [
-  { title: 'Base Rules', categoryIds: ['base'] },
-  {
-    title: 'Priority A: Essential',
-    categoryIds: ['vue3-essential', 'essential']
-  },
-  {
-    title: 'Priority A: Essential for Vue.js 3.x',
-    categoryIds: ['vue3-essential']
-  },
-  { title: 'Priority A: Essential for Vue.js 2.x', categoryIds: ['essential'] },
-  {
-    title: 'Priority B: Strongly Recommended',
-    categoryIds: ['vue3-strongly-recommended', 'strongly-recommended']
-  },
-  {
-    title: 'Priority B: Strongly Recommended for Vue.js 3.x',
-    categoryIds: ['vue3-strongly-recommended']
-  },
-  {
-    title: 'Priority B: Strongly Recommended for Vue.js 2.x',
-    categoryIds: ['strongly-recommended']
-  },
-  {
-    title: 'Priority C: Recommended',
-    categoryIds: ['vue3-recommended', 'recommended']
-  },
-  {
-    title: 'Priority C: Recommended for Vue.js 3.x',
-    categoryIds: ['vue3-recommended']
-  },
-  {
-    title: 'Priority C: Recommended for Vue.js 2.x',
-    categoryIds: ['recommended']
-  }
-]
-
-const categorizedRules = []
-for (const { title, categoryIds } of sidebarCategories) {
-  const categoryRules = rules
-    .filter((rule) => rule.meta.docs.categories && !rule.meta.deprecated)
-    .filter((rule) =>
-      categoryIds.every((categoryId) =>
-        rule.meta.docs.categories.includes(categoryId)
-      )
-    )
-  const children = categoryRules
-    .filter(({ ruleId }) => {
-      const exists = categorizedRules.some(({ children }) =>
-        children.some(([, alreadyRuleId]) => alreadyRuleId === ruleId)
-      )
-      return !exists
-    })
-    .map(({ ruleId, name }) => [`/rules/${name}`, ruleId])
-
-  if (children.length === 0) {
-    continue
-  }
-  categorizedRules.push({
-    title,
-    collapsable: false,
-    children
-  })
-}
-
-const extraCategories = []
-if (uncategorizedRules.length > 0) {
-  extraCategories.push({
-    title: 'Uncategorized',
-    collapsable: false,
-    children: uncategorizedRules.map(({ ruleId, name }) => [
-      `/rules/${name}`,
-      ruleId
-    ])
-  })
-}
-if (uncategorizedExtensionRule.length > 0) {
-  extraCategories.push({
-    title: 'Extension Rules',
-    collapsable: false,
-    children: uncategorizedExtensionRule.map(({ ruleId, name }) => [
-      `/rules/${name}`,
-      ruleId
-    ])
-  })
-}
-if (deprecatedRules.length > 0) {
-  extraCategories.push({
-    title: 'Deprecated',
-    collapsable: false,
-    children: deprecatedRules.map(({ ruleId, name }) => [
-      `/rules/${name}`,
-      ruleId
-    ])
-  })
-}
-
-module.exports = {
-  configureWebpack(_config, _isServer) {
-    return {
-      resolve: {
-        alias: {
-          module: require.resolve('./shim/module'),
-          eslint$: require.resolve('./shim/eslint'),
-          esquery: path.resolve(
-            __dirname,
-            '../../node_modules/esquery/dist/esquery.min.js'
-          ),
-          '@eslint/eslintrc/universal': path.resolve(
-            __dirname,
-            '../../node_modules/@eslint/eslintrc/dist/eslintrc-universal.cjs'
-          ),
-          globby: require.resolve('./shim/globby')
-        }
-      }
-    }
-  },
-
-  base: '/',
-  title: 'eslint-plugin-vue',
-  description: 'Official ESLint plugin for Vue.js',
-  evergreen: true,
-  head: [['link', { rel: 'icon', href: '/favicon.png' }]],
-
-  plugins: {
-    '@vuepress/pwa': {
-      serviceWorker: true,
-      updatePopup: true
-    }
-  },
-
-  themeConfig: {
-    repo: 'vuejs/eslint-plugin-vue',
-    docsRepo: 'vuejs/eslint-plugin-vue',
-    docsDir: 'docs',
-    docsBranch: 'master',
-    editLinks: true,
-    lastUpdated: true,
-
-    nav: [
-      { text: 'User Guide', link: '/user-guide/' },
-      { text: 'Developer Guide', link: '/developer-guide/' },
-      { text: 'Rules', link: '/rules/' },
-      {
-        text: 'Demo',
-        link: 'https://ota-meshi.github.io/eslint-plugin-vue-demo/'
-      }
-    ],
-
-    sidebar: {
-      '/rules/': [
-        '/rules/',
-
-        // Rules in each category.
-        ...categorizedRules,
-
-        // Rules in no category.
-        ...extraCategories
-      ],
-
-      '/': ['/', '/user-guide/', '/developer-guide/', '/rules/']
-    },
-
-    algolia: {
-      appId: '2L4MGZSULB',
-      apiKey: 'fdf57932b27a6c230d01a890492ab76d',
-      indexName: 'eslint-plugin-vue'
-    }
-  }
-}
diff --git a/docs/.vuepress/enhanceApp.js b/docs/.vuepress/enhanceApp.js
deleted file mode 100644
index 1e62f60ac..000000000
--- a/docs/.vuepress/enhanceApp.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/* globals window */
-export default (
-  // eslint-disable-next-line no-empty-pattern
-  {
-    //     Vue, // the version of Vue being used in the VuePress app
-    //     options, // the options for the root Vue instance
-    //     router, // the router instance for the app
-    //     siteData, // site metadata
-  }
-) => {
-  if (typeof window !== 'undefined' && typeof window.process === 'undefined') {
-    window.process = new Proxy(
-      {
-        env: {},
-        cwd: () => ''
-      },
-      {
-        get(target, name) {
-          // For debug
-          // console.log(name)
-          return target[name]
-        }
-      }
-    )
-  }
-}
diff --git a/docs/.vuepress/shim/eslint.js b/docs/.vuepress/shim/eslint.js
deleted file mode 100644
index 08af6dfcd..000000000
--- a/docs/.vuepress/shim/eslint.js
+++ /dev/null
@@ -1,4 +0,0 @@
-const { Linter } = require('eslint/lib/linter')
-module.exports = {
-  Linter
-}
diff --git a/docs/.vuepress/shim/globby.js b/docs/.vuepress/shim/globby.js
deleted file mode 100644
index 4ba52ba2c..000000000
--- a/docs/.vuepress/shim/globby.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = {}
diff --git a/docs/.vuepress/shim/module.js b/docs/.vuepress/shim/module.js
deleted file mode 100644
index cfeccf315..000000000
--- a/docs/.vuepress/shim/module.js
+++ /dev/null
@@ -1,11 +0,0 @@
-module.exports = {
-  createRequire: () => (module) => {
-    if (module === 'espree') {
-      return require('espree')
-    }
-    if (module === 'eslint-scope') {
-      return require('eslint-scope')
-    }
-    throw new Error(`Not implemented: ${module}`)
-  }
-}
diff --git a/docs/.vuepress/styles/index.styl b/docs/.vuepress/styles/index.styl
deleted file mode 100644
index 724c68247..000000000
--- a/docs/.vuepress/styles/index.styl
+++ /dev/null
@@ -1,26 +0,0 @@
-.theme-container.rule-details .theme-default-content > h1 {
-  font-size: 1.8rem;
-
-  + blockquote {
-    margin-top: -15px;
-    padding: 0;
-    border: 0;
-    font-weight: 500;
-    font-size: 1.4rem;
-    color: currentColor;
-
-    ::first-letter {
-      text-transform: uppercase;
-    }
-
-    p {
-      line-height: 1.2;
-    }
-  }
-}
-
-.theme-container.rule-list .theme-default-content
-  max-width: 1280px;
-
-.emoji
-  font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji", "Noto Color Emoji", "Noto Emoji", sans-serif
diff --git a/docs/developer-guide/README.md b/docs/developer-guide/index.md
similarity index 100%
rename from docs/developer-guide/README.md
rename to docs/developer-guide/index.md
diff --git a/docs/README.md b/docs/index.md
similarity index 88%
rename from docs/README.md
rename to docs/index.md
index 96f92a921..f9b1e49f1 100644
--- a/docs/README.md
+++ b/docs/index.md
@@ -16,7 +16,7 @@ ESLint editor integrations are useful to check your code in real-time.
 
 :::warning Status of Vue.js 3.x supports
 This plugin supports the basic syntax of Vue.js 3.2, `<script setup>`, and CSS variable injection, but the ref sugar, an experimental feature of Vue.js 3.2, is not yet supported.  
-If you have issues with these, please also refer to the [FAQ](./user-guide/README.md#does-not-work-well-with-script-setup). If you can't find a solution, search for the issue and if the issue doesn't exist, open a new issue.
+If you have issues with these, please also refer to the [FAQ](./user-guide/index.md#does-not-work-well-with-script-setup). If you can't find a solution, search for the issue and if the issue doesn't exist, open a new issue.
 :::
 
 ## :traffic_light: Versioning policy
diff --git a/docs/rules/README.md b/docs/rules/index.md
similarity index 100%
rename from docs/rules/README.md
rename to docs/rules/index.md
diff --git a/docs/rules/prefer-true-attribute-shorthand.md b/docs/rules/prefer-true-attribute-shorthand.md
index c64f9a8c5..07e566d34 100644
--- a/docs/rules/prefer-true-attribute-shorthand.md
+++ b/docs/rules/prefer-true-attribute-shorthand.md
@@ -54,7 +54,7 @@ export default {
 <MyComponent bool bool-or-string string-or-bool />
 ```
 
-```plain
+```txt
 bool: true (boolean)
 boolOrString: true (boolean)
 stringOrBool: "" (string)
@@ -66,7 +66,7 @@ stringOrBool: "" (string)
 <MyComponent :bool="true" :bool-or-string="true" :string-or-bool="true" />
 ```
 
-```plain
+```txt
 bool: true (boolean)
 boolOrString: true (boolean)
 stringOrBool: true (boolean)
diff --git a/docs/user-guide/README.md b/docs/user-guide/index.md
similarity index 99%
rename from docs/user-guide/README.md
rename to docs/user-guide/index.md
index 31465bd3f..84fc90a6b 100644
--- a/docs/user-guide/README.md
+++ b/docs/user-guide/index.md
@@ -44,7 +44,7 @@ module.exports = {
 }
 ```
 
-See [the rule list](../rules/README.md) to get the `extends` &amp; `rules` that this plugin provides.
+See [the rule list](../rules/index.md) to get the `extends` &amp; `rules` that this plugin provides.
 
 #### Bundle Configurations
 
diff --git a/lib/utils/index.js b/lib/utils/index.js
index b76924deb..d76bb5156 100644
--- a/lib/utils/index.js
+++ b/lib/utils/index.js
@@ -75,7 +75,8 @@ let ruleMap = null
  * @returns {RuleModule | null}
  */
 function getCoreRule(name) {
-  const map = ruleMap || (ruleMap = new (require('eslint').Linter)().getRules())
+  const eslint = require('eslint')
+  const map = ruleMap || (ruleMap = new eslint.Linter().getRules())
   return map.get(name) || null
 }
 
diff --git a/package.json b/package.json
index 554c34f61..f985d47f7 100644
--- a/package.json
+++ b/package.json
@@ -18,9 +18,9 @@
     "preversion": "npm test && git add .",
     "version": "env-cmd -e version npm run update && npm run lint -- --fix && git add .",
     "update": "node ./tools/update.js",
-    "docs:watch": "vuepress dev docs",
+    "docs:watch": "vitepress dev docs",
     "predocs:build": "npm run update",
-    "docs:build": "vuepress build docs"
+    "docs:build": "vitepress build docs"
   },
   "files": [
     "lib"
@@ -63,6 +63,8 @@
     "xml-name-validator": "^4.0.0"
   },
   "devDependencies": {
+    "@originjs/vite-plugin-commonjs": "^1.0.3",
+    "@ota-meshi/site-kit-eslint-editor-vue": "^0.1.0",
     "@types/eslint": "^8.4.2",
     "@types/eslint-visitor-keys": "^1.0.0",
     "@types/natural-compare": "^1.4.1",
@@ -70,9 +72,9 @@
     "@types/semver": "^7.3.9",
     "@types/xml-name-validator": "^4.0.0",
     "@typescript-eslint/parser": "^5.23.0",
-    "@vuepress/plugin-pwa": "^1.9.7",
-    "acorn": "^8.7.1",
+    "assert": "^2.0.0",
     "env-cmd": "^10.1.0",
+    "esbuild": "^0.15.15",
     "eslint": "^8.15.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-eslint-plugin": "^3.5.3",
@@ -83,12 +85,12 @@
     "eslint-plugin-unicorn": "^42.0.0",
     "eslint-plugin-vue": "file:.",
     "espree": "^9.3.2",
+    "events": "^3.3.0",
     "markdownlint-cli": "^0.31.1",
     "mocha": "^10.0.0",
     "nyc": "^15.1.0",
     "prettier": "^2.6.2",
     "typescript": "^4.6.4",
-    "vue-eslint-editor": "^1.1.0",
-    "vuepress": "^1.9.7"
+    "vitepress": "^1.0.0-alpha.29"
   }
 }
diff --git a/tools/lib/categories.js b/tools/lib/categories.js
index 1d8550fb3..e98c442b3 100644
--- a/tools/lib/categories.js
+++ b/tools/lib/categories.js
@@ -9,48 +9,31 @@ const rules = require('./rules')
 
 const categoryTitles = {
   base: {
-    text: 'Base Rules (Enabling Correct ESLint Parsing)',
-    vuepress: 'Base Rules (Enabling Correct ESLint Parsing)'
+    text: 'Base Rules (Enabling Correct ESLint Parsing)'
   },
   'vue3-essential': {
-    text: 'Priority A: Essential (Error Prevention) for Vue.js 3.x',
-    vuepress:
-      'Priority A: Essential (Error Prevention) <badge text="for Vue.js 3.x" vertical="middle">for Vue.js 3.x</badge>'
+    text: 'Priority A: Essential (Error Prevention) for Vue.js 3.x'
   },
   'vue3-strongly-recommended': {
-    text: 'Priority B: Strongly Recommended (Improving Readability) for Vue.js 3.x',
-    vuepress:
-      'Priority B: Strongly Recommended (Improving Readability) <badge text="for Vue.js 3.x" vertical="middle">for Vue.js 3.x</badge>'
+    text: 'Priority B: Strongly Recommended (Improving Readability) for Vue.js 3.x'
   },
   'vue3-recommended': {
-    text: 'Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead) for Vue.js 3.x',
-    vuepress:
-      'Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead) <badge text="for Vue.js 3.x" vertical="middle">for Vue.js 3.x</badge>'
+    text: 'Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead) for Vue.js 3.x'
   },
   'vue3-use-with-caution': {
-    text: 'Priority D: Use with Caution (Potentially Dangerous Patterns) for Vue.js 3.x',
-    vuepress:
-      'Priority D: Use with Caution (Potentially Dangerous Patterns) <badge text="for Vue.js 3.x" vertical="middle">for Vue.js 3.x</badge>'
+    text: 'Priority D: Use with Caution (Potentially Dangerous Patterns) for Vue.js 3.x'
   },
   essential: {
-    text: 'Priority A: Essential (Error Prevention) for Vue.js 2.x',
-    vuepress:
-      'Priority A: Essential (Error Prevention) <badge text="for Vue.js 2.x" vertical="middle" type="warn">for Vue.js 2.x</badge>'
+    text: 'Priority A: Essential (Error Prevention) for Vue.js 2.x'
   },
   'strongly-recommended': {
-    text: 'Priority B: Strongly Recommended (Improving Readability) for Vue.js 2.x',
-    vuepress:
-      'Priority B: Strongly Recommended (Improving Readability) <badge text="for Vue.js 2.x" vertical="middle" type="warn">for Vue.js 2.x</badge>'
+    text: 'Priority B: Strongly Recommended (Improving Readability) for Vue.js 2.x'
   },
   recommended: {
-    text: 'Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead) for Vue.js 2.x',
-    vuepress:
-      'Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead) <badge text="for Vue.js 2.x" vertical="middle" type="warn">for Vue.js 2.x</badge>'
+    text: 'Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead) for Vue.js 2.x'
   },
   'use-with-caution': {
-    text: 'Priority D: Use with Caution (Potentially Dangerous Patterns) for Vue.js 2.x',
-    vuepress:
-      'Priority D: Use with Caution (Potentially Dangerous Patterns) <badge text="for Vue.js 2.x" vertical="middle" type="warn">for Vue.js 2.x</badge>'
+    text: 'Priority D: Use with Caution (Potentially Dangerous Patterns) for Vue.js 2.x'
   }
 }
 const categoryIds = Object.keys(categoryTitles)
diff --git a/tools/update-docs-rules-index.js b/tools/update-docs-rules-index.js
index 3db26c36b..3a5eb600c 100644
--- a/tools/update-docs-rules-index.js
+++ b/tools/update-docs-rules-index.js
@@ -246,7 +246,7 @@ ${removedRules.map(toRemovedRuleRow).join('\n')}
 `
 
 // -----------------------------------------------------------------------------
-const readmeFilePath = path.resolve(__dirname, '../docs/rules/README.md')
+const readmeFilePath = path.resolve(__dirname, '../docs/rules/index.md')
 fs.writeFileSync(
   readmeFilePath,
   `---
diff --git a/tsconfig.json b/tsconfig.json
index 2693acd49..d64b99e1c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -22,5 +22,5 @@
     },
     "skipLibCheck": true
   },
-  "include": ["lib/**/*", "typings/eslint-plugin-vue/global.d.ts"]
+  "include": ["lib/**/*", "typings/eslint-plugin-vue/global.d.ts", "docs/.vitepress/**/*.ts"]
 }