fix(storybook-addon): Issue 993 proxy errors

package.json

@@ -37,7 +37,6 @@
     "release": "pnpm jiti prepare-release.ts && pnpm publish --recursive  && git push --follow-tags",
     "release:major": "pnpm jiti prepare-release.ts --major && pnpm publish --recursive  && git push --follow-tags",
     "nightly-release": "pnpm jiti prepare-release.ts --nightly && pnpm publish --recursive --tag nightly --access public --no-git-checks --provenance --report-summary",
-    "prepare": "pnpm run --filter=./playground/** prepare",
     "docs:dev": "pnpm run --filter=./docs/** dev",
     "docs:build": "pnpm run --filter=./docs/** build",
     "docs:generate": "pnpm run --filter=./docs/** generate",
@@ -87,7 +86,8 @@
   },
   "pnpm": {
     "overrides": {
-      "@nuxtjs/storybook": "workspace:*"
+      "@nuxtjs/storybook": "workspace:*",
+      "h3": "1.15.4"
     }
   }
 }

packages/storybook-addon/package.json

@@ -75,6 +75,7 @@
     "@storybook/builder-vite": "10.1.11",
     "@storybook/vue3": "10.1.11",
     "@storybook/vue3-vite": "10.1.11",
+    "@unhead/vue": "^2.0.0",
     "json-stable-stringify": "^1.3.0",
     "mlly": "^1.8.0",
     "ofetch": "^1.5.1",

packages/storybook-addon/src/preset.ts

@@ -105,12 +105,6 @@ async function loadNuxtViteConfig(root: string | undefined) {
       appId: 'nuxt-app',
       buildId: 'storybook',
       ssr: false,
-      experimental: {
-        // Disable app manifest to prevent 404 errors in Storybook preview
-        // Nuxt 3.8+ tries to fetch /_nuxt/builds/meta/{buildId}.json for build checking
-        // but Storybook doesn't generate this manifest, causing console errors
-        appManifest: false,
-      },
     },
   })
 
@@ -397,18 +391,27 @@ async function getPackageDir(packageName: string) {
 }
 
 export function getNuxtProxyConfig(nuxt: Nuxt) {
-  const port = nuxt.options.runtimeConfig.app.port ?? 3000
-  const route = '^/(_nuxt|_ipx|api/_nuxt_icon|__nuxt_devtools__|__nuxt_island)'
+  // Nuxt may use a different port if default is busy
+  let target = 'http://localhost:3000'
+  if (nuxt.options.devServer?.url) {
+    target = nuxt.options.devServer.url.replace(/\/$/, '')
+  } else if (nuxt.options.devServer?.port) {
+    target = `http://localhost:${nuxt.options.devServer.port}`
+  }
+
+  // Exclude /builds/meta (appManifest) - Storybook doesn't need it
+  const route =
+    '^/(_nuxt(?!/builds/meta)|_ipx|api/_nuxt_icon|__nuxt_devtools__|__nuxt_island)'
   const proxy = {
     [route]: {
-      target: `http://localhost:${port}`,
+      target,
       changeOrigin: true,
       secure: false,
       ws: true,
     },
   }
   return {
-    port,
+    target,
     route,
     proxy,
   }

packages/storybook-addon/src/preview.ts

@@ -14,6 +14,9 @@ import type { ObjectPlugin, Plugin, NuxtApp } from 'nuxt/app'
 import { applyPlugins, createNuxtApp } from 'nuxt/app'
 import { getContext } from 'unctx'
 import { $fetch } from 'ofetch'
+import { createHead as createClientHead } from '@unhead/vue/client'
+// The headSymbol is just the string "usehead" used for Vue's provide/inject
+const headSymbol = 'usehead'
 // @ts-expect-error virtual file
 import { runtimeConfig } from 'virtual:nuxt-runtime-config'
 
@@ -74,6 +77,18 @@ setup(async (_vueApp, storyContext) => {
     }) as any
   }
 
+  // Pre-initialize Unhead before creating the Nuxt app
+  // This ensures the head instance is available via Vue's provide/inject
+  // before any plugins (like @nuxt/ui) try to use useHead()
+  // We use the same headSymbol that @unhead/vue uses for injection
+  const head = createClientHead({})
+  // Install head as Vue plugin AND explicitly provide it
+  vueApp.use(head)
+  // Also set global properties as backup for injection context issues
+  vueApp.config.globalProperties.$head = head
+  // Explicitly provide the head symbol for plugins that use inject()
+  vueApp.provide(headSymbol, head)
+
   const nuxt = createNuxtApp({
     id: storyNuxtAppId,
     vueApp,