feat: provide docs for built-in composables

packages/devtools/client/components/CodeSnippets.vue

@@ -39,17 +39,16 @@ watchEffect(() => {
         :lines="false"
         w-full of-auto p3
       />
-      <div flex="~ gap-2" px3 pb2>
+      <div flex="~ gap-2" px3 pb3 n="sm primary">
         <NButton
-          icon="carbon-copy" n="sm primary"
-          my1 px-3 @click="copy(selected!.code)"
+          icon="carbon-copy"
+          @click="copy(selected!.code)"
         >
           Copy
         </NButton>
         <NButton
           v-if="selected?.docs" :to="selected.docs" target="_blank"
-          icon="carbon-catalog" n="sm primary"
-          my1 px-3
+          icon="carbon-catalog"
         >
           Docs
         </NButton>

packages/devtools/client/components/ComposableItem.vue

@@ -12,6 +12,15 @@ const copy = useCopy()
 const name = computed(() => props.item.as || props.item.name)
 const usageCount = computed(() => props.metadata?.injectionUsage?.[name.value]?.count || 0)
 const modules = computed(() => props.metadata?.injectionUsage?.[name.value]?.moduleIds || [])
+
+const docsUrl = computed(() => {
+  if (props.item.meta?.docsUrl)
+    return props.item.meta.docsUrl
+  if (['nuxt', '#app', 'nuxt3'].includes(props.item.from))
+    return (ComposablesDocs.nuxt as any)[props.item.name]
+  if (props.item.from === 'vue')
+    return (ComposablesDocs.vue as any)[props.item.name]
+})
 </script>
 
 <template>
@@ -35,18 +44,18 @@ const modules = computed(() => props.metadata?.injectionUsage?.[name.value]?.mod
             :markdown="item.meta.description"
           />
           <div flex="~ gap2" n="primary xs">
-            <NButton n-solid @click="copy(name)">
+            <NButton icon="carbon-copy" @click="copy(name)">
               Copy
             </NButton>
-            <NButton v-if="filepath" n-solid @click="filepath && openInEditor(filepath)">
+            <NButton v-if="filepath" icon="carbon-code" @click="filepath && openInEditor(filepath)">
               Source
             </NButton>
-            <NButton v-if="item.meta?.docsUrl" n-solid :to="item.meta?.docsUrl" target="_blank">
+            <NButton v-if="docsUrl" icon="carbon-catalog" :to="docsUrl" target="_blank">
               Docs
             </NButton>
           </div>
         </div>
-        <div border="t base" px4 py3>
+        <div border="t base" max-h-60 of-auto px4 py3>
           <template v-if="usageCount">
             <div text-sm>
               <span op50>It has been referenced </span><strong text-primary>{{ usageCount }}</strong><span op50> times by:</span>

packages/devtools/client/components/ServerRouteDetails.vue

@@ -153,14 +153,14 @@ ${items.join(',\n').split('\n').map(line => `  ${line}`).join('\n')}
   snippets.push({
     name: 'useFetch',
     lang: 'javascript',
-    docs: 'https://nuxt.com/docs/api/composables/use-fetch',
+    docs: ComposablesDocs.nuxt.useFetch,
     code: `const { data, pending, error, refresh } = useFetch('${finalPath.value}'${options})`,
   })
 
   snippets.push({
     name: '$fetch',
     lang: 'javascript',
-    docs: 'https://nuxt.com/docs/api/utils/dollarfetch#fetch',
+    docs: ComposablesDocs.nuxt.$fetch,
     code: `await $fetch('${finalPath.value}'${options})`,
   })
 
@@ -284,7 +284,10 @@ const methods = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'HEAD']
         </NButton>
       </div>
       <div>
-        <NButton icon="carbon:add" @click="currentParams!.push({ key: '', value: '' })">
+        <NButton
+          icon="carbon-add" n="sm primary"
+          my1 px-3 @click="currentParams!.push({ key: '', value: '' })"
+        >
           Add
         </NButton>
       </div>

packages/devtools/client/composables/constants.ts

@@ -1 +1,54 @@
 export const DETAILS_MAX_ITEMS = 20
+
+export const ComposablesDocs = {
+  nuxt: {
+    // composables
+    useAppConfig: 'https://nuxt.com/docs/api/composables/use-app-config',
+    useAsyncData: 'https://nuxt.com/docs/api/composables/use-async-data',
+    useCookie: 'https://nuxt.com/docs/api/composables/use-cookie',
+    useError: 'https://nuxt.com/docs/api/composables/use-error',
+    useFetch: 'https://nuxt.com/docs/api/composables/use-fetch',
+    useHead: 'https://nuxt.com/docs/api/composables/use-head',
+    useHeadSafe: 'https://nuxt.com/docs/api/composables/use-head-safe',
+    useLazyAsyncData: 'https://nuxt.com/docs/api/composables/use-lazy-async-data',
+    useLazyFetch: 'https://nuxt.com/docs/api/composables/use-lazy-fetch',
+    useNuxtApp: 'https://nuxt.com/docs/api/composables/use-nuxt-app',
+    useRoute: 'https://nuxt.com/docs/api/composables/use-route',
+    useRouter: 'https://nuxt.com/docs/api/composables/use-router',
+    useRuntimeConfig: 'https://nuxt.com/docs/api/composables/use-runtime-config',
+    useState: 'https://nuxt.com/docs/api/composables/use-state',
+
+    // utils
+    $fetch: 'https://nuxt.com/docs/api/utils/dollarfetch',
+    abortNavigation: 'https://nuxt.com/docs/api/utils/abort-navigation',
+    createError: 'https://nuxt.com/docs/api/utils/create-error',
+    defineNuxtComponent: 'https://nuxt.com/docs/api/utils/define-nuxt-component',
+    definePageMeta: 'https://nuxt.com/docs/api/utils/define-page-meta',
+    navigateTo: 'https://nuxt.com/docs/api/utils/navigate-to#navigateto',
+    onBeforeRouteLeave: 'https://nuxt.com/docs/api/utils/on-before-route-leave',
+    onBeforeRouteUpdate: 'https://nuxt.com/docs/api/utils/on-before-route-update',
+    updateAppConfig: 'https://nuxt.com/docs/api/utils/update-app-config',
+  },
+  vue: {
+    // reactivity
+    ref: 'https://vuejs.org/api/reactivity-core.html#ref',
+    computed: 'https://vuejs.org/api/reactivity-core.html#computed',
+    reactive: 'https://vuejs.org/api/reactivity-core.html#reactive',
+    watch: 'https://vuejs.org/api/reactivity-core.html#watch',
+    watchEffect: 'https://vuejs.org/api/reactivity-core.html#watcheffect',
+    watchPostEffect: 'https://vuejs.org/api/reactivity-core.html#watchposteffect',
+    watchSyncEffect: 'https://vuejs.org/api/reactivity-core.html#watchsynceffect',
+
+    // lifecycle
+    onMounted: 'https://vuejs.org/api/composition-api-lifecycle.html#onmounted',
+    onUnmounted: 'https://vuejs.org/api/composition-api-lifecycle.html#onunmounted',
+    onActivated: 'https://vuejs.org/api/composition-api-lifecycle.html#onactivated',
+    onDeactivated: 'https://vuejs.org/api/composition-api-lifecycle.html#ondeactivated',
+    onBeforeMount: 'https://vuejs.org/api/composition-api-lifecycle.html#onbeforemount',
+    onBeforeUnmount: 'https://vuejs.org/api/composition-api-lifecycle.html#onbeforeunmount',
+    onUpdated: 'https://vuejs.org/api/composition-api-lifecycle.html#onupdated',
+    onBeforeUpdate: 'https://vuejs.org/api/composition-api-lifecycle.html#onbeforeupdate',
+
+    nextTick: 'https://vuejs.org/api/general.html#nexttick',
+  },
+}