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++
  }