diff --git a/src/client/app/data.ts b/src/client/app/data.ts
index 9f9c968d..682e5e32 100644
--- a/src/client/app/data.ts
+++ b/src/client/app/data.ts
@@ -3,18 +3,19 @@ import { Route } from './router'
 import { PageData, SiteData } from '/@types/shared'
 import serializedSiteData from '@siteData'
 import { resolveSiteDataByRoute } from '../shared/config'
+import { withBase } from './utils'
 
 export const dataSymbol: InjectionKey<VitePressData> = Symbol()
 
 export interface VitePressData {
   site: Ref<SiteData>
-  theme: Ref<any>
   page: Ref<PageData>
-  frontmatter: Ref<any>
-  lang: Ref<string>
-  localePath: Ref<string>
+  theme: Ref<any>
+  frontmatter: Ref<PageData['frontmatter']>
   title: Ref<string>
   description: Ref<string>
+  lang: Ref<string>
+  localePath: Ref<string>
 }
 
 // site data is a singleton
@@ -48,7 +49,7 @@ export function initData(route: Route): VitePressData {
     localePath: computed(() => {
       const { locales, lang } = site.value
       const path = Object.keys(locales).find((lp) => locales[lp].lang === lang)
-      return (locales && path) || '/'
+      return withBase((locales && path) || '/')
     }),
     title: computed(() => {
       return route.data.title
diff --git a/src/client/app/index.ts b/src/client/app/index.ts
index cdf36fe9..3065c813 100644
--- a/src/client/app/index.ts
+++ b/src/client/app/index.ts
@@ -70,6 +70,13 @@ export function createApp() {
       : defineAsyncComponent(() => import('./components/Debug.vue'))
   )
 
+  // expose $frontmatter
+  Object.defineProperty(app.config.globalProperties, '$frontmatter', {
+    get() {
+      return data.frontmatter.value
+    }
+  })
+
   if (Theme.enhanceApp) {
     Theme.enhanceApp({
       app,
diff --git a/src/client/app/theme.ts b/src/client/app/theme.ts
index 6559a5d7..09e4ae3b 100644
--- a/src/client/app/theme.ts
+++ b/src/client/app/theme.ts
@@ -1,4 +1,4 @@
-import { App, Ref, ComponentOptions } from 'vue'
+import { App, Ref, Component } from 'vue'
 import { Router } from './router'
 import { SiteData } from '../../../types/shared'
 
@@ -9,7 +9,7 @@ export interface EnhanceAppContext {
 }
 
 export interface Theme {
-  Layout: ComponentOptions
-  NotFound?: ComponentOptions
+  Layout: Component
+  NotFound?: Component
   enhanceApp?: (ctx: EnhanceAppContext) => void
 }
diff --git a/src/client/index.ts b/src/client/index.ts
index ea1925cc..9beeca3c 100644
--- a/src/client/index.ts
+++ b/src/client/index.ts
@@ -12,7 +12,7 @@ export { useData } from './app/data'
 export { useRouter, useRoute } from './app/router'
 
 // utilities
-export { inBrowser, joinPath, withBase } from './app/utils'
+export { inBrowser, withBase } from './app/utils'
 
 // components
 export { Content } from './app/components/Content'
diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
index 178d9897..f7a18584 100644
--- a/src/client/theme-default/Layout.vue
+++ b/src/client/theme-default/Layout.vue
@@ -27,9 +27,9 @@ const route = useRoute()
 const { site, page, theme, frontmatter } = useData()
 
 // custom layout
-const isCustomLayout = computed(() => !!route.data.frontmatter.customLayout)
+const isCustomLayout = computed(() => !!frontmatter.value.customLayout)
 // home
-const enableHome = computed(() => !!route.data.frontmatter.home)
+const enableHome = computed(() => !!frontmatter.value.home)
 
 // navbar
 const showNavbar = computed(() => {
diff --git a/src/client/theme-default/components/NavBarTitle.vue b/src/client/theme-default/components/NavBarTitle.vue
index 05aab695..4bfcbb1d 100644
--- a/src/client/theme-default/components/NavBarTitle.vue
+++ b/src/client/theme-default/components/NavBarTitle.vue
@@ -6,7 +6,7 @@ const { site, theme, localePath } = useData()
 <template>
   <a
     class="nav-bar-title"
-    :href="withBase(localePath)"
+    :href="localePath"
     :aria-label="`${site.title}, back to home`"
   >
     <img