feat: expose isNotFound on PageData, deperecate Theme.NotFound

docs/reference/runtime-api.md

@@ -12,10 +12,25 @@ Returns page-specific data. The returned object has the following type:
 
 ```ts
 interface VitePressData<T = any> {
+  /**
+   * Site-level data
+   */
   site: Ref<SiteData<T>>
+  /**
+   * themeConfig from .vitepress/config.js
+   */
+  theme: Ref<T>
+  /**
+   * Page-level data
+   */
   page: Ref<PageData>
-  theme: Ref<T> // themeConfig from .vitepress/config.js
+  /**
+   * Page frontmatter
+   */
   frontmatter: Ref<PageData['frontmatter']>
+  /**
+   * Dynamic route params
+   */
   params: Ref<PageData['params']>
   title: Ref<string>
   description: Ref<string>
@@ -24,6 +39,18 @@ interface VitePressData<T = any> {
   dir: Ref<string>
   localeIndex: Ref<string>
 }
+
+interface PageData {
+  title: string
+  titleTemplate?: string | boolean
+  description: string
+  relativePath: string
+  headers: Header[]
+  frontmatter: Record<string, any>
+  params?: Record<string, any>
+  isNotFound?: boolean
+  lastUpdated?: number
+}
 ```
 
 **Example:**

src/client/app/components/Content.ts

@@ -10,7 +10,7 @@ export const Content = defineComponent({
     const route = useRoute()
     return () =>
       h(props.as, { style: { position: 'relative' } }, [
-        route.component ? h(route.component) : null
+        route.component ? h(route.component) : '404 Page Not Found'
       ])
   }
 })

src/client/app/data.ts

@@ -19,10 +19,25 @@ import {
 export const dataSymbol: InjectionKey<VitePressData> = Symbol()
 
 export interface VitePressData<T = any> {
+  /**
+   * Site-level info
+   */
   site: Ref<SiteData<T>>
-  page: Ref<PageData>
+  /**
+   * themeConfig from .vitepress/config.js
+   */
   theme: Ref<T>
+  /**
+   * Page-level info
+   */
+  page: Ref<PageData>
+  /**
+   * page frontmatter data
+   */
   frontmatter: Ref<PageData['frontmatter']>
+  /**
+   * dynamic route params
+   */
   params: Ref<PageData['params']>
   title: Ref<string>
   description: Ref<string>

src/client/app/index.ts

@@ -19,8 +19,6 @@ import { ClientOnly } from './components/ClientOnly.js'
 import { useCopyCode } from './composables/copyCode.js'
 import { useCodeGroups } from './composables/codeGroups.js'
 
-const NotFound = Theme.NotFound || (() => '404 Not Found')
-
 const VitePressApp = defineComponent({
   name: 'VitePressApp',
   setup() {
@@ -59,9 +57,6 @@ export async 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)
@@ -127,7 +122,7 @@ function newRouter(): Router {
     }
 
     return import(/*@vite-ignore*/ pageFilePath)
-  }, NotFound)
+  }, Theme.NotFound)
 }
 
 if (inBrowser) {

src/client/app/theme.ts

@@ -10,7 +10,11 @@ export interface EnhanceAppContext {
 
 export interface Theme {
   Layout: Component
-  NotFound?: Component
   enhanceApp?: (ctx: EnhanceAppContext) => Awaitable<void>
   setup?: () => void
+
+  /**
+   * @deprecated Render not found page by checking `useData().page.value.isNotFound` in Layout instead.
+   */
+  NotFound?: Component
 }

src/client/theme-default/components/VPContent.vue

@@ -1,17 +1,15 @@
 <script setup lang="ts">
-import { useRoute } from 'vitepress'
 import { useData } from '../composables/data.js'
 import { useSidebar } from '../composables/sidebar.js'
 import VPPage from './VPPage.vue'
 import VPHome from './VPHome.vue'
 import VPDoc from './VPDoc.vue'
-import { inject } from 'vue'
+import NotFound from '../NotFound.vue'
 
-const route = useRoute()
+const { page, frontmatter } = useData()
-const { frontmatter } = useData()
 const { hasSidebar } = useSidebar()
 
-const NotFound = inject('NotFound')
+console.log(page.value)
 </script>
 
 <template>
@@ -23,7 +21,7 @@ const NotFound = inject('NotFound')
       'is-home': frontmatter.layout === 'home'
     }"
   >
-    <NotFound v-if="route.component === NotFound" />
+    <NotFound v-if="page.isNotFound" />
 
     <VPPage v-else-if="frontmatter.layout === 'page'" />
 

src/client/theme-default/index.ts

@@ -11,7 +11,6 @@ import './styles/components/vp-sponsor.css'
 import type { Theme } from 'vitepress'
 import VPBadge from './components/VPBadge.vue'
 import Layout from './Layout.vue'
-import NotFound from './NotFound.vue'
 
 export { default as VPHomeHero } from './components/VPHomeHero.vue'
 export { default as VPHomeFeatures } from './components/VPHomeFeatures.vue'
@@ -24,7 +23,6 @@ export { default as VPTeamMembers } from './components/VPTeamMembers.vue'
 
 const theme: Theme = {
   Layout,
-  NotFound,
   enhanceApp: ({ app }) => {
     app.component('Badge', VPBadge)
   }

src/shared/shared.ts

@@ -27,7 +27,8 @@ export const notFoundPageData: PageData = {
   description: 'Not Found',
   headers: [],
   frontmatter: { sidebar: false, layout: 'page' },
-  lastUpdated: 0
+  lastUpdated: 0,
+  isNotFound: true
 }
 
 export function isActive(

types/shared.d.ts

@@ -12,6 +12,7 @@ export interface PageData {
   headers: Header[]
   frontmatter: Record<string, any>
   params?: Record<string, any>
+  isNotFound?: boolean
   lastUpdated?: number
 }