diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index e085cbbe..a504fee1 100644
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -53,6 +53,7 @@ function getGuideSidebar() {
         { text: 'Configuration', link: '/guide/configuration' },
         { text: 'Asset Handling', link: '/guide/assets' },
         { text: 'Markdown Extensions', link: '/guide/markdown' },
+        { text: 'Using Vue in Markdown', link: '/guide/using-vue' },
         { text: 'Deploying', link: '/guide/deploy' }
       ]
     },
diff --git a/docs/components/ComponentInHeader.vue b/docs/components/ComponentInHeader.vue
new file mode 100644
index 00000000..3999e16a
--- /dev/null
+++ b/docs/components/ComponentInHeader.vue
@@ -0,0 +1,3 @@
+<template>
+  <span>&#x26A1;</span>
+</template>
\ No newline at end of file
diff --git a/docs/guide/global-component.md b/docs/guide/global-component.md
index 8ce0f7b5..0c10861b 100644
--- a/docs/guide/global-component.md
+++ b/docs/guide/global-component.md
@@ -26,3 +26,8 @@ If you are using or demoing components that are not SSR-friendly (for example, c
   <NonSSRFriendlyComponent />
 </ClientOnly>
 ```
+
+## OutboundLink
+
+The indicator `OutboundLink` is used to denote external links. In VitePress, this component has been followed by every external link.
+
diff --git a/docs/guide/using-vue.md b/docs/guide/using-vue.md
new file mode 100644
index 00000000..daa70775
--- /dev/null
+++ b/docs/guide/using-vue.md
@@ -0,0 +1,249 @@
+# Using Vue in Markdown
+
+## Browser API Access Restrictions
+
+Because VitePress applications are server-rendered in Node.js when generating static builds, any Vue usage must conform to the [universal code requirements](https://ssr.vuejs.org/en/universal.html). In short, make sure to only access Browser / DOM APIs in `beforeMount` or `mounted` hooks.
+
+If you are using or demoing components that are not SSR-friendly (for example, contain custom directives), you can wrap them inside the built-in `<ClientOnly>` component:
+
+``` md
+<ClientOnly>
+  <NonSSRFriendlyComponent/>
+</ClientOnly>
+```
+
+Note this does not fix components or libraries that access Browser APIs **on import**. To use code that assumes a browser environment on import, you need to dynamically import them in proper lifecycle hooks:
+
+``` vue
+<script>
+export default {
+  mounted () {
+    import('./lib-that-access-window-on-import').then(module => {
+      // use code
+    })
+  }
+}
+</script>
+```
+
+If your module `export default` a Vue component, you can register it dynamically:
+
+```vue
+<template>
+  <component v-if="dynamicComponent" :is="dynamicComponent"></component>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dynamicComponent: null
+    }
+  },
+
+  mounted () {
+    import('./lib-that-access-window-on-import').then(module => {
+      this.dynamicComponent = module.default
+    })
+  }
+}
+</script>
+```
+
+**Also see:**
+
+- [Vue.js > Dynamic Components](https://v3.vuejs.org/guide/component-dynamic-async.html)
+
+
+## Templating
+
+### Interpolation
+
+Each Markdown file is first compiled into HTML and then passed on as a Vue component to the Vite process pipeline. This means you can use Vue-style interpolation in text:
+
+**Input**
+
+``` md
+{{ 1 + 1 }}
+```
+
+**Output**
+
+<div class="language-text"><pre><code>{{ 1 + 1 }}</code></pre></div>
+
+### Directives
+
+Directives also work:
+
+**Input**
+
+``` md
+<span v-for="i in 3">{{ i }} </span>
+```
+
+**Output**
+
+<div class="language-text"><pre><code><span v-for="i in 3">{{ i }} </span></code></pre></div>
+
+### Access to Site & Page Data
+
+The compiled component has access to the [site metadata and computed properties](./global-computed.md). For example:
+
+**Input**
+
+``` md
+{{ $page }}
+```
+
+**Output**
+
+``` json
+{
+  "path": "/using-vue.html",
+  "title": "Using Vue in Markdown",
+  "frontmatter": {}
+}
+```
+
+## Escaping
+
+By default, fenced code blocks are automatically wrapped with `v-pre`. To display raw mustaches or Vue-specific syntax inside inline code snippets or plain text, you need to wrap a paragraph with the `v-pre` custom container:
+
+**Input**
+
+``` md
+::: v-pre
+`{{ This will be displayed as-is }}`
+:::
+```
+
+**Output**
+
+::: v-pre
+`{{ This will be displayed as-is }}`
+:::
+
+## Using Components
+
+When you need to have more flexibility, VitePress allows you to extend your authoring toolbox with your own Vue Components.
+
+### Importing components in markdown
+
+If your components are going to be used in only a few places, the recommended way to use them is to importing the components in the file where it is used. 
+
+```md
+# Docs
+
+This is a .md using a custom component
+
+<CustomComponent />
+
+## More docs
+
+...
+
+<script setup>
+import CustomComponent from '../components/CustomComponent.vue'
+</script>
+```
+
+### Registering global components in the theme
+
+If the components are going to be used across several pages in the docs, they can be registered globally in the theme (or as part of extending the default VitePress theme). Check out the [Customization Guide](./customization.md) for more information.
+
+In `.vitepress/theme/index.js`, the `enhanceApp` function receives the Vue `app` instance so you can [register components](https://v3.vuejs.org/guide/component-registration.html#component-registration) as you would do in a regular Vue application.
+
+```js
+import DefaultTheme from 'vitepress/theme'
+
+export default {
+  ...DefaultTheme,
+  enhanceApp({ app }) {
+    app.component('VueClickAwayExample', VueClickAwayExample)
+  }
+}
+```
+
+Later in your markdown files, the component can be interleaved between the content
+
+```md
+# Vue Click Away
+
+<VueClickAwayExample />
+```
+
+::: warning IMPORTANT
+Make sure a custom component’s name either contains a hyphen or is in PascalCase. Otherwise, it will be treated as an inline element and wrapped inside a `<p>` tag, which will lead to hydration mismatch because `<p>` does not allow block elements to be placed inside it.
+:::
+
+### Using Components In Headers <ComponentInHeader />
+
+You can use Vue components in the headers, but note the difference between the following syntaxes:
+
+| Markdown | Output HTML | Parsed Header |
+|--------|-------------|----------------|
+| <pre v-pre><code> # text &lt;Tag/&gt; </code></pre> | `<h1>text <Tag/></h1>` | `text` |
+| <pre v-pre><code> # text \`&lt;Tag/&gt;\` </code></pre> | `<h1>text <code>&lt;Tag/&gt;</code></h1>` | `text <Tag/>` |
+
+The HTML wrapped by `<code>` will be displayed as-is; only the HTML that is **not** wrapped will be parsed by Vue.
+
+::: tip
+The output HTML is accomplished by [markdown-it](https://github.com/markdown-it/markdown-it), while the parsed headers are handled by VitePress (and used for both the sidebar and document title).
+:::
+
+## Using CSS Pre-processors
+
+VitePress has [built-in support](https://vitejs.dev/guide/features.html#css-pre-processors) for CSS pre-processors: `.scss`, `.sass`, `.less`, `.styl` and `.stylus` files. There is no need to install Vite-specific plugins for them, but the corresponding pre-processor itself must be installed:
+
+```
+# .scss and .sass
+npm install -D sass
+
+# .less
+npm install -D less
+
+# .styl and .stylus
+npm install -D stylus
+```
+
+Then you can use the following in Markdown and theme components:
+
+``` vue
+<style lang="sass">
+.title
+  font-size: 20px
+</style>
+```
+
+## Script & Style Hoisting
+
+Sometimes you may need to apply some JavaScript or CSS only to the current page. In those cases, you can directly write root-level `<script>` or `<style>` blocks in the Markdown file. These will be hoisted out of the compiled HTML and used as the `<script>` and `<style>` blocks for the resulting Vue single-file component:
+
+<p class="demo" :class="$style.example"></p>
+
+<style module>
+.example {
+  color: #41b883;
+}
+</style>
+
+<script>
+import ComponentInHeader from '../components/ComponentInHeader.vue'
+
+export default {
+  props: ['slot-key'],
+  components: { ComponentInHeader },
+  mounted () {
+    document.querySelector(`.${this.$style.example}`)
+      .textContent = 'This is rendered by inline script and styled by inline CSS'
+  }
+}
+</script>
+
+## Built-In Components
+
+VitePress provides Built-In Vue Components like `ClientOnly` and `OutboundLink`, check out the [Global Component Guide](./global-component.md) for more information.
+
+**Also see:**
+
+- [Using Components In Headers](#using-components-in-headers)
\ No newline at end of file
diff --git a/package.json b/package.json
index ae1c0850..ef5118b4 100644
--- a/package.json
+++ b/package.json
@@ -87,7 +87,7 @@
     "polka": "^0.5.2",
     "prismjs": "^1.23.0",
     "sirv": "^1.0.11",
-    "vite": "^2.0.0-beta.70",
+    "vite": "^2.0.5",
     "vue": "^3.0.5"
   },
   "devDependencies": {
diff --git a/src/client/theme-default/components/NavBar.vue b/src/client/theme-default/components/NavBar.vue
index cdcf84f8..2a5f52ec 100644
--- a/src/client/theme-default/components/NavBar.vue
+++ b/src/client/theme-default/components/NavBar.vue
@@ -36,7 +36,7 @@ defineEmit(['toggle'])
   border-bottom: 1px solid var(--c-divider);
   padding: 0.7rem 1.5rem 0.7rem 4rem;
   height: var(--header-height);
-  background-color: inherit;
+  background-color: var(--c-bg);
 }
 
 @media (min-width: 720px) {
diff --git a/yarn.lock b/yarn.lock
index 4cc35a04..83a26957 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2265,10 +2265,10 @@ es-to-primitive@^1.2.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
-esbuild@^0.8.34:
-  version "0.8.42"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.8.42.tgz#26101cf17fe4c4602c7c767e3177cf0c538073ac"
-  integrity sha512-zUtj5RMqROCCCH0vV/a7cd8YQg8I0GWBhV3A3PklWRT+oM/YwVbnrtFnITzE1otGdnXplWHWdZ4OcYiV0PN+JQ==
+esbuild@^0.8.52:
+  version "0.8.54"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.8.54.tgz#2f32ff80e95c69a0f25b799d76a27c05e2857cdf"
+  integrity sha512-DJH38OiTgXJxFb/EhHrCrY8eGmtdkTtWymHpN9IYN9AF+4jykT0dQArr7wzFejpVbaB0TMIq2+vfNRWr3LXpvw==
 
 escape-html@^1.0.3:
   version "1.0.3"
@@ -6090,12 +6090,12 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
-vite@^2.0.0-beta.70:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-2.0.0.tgz#156f35eadaa7947629aa8a24eb23129b07116ee3"
-  integrity sha512-rNli5g0DaQ6+btlRqkmaR06neWaJGApmt40gocqrYDNi2XoEXYQgKiHSWzMeUgc1Cdva2HduqazaE+RaKjBpdQ==
+vite@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-2.0.5.tgz#ac46857a3fa8686d077921e61bd48a986931df1d"
+  integrity sha512-QTgEDbq1WsTtr6j+++ewjhBFEk6c8v0xz4fb/OWJQKNYU8ZZtphOshwOqAlnarSstPBtWCBR0tsugXx6ajfoUg==
   dependencies:
-    esbuild "^0.8.34"
+    esbuild "^0.8.52"
     postcss "^8.2.1"
     resolve "^1.19.0"
     rollup "^2.38.5"