diff --git a/src/client/app/index.ts b/src/client/app/index.ts
index 59112249..c7d0e2e3 100644
--- a/src/client/app/index.ts
+++ b/src/client/app/index.ts
@@ -55,6 +55,9 @@ export function createApp() {
   const data = initData(router.route)
   app.provide(dataSymbol, data)
 
+  // provide this to avoid circular dependency in VPContent
+  app.provide('NotFound', NotFound)
+
   // install global components
   app.component('Content', Content)
   app.component('ClientOnly', ClientOnly)
diff --git a/src/client/theme-default/components/VPContent.vue b/src/client/theme-default/components/VPContent.vue
index a5af7d3b..35a27b77 100644
--- a/src/client/theme-default/components/VPContent.vue
+++ b/src/client/theme-default/components/VPContent.vue
@@ -2,16 +2,16 @@
 import { useRoute, useData } from 'vitepress'
 import { useCopyCode } from '../composables/copy-code.js'
 import { useSidebar } from '../composables/sidebar.js'
-import Theme from '@theme/index'
 import VPPage from './VPPage.vue'
 import VPHome from './VPHome.vue'
 import VPDoc from './VPDoc.vue'
+import { inject } from 'vue'
 
 const route = useRoute()
 const { frontmatter } = useData()
 const { hasSidebar } = useSidebar()
 
-const NotFound = Theme.NotFound || (() => '404 Not Found')
+const NotFound = inject('NotFound')
 
 useCopyCode()
 </script>