docs: show 404 for non-existent api pages

Author: KaelWD

packages/docs/src/components/api/View.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
   import type { PartData } from '@vuetify/api-generator/src/types'
+  import DefaultLayout from '@/layouts/default.vue'
+  import ErrorLayout from '@/layouts/404.vue'
 
   const emit = defineEmits(['update:name'])
 
   const sections = ['props', 'events', 'slots', 'exposed', 'sass', 'argument', 'modifiers', 'value'] as const
 
   const route = useRoute()
 
+  const error = ref(false)
   const name = computed(() => {
     const name = route.params.name as string
     if (name.endsWith('-directive')) return name.replace('-directive', '')
@@ -16,7 +19,12 @@
   const component = shallowRef<any>({})
   watch(name, async () => {
     emit('update:name', name.value)
-    component.value = await getApi(name.value)
+    try {
+      component.value = await getApi(name.value)
+      error.value = false
+    } catch (err) {
+      error.value = true
+    }
   }, { immediate: true })
 
   function getApi (name: string): Promise<{ default: PartData }> {
@@ -25,11 +33,17 @@
 </script>
 
 <template>
-  <template v-for="section of sections" :key="section">
-    <ApiSection
-      v-if="section in component && Object.keys(component[section]).length"
-      :name="name"
-      :section="section"
-    />
-  </template>
+  <ErrorLayout v-if="error" />
+  <DefaultLayout v-else>
+    <template #view>
+      <slot />
+      <template v-for="section of sections" :key="section">
+        <ApiSection
+          v-if="section in component && Object.keys(component[section]).length"
+          :name="name"
+          :section="section"
+        />
+      </template>
+    </template>
+  </DefaultLayout>
 </template>

packages/docs/src/layouts/default.vue

@@ -20,13 +20,15 @@
           tag="section"
           fluid
         >
-          <router-view v-slot="{ Component }">
-            <v-fade-transition hide-on-leave>
-              <div :key="route.name">
-                <component :is="Component" />
-              </div>
-            </v-fade-transition>
-          </router-view>
+          <slot name="view">
+            <router-view v-slot="{ Component }">
+              <v-fade-transition hide-on-leave>
+                <div :key="route.name">
+                  <component :is="Component" />
+                </div>
+              </v-fade-transition>
+            </router-view>
+          </slot>
 
           <Backmatter v-if="hasBackmatter" :key="route.name" />
         </v-container>

packages/docs/src/pages/en/api/[name].md

@@ -1,4 +1,5 @@
 ---
+layout: blank
 meta:
   title: API
   description: API documentation
@@ -9,6 +10,8 @@ meta:
   const name = shallowRef('')
 </script>
 
+<ApiView v-on:update:name="name = $event">
+
 # {{ name }} API
 
 <PageFeatures />
@@ -19,4 +22,4 @@ meta:
 
 <ApiSearch />
 
-<ApiView v-on:update:name="name = $event" />
+</ApiView>