fix(devtools): update client for unhead v3 and restore $fetch types (#1077)

Author: antfu

packages/devtools/client/components/OpenGraphMissingTabs.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-importtype { MetaFlatInput } from'@unhead/schema'
-importtype { ReactiveHead } from'@unhead/vue'
+importtype { MetaFlatInput, ReactiveHead } from'@unhead/vue'
 importtype { NormalizedHeadTag } from'../../src/types'
 import { defu } from'defu'
 import { computed, ref } from'vue'

packages/devtools/client/composables/client.ts

@@ -1,5 +1,5 @@
 importtype{NuxtDevtoolsClient,NuxtDevtoolsHostClient,NuxtDevtoolsIframeClient}from'@nuxt/devtools-kit/types'
-importtype{Unhead}from'@unhead/schema'
+importtype{Unhead}from'@unhead/vue'
 importtype{ComputedRef}from'vue'
 importtype{useRoute,useRouter}from'#imports'
 import{useColorMode}from'@vueuse/core'

packages/devtools/client/composables/state-commands.ts

@@ -1,3 +1,4 @@
+importtype{$Fetch}from'ofetch'
 importtype{MaybeRefOrGetter}from'vue'
 import{randomStr}from'@antfu/utils'
 import{computed,onUnmounted,reactive,toValue}from'vue'
@@ -77,7 +78,7 @@ let _nuxtDocsCommands: CommandItem[] | undefined
 
 exportasyncfunctiongetNuxtDocsCommands(){
 if(!_nuxtDocsCommands){
-constlist=await$fetch<any[]>('https://nuxt.com/api/search.json',{
+constlist=await($fetchas$Fetch)<any[]>('https://nuxt.com/api/search.json',{
 query: {
 select: '_path,title,description,navigation',
 },

packages/devtools/client/composables/state-modules.ts

@@ -1,3 +1,4 @@
+importtype{$Fetch}from'ofetch'
 importtype{InstalledModuleInfo,ModuleStaticInfo}from'../../src/types'
 import{computed}from'vue'
 import{$fetch,useState}from'#imports'
@@ -16,7 +17,7 @@ const ignoredModules = [
 
 exportfunctionuseModulesList(){
 returnuseAsyncState('getModulesList',async()=>{
-constm=await$fetch<{modules: ModuleStaticInfo[]}>('https://api.nuxt.com/modules?version=3')
+constm=await($fetchas$Fetch)<{modules: ModuleStaticInfo[]}>('https://api.nuxt.com/modules?version=3')
 returnm.modules
 .filter((item: ModuleStaticInfo)=>!ignoredModules.includes(item.npm)&&item.compatibility.nuxt.includes('>=3'))
 })

packages/devtools/client/data/open-graph.ts

@@ -1,5 +1,4 @@
-importtype{MetaFlatInput}from'@unhead/schema'
-importtype{ReactiveHead}from'@unhead/vue'
+importtype{MetaFlatInput,ReactiveHead}from'@unhead/vue'
 
 exportinterfaceOpenGraphTagDefine{
 name: string

packages/devtools/client/pages/modules/open-graph.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
+importtype { HeadTag, Unhead } from'@unhead/vue'
 importtype { NormalizedHeadTag } from'~/../src/types/ui-state'
+import { resolveTags } from'@unhead/vue/utils'
 import { computedAsync, until } from'@vueuse/core'
 import { computed, nextTick, ref } from'vue'
 import { definePageMeta } from'#imports'
@@ -22,10 +24,19 @@ definePageMeta({
 const counter =ref(0)
 const head =useClientHead()
 
+// unhead v2 apps expose tag resolution as an async instance method; v3 removed it in
+// favour of the standalone `resolveTags` util, and the inspected app may be on either.
+asyncfunction resolveHeadTags(instance:Unhead):Promise<HeadTag[]> {
+const legacy =instanceasPartial<{ resolveTags: () =>Promise<HeadTag[]> }>
+if (typeoflegacy.resolveTags==='function')
+returnawaitlegacy.resolveTags()
+returnresolveTags(instance)
+}
+
 const headTags =computedAsync(async () => {
 // eslint-disable-next-line ts/no-unused-expressions
 counter.value// for force refresh
-const tags =awaithead.value?.resolveTags()
+const tags =head.value?awaitresolveHeadTags(head.value) : []
 returntags.map((tag):NormalizedHeadTag=> {
 const props =tag.props|| {}
 if (tag.tag==='htmlAttrs'&&props.lang) {

packages/devtools/package.json

@@ -104,7 +104,7 @@
 "@nuxt/test-utils": "catalog:cli",
 "@parcel/watcher": "catalog:buildtools",
 "@types/markdown-it-link-attributes": "catalog:types",
-"@unhead/schema": "catalog:types",
+"@unhead/vue": "catalog:frontend",
 "@unocss/nuxt": "catalog:buildtools",
 "@unocss/preset-icons": "catalog:buildtools",
 "@unocss/preset-uno": "catalog:buildtools",

pnpm-lock.yaml

@@ -86,6 +86,7 @@ catalogs:
 vue-tsc: ^3.3.9
 frontend:
 '@antfu/utils': ^9.3.0
+'@unhead/vue': ^3.2.3
 '@unocss/reset': ^66.7.5
 '@unocss/runtime': ^66.7.5
 '@vue/devtools-applet': ^8.2.1
@@ -169,6 +170,5 @@ catalogs:
 '@types/node': ^25.9.5
 '@types/which': ^3.0.4
 '@types/ws': ^8.18.1
-'@unhead/schema': ^2.1.16
 '@vitejs/devtools-kit': ^0.4.10
 unimport: ^6.4.0