feat: show docs link for components

Author: antfu

packages/devtools/client/components/ComponentDetails.vue

@@ -19,12 +19,23 @@ const copy = useCopy()
 
 <template>
   <div flex="~ col gap1" items-start of-hidden>
-    <div flex="~ gap2" px3>
+    <div flex="~ gap2 items-center" px3>
       <ComponentName :component="component" />
       <NButton
-        title="Copy name" flex-none icon="carbon-copy" :border="false"
+        v-if="component.meta?.docs && typeof component.meta.docs === 'string'"
+        title="Open docs" flex-none n="xs"
+        :to="component.meta.docs" target="_blank"
+        icon="carbon-catalog"
+      >
+        Docs
+      </NButton>
+      <NButton
+        title="Copy name" flex-none n="xs"
+        icon="carbon-copy"
         @click="copy(`<${name}></${name}>`, 'component-name')"
-      />
+      >
+        Copy
+      </NButton>
       <NBadge
         v-if="component.global"
         n="green"

packages/devtools/client/components/ComponentItem.vue

@@ -28,7 +28,7 @@ const filePath = computed(() => props.component.filePath || props.component.file
           :component="component"
           :dependencies="dependencies"
           :dependents="dependents"
-          w-100 pt4
+          w-100 pt3
         />
       </template>
     </VDropdown>

packages/devtools/client/components/ComponentsGraph.vue

@@ -291,7 +291,7 @@ function setFilter() {
       border="t l base" w-80
       @close="onCloseDrawer"
     >
-      <div v-if="selected && selected.component" py4 pt4 flex="~ col">
+      <div v-if="selected && selected.component" py4 pt3 flex="~ col">
         <ComponentDetails
           :component="selected.component"
           :dependencies="selectedDependencies"

packages/devtools/client/components/ComponentsList.vue

@@ -24,6 +24,23 @@ const componentWithRelationships = computed(() => {
   return components
 })
 
+const builtinComponentDocs = {
+  ClientOnly: 'https://nuxt.com/docs/api/components/client-only',
+  DevOnly: 'https://nuxt.com/docs/api/components/dev-only',
+  NuxtClientFallback: 'https://nuxt.com/docs/api/components/nuxt-client-fallback',
+  NuxtPicture: 'https://nuxt.com/docs/api/components/nuxt-picture',
+  NuxtRouteAnnouncer: 'https://nuxt.com/docs/api/components/nuxt-route-announcer',
+  NuxtTime: 'https://nuxt.com/docs/api/components/nuxt-time',
+  NuxtPage: 'https://nuxt.com/docs/api/components/nuxt-page',
+  NuxtLayout: 'https://nuxt.com/docs/api/components/nuxt-layout',
+  NuxtLink: 'https://nuxt.com/docs/api/components/nuxt-link',
+  NuxtLoadingIndicator: 'https://nuxt.com/docs/api/components/nuxt-loading-indicator',
+  NuxtErrorBoundary: 'https://nuxt.com/docs/api/components/nuxt-error-boundary',
+  NuxtWelcome: 'https://nuxt.com/docs/api/components/nuxt-welcome',
+  NuxtIsland: 'https://nuxt.com/docs/api/components/nuxt-island',
+  NuxtImg: 'https://nuxt.com/docs/api/components/nuxt-img',
+}
+
 const fuse = computed(() => new Fuse(componentWithRelationships.value, {
   keys: [
     'component.pascalName',
@@ -57,6 +74,8 @@ const filtered = computed(() => {
         if (!name)
           return
         if (name === 'nuxt') {
+          c.meta ??= {}
+          c.meta.docs ??= builtinComponentDocs?.[c.pascalName as keyof typeof builtinComponentDocs]
           builtin.push(component)
           count.builtin++
         }