diff --git a/src/client/theme-default/components/NavBar.ts b/src/client/theme-default/components/NavBar.ts
index e41aa966e6a2..3e706e693ba9 100644
--- a/src/client/theme-default/components/NavBar.ts
+++ b/src/client/theme-default/components/NavBar.ts
@@ -1,4 +1,5 @@
 import { computed } from 'vue'
+import { withBase } from '../utils'
 import { useSiteDataByRoute } from 'vitepress'
 import NavBarLink from './NavBarLink.vue'
 import NavDropdownLink from './NavDropdownLink.vue'
@@ -11,6 +12,7 @@ export default {
 
   setup() {
     return {
+      withBase,
       navData:
         process.env.NODE_ENV === 'production'
           ? // navbar items do not change in production