diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index f4e3f83f..ca10e3c7 100644
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -44,8 +44,8 @@ function getGuideSidebar() {
       text: 'Advanced',
       children: [
         { text: 'Frontmatter', link: '/guide/frontmatter' },
-        { text: 'Customization', link: '/guide/customization' },
-        { text: 'Global Computed', link: '/guide/global-computed' }
+        { text: 'Global Computed', link: '/guide/global-computed' },
+        { text: 'Customization', link: '/guide/customization' }
       ]
     }
   ]
diff --git a/docs/guide/frontmatter.md b/docs/guide/frontmatter.md
index bc7ad57e..71f28bee 100644
--- a/docs/guide/frontmatter.md
+++ b/docs/guide/frontmatter.md
@@ -9,7 +9,7 @@ editLink: true
 ---
 ```
 
-Between the triple-dashed lines, you can set [predefined variables](#predefined-variables), or even create custom ones of your own. These variables can be used via the <code>\$frontmatter</code> variable.
+Between the triple-dashed lines, you can set [predefined variables](#predefined-variables), or even create custom ones of your own. These variables can be used via the <code>$frontmatter</code> variable.
 
 Here’s an example of how you could use it in your Markdown file:
 
diff --git a/docs/guide/global-computed.md b/docs/guide/global-computed.md
index 0d58f3cb..7221534a 100644
--- a/docs/guide/global-computed.md
+++ b/docs/guide/global-computed.md
@@ -1,57 +1,66 @@
 # Global Computed
 
-In VitePress, some core [computed properties](https://v3.vuejs.org/guide/computed.html#computed-properties) can be used by the default theme or custom themes. Or directly in Markdown pages using vue, for example using `{{ $frontmatter.title }}` to access the title defined in the frontmatter section of the page.
+In VitePress, some core [computed properties](https://v3.vuejs.org/guide/computed.html#computed-properties) can be used by the default theme or custom themes. Or directly in Markdown pages using vue, for example using `$frontmatter.title` to access the title defined in the frontmatter section of the page.
 
 ## $site
 
-This is the `$site` value of the site you’re currently reading:
+This is the `$site` value of the site you're currently reading:
 
-```json
+```js
 {
-  "title": "VitePress",
-  "description": "Vite & Vue powered static site generator.",
-  "lang": "en-US",
-  "locales": {},
-  "base": "/",
-  "head": [],
-  "themeConfig: $themeConfig
+  base: '/',
+  lang: 'en-US',
+  title: 'VitePress',
+  description: 'Vite & Vue powered static site generator.',
+  head: [],
+  locales: {},
+  themeConfig: $themeConfig
+}
+```
+
+## $themeConfig
+
+Refers to `$site.themeConfig`.
+
+```js
+{
+  locales: {},
+  repo: 'vuejs/vitepress',
+  docsDir: 'docs',
+  editLinks: true,
+  editLinkText: 'Edit this page on GitHub',
+  lastUpdated: 'Last Updated',
+  nav: [...],
+  sidebar: { ... }
 }
 ```
 
 ## $page
 
-This is the `$page` value of the page you’re currently reading:
+This is the `$page` value of the page you're currently reading:
 
-```json
+```js
 {
-  "title": "Global Computed",
-  "relativePath": "guide/global-computed.md",
-  "lastUpdated": 1606297645000
-  "headers": [
-    {
-      "level": 2,
-      "title": "$site",
-      "slug": "site"
-    },
-    {
-      "level": 2,
-      "title": "$page",
-      "slug": "$page"
-    },
+  relativePath: 'guide/global-computed.md',
+  title: 'Global Computed',
+  headers: [
+    { level: 2, title: '$site', slug: 'site' },
+    { level: 2, title: '$page', slug: '$page' },
     ...
   ],
-  "frontmatter": $frontmatter,
+  frontmatter: $frontmatter,
+  lastUpdated: 1606297645000
 }
 ```
 
 ## $frontmatter
 
-Reference of [$page](#page).frontmatter.
+Reference of `$page.frontmatter`.
 
-```json
+```js
 {
-  "title": "Docs with VitePress",
-  "editLink": true
+  title: 'Docs with VitePress',
+  editLink: true
 }
 ```
 
@@ -62,52 +71,3 @@ Value of the `<title>` label used for the current page.
 ## $description
 
 The content value of the `<meta name= "description" content= "...">` for the current page.
-
-## $themeConfig
-
-Refers to `$site.themeConfig`.
-
-```json
-{
-  "repo": "vuejs/vitepress",
-  "docsDir": "docs",
-  "locales": {},
-  "editLinks": true,
-  "editLinkText": "Edit this page on GitHub",
-  "lastUpdated": "Last Updated",
-  "nav": [
-    {
-      "text": "Guide",
-      "link": "/"
-    },
-    ...
-  ],
-  "sidebar": {
-    "/": [
-      {
-        "text": "Introduction",
-        "children": [
-          {
-            "text": "What is VitePress?",
-            "link": "/"
-          },
-          ...
-        ]
-      }
-    ],
-    "/guide/": [
-      {
-        "text": "Introduction",
-        "children": [
-          {
-            "text": "What is VitePress?",
-            "link": "/"
-          },
-          ...
-        ]
-      }
-    ],
-    ...
-  },
-}
-```
diff --git a/src/client/app/index.ts b/src/client/app/index.ts
index 0bfc2409..5ae7de79 100644
--- a/src/client/app/index.ts
+++ b/src/client/app/index.ts
@@ -82,6 +82,11 @@ export function createApp() {
         return siteDataByRouteRef.value
       }
     },
+    $themeConfig: {
+      get() {
+        return siteDataByRouteRef.value.themeConfig
+      }
+    },
     $page: {
       get() {
         return router.route.data
@@ -103,11 +108,6 @@ export function createApp() {
           router.route.data.description || siteDataByRouteRef.value.description
         )
       }
-    },
-    $themeConfig: {
-      get() {
-        return siteDataByRouteRef.value.themeConfig
-      }
     }
   })
 
diff --git a/src/client/theme-default/components/NavBarTitle.vue b/src/client/theme-default/components/NavBarTitle.vue
index 58338fda..124560b6 100644
--- a/src/client/theme-default/components/NavBarTitle.vue
+++ b/src/client/theme-default/components/NavBarTitle.vue
@@ -14,15 +14,8 @@
   </a>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script setup lang="ts">
 import { withBase } from '../utils'
-
-export default defineComponent({
-  setup() {
-    return { withBase }
-  }
-})
 </script>
 
 <style scoped>
@@ -37,7 +30,7 @@ export default defineComponent({
 }
 
 .logo {
-  margin-right: 0.75rem;
+  margin-right: .75rem;
   height: 1.3rem;
   vertical-align: bottom;
 }
diff --git a/src/node/markdownToVue.ts b/src/node/markdownToVue.ts
index 0f6279a3..55a48f61 100644
--- a/src/node/markdownToVue.ts
+++ b/src/node/markdownToVue.ts
@@ -109,6 +109,10 @@ const inferTitle = (frontmatter: any, content: string) => {
 }
 
 const inferDescription = (frontmatter: Record<string, any>) => {
+  if (!frontmatter.head) {
+    return ''
+  }
+
   return getHeadMetaContent(frontmatter.head, 'description') || ''
 }
 
@@ -119,8 +123,10 @@ const getHeadMetaContent = (
   if (!head || !head.length) {
     return undefined
   }
+
   const meta = head.find(([tag, attrs = {}]) => {
     return tag === 'meta' && attrs.name === name && attrs.content
   })
+
   return meta && meta[1].content
 }
diff --git a/types/shared.d.ts b/types/shared.d.ts
index df809e41..8ecfea93 100644
--- a/types/shared.d.ts
+++ b/types/shared.d.ts
@@ -24,11 +24,11 @@ export type HeadConfig =
   | [string, Record<string, string>, string]
 
 export interface PageData {
+  relativePath: string
   title: string
   description: string
-  frontmatter: Record<string, any>
   headers: Header[]
-  relativePath: string
+  frontmatter: Record<string, any>
   lastUpdated: number
 }