Vue: Move vue-component-meta in vue renderer and implement docgen payload builder

[huang-julien]

Closes #

What I did

This PR extracts vue-component-meta from framework to vue-renderer to be alongside other Vue-specific docgen code and also to match React docgen.

It provides buildDocGenPayloadto create the payload for core/docgen

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

---

Caution

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Declare whether manual QA will be needed for this PR during the next release, through qa:needed or qa:skip

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>

[storybook-app-bot]

Package Benchmarks

^{Commit: 761ccd3, ran on 4 August 2026 at 13:10:58 UTC}

The following packages have significant changes to their size or dependencies:

storybook

	Before	After	Difference
Dependency count	73	73	0
Self size	21.43 MB	21.42 MB	🎉 -10 KB 🎉
Dependency size	31.21 MB	31.21 MB	0 B
Bundle Size Analyzer	Link	Link

@storybook/vue3-vite

	Before	After	Difference
Dependency count	103	102	🎉 -1 🎉
Self size	34 KB	31 KB	🎉 -3 KB 🎉
Dependency size	43.12 MB	19.52 MB	🎉 -23.59 MB 🎉
Bundle Size Analyzer	Link	Link

@storybook/codemod

	Before	After	Difference
Dependency count	198	198	0
Self size	32 KB	32 KB	0 B
Dependency size	84.60 MB	84.59 MB	🎉 -10 KB 🎉
Bundle Size Analyzer	Link	Link

create-storybook

	Before	After	Difference
Dependency count	74	74	0
Self size	1.09 MB	1.09 MB	🚨 +66 B 🚨
Dependency size	52.65 MB	52.64 MB	🎉 -10 KB 🎉
Bundle Size Analyzer	node	node

@storybook/vue3

	Before	After	Difference
Dependency count	4	90	🚨 +86 🚨
Self size	68 KB	99 KB	🚨 +32 KB 🚨
Dependency size	584 KB	18.08 MB	🚨 +17.50 MB 🚨
Bundle Size Analyzer	Link	Link

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

Walkthrough

Changes

Vue 3 docgen pipeline

Layer / File(s)	Summary
Shared metadata engine and package export code/renderers/vue3/src/docgen/component-meta.ts, code/renderers/vue3/src/preset.ts, code/renderers/vue3/package.json, code/renderers/vue3/build-config.ts	Adds shared checker creation and metadata collection. It serializes metadata, patches event descriptions, reduces nested schemas, and exposes the renderer preset with declarations.
Component resolution and payload construction code/core/src/common/utils/*, code/renderers/vue3/src/docgen/resolve-component.ts, code/renderers/vue3/src/docgen/build-docgen.ts, code/renderers/vue3/src/docgen/__testfixtures__/*, tests	Adds module resolution and CSF component resolution. Builds structured Vue docgen payloads with metadata, descriptions, JSDoc tags, and argTypes.
Framework option and Vite integration code/frameworks/vue3-vite/src/docgen/options.ts, code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts, code/frameworks/vue3-vite/src/preset.ts, tests	Adds docgen option normalization and injects the experimental Vue docgen engine into the Vite component-meta plugin.

Sequence Diagram(s)

sequenceDiagram
  participant StoryFile
  participant buildDocgenPayload
  participant resolveMetaComponent
  participant createModuleResolver
  participant collectComponentMetaSources
  StoryFile->>buildDocgenPayload: provide CSF story
  buildDocgenPayload->>resolveMetaComponent: resolve meta.component
  resolveMetaComponent->>createModuleResolver: resolve imported Vue component
  createModuleResolver-->>resolveMetaComponent: return component path and export
  buildDocgenPayload->>collectComponentMetaSources: collect component metadata
  collectComponentMetaSources-->>buildDocgenPayload: return metadata source
  buildDocgenPayload-->>StoryFile: return Vue docgen payload

Loading

Possibly related issues

• [Bug]: A type-only export in an SFC drops the whole file's vue-component-meta docgen #35592 — The shared metadata handling is related to type-only export filtering.
• [Bug]: build-storybook ~15-20x slower after 10.4.6 → 10.5.x with docgen: 'vue-component-meta' #35556 — The changes refactor the Vue component-meta checker and metadata collection path.

Possibly related PRs

• storybookjs/storybook#35624 — Shares the Vue 3 docgen option resolver, component-meta extraction, component resolution, and fixtures.
• storybookjs/storybook#35666 — Consumes the shared Vue component-meta infrastructure introduced here.
• storybookjs/storybook#35705 — Modifies the same Vue 3 Vite component-meta transform and tests.

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

• Create stacked PR
• Commit on current branch

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 3

🧹 Nitpick comments (2)

code/renderers/vue3/src/docgen/component-meta.ts (1)

58-78: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick win

Avoid building the discarded fallback checker.

defaultChecker is always constructed via createCheckerByJson even when the project tsconfig path exists and has no references, in which case createChecker(projectTsConfigPath, ...) is returned instead and defaultChecker is thrown away. Building a vue-component-meta checker typically means constructing a TS program, so this is a real wasted cost on every checker initialization (dev server startup, docgen worker boot).

♻️ Reorder to avoid the redundant checker

-  const projectRoot = getProjectRoot();
-
-  const projectTsConfigPath = join(projectRoot, tsconfigPath);
-
-  const defaultChecker = createCheckerByJson(projectRoot, { include: ['**/*'] }, checkerOptions);
-
-  // prefer the tsconfig.json file of the project to support alias resolution etc.
-  if (await fileExists(projectTsConfigPath)) {
-    // vue-component-meta does currently not resolve tsconfig references (see https://github.com/vuejs/language-tools/issues/3896)
-    // so we will return the defaultChecker if references are used.
-    // Otherwise vue-component-meta might not work at all for the Storybook docgen.
-    const references = await getTsConfigReferences(projectTsConfigPath);
-
-    if (references.length > 0) {
-      return defaultChecker;
-    }
-    return createChecker(projectTsConfigPath, checkerOptions);
-  }
-
-  return defaultChecker;
+  const projectRoot = getProjectRoot();
+  const projectTsConfigPath = join(projectRoot, tsconfigPath);
+
+  // prefer the tsconfig.json file of the project to support alias resolution etc.
+  if (await fileExists(projectTsConfigPath)) {
+    // vue-component-meta does currently not resolve tsconfig references (see https://github.com/vuejs/language-tools/issues/3896)
+    // so we will fall back to the JSON checker if references are used.
+    // Otherwise vue-component-meta might not work at all for the Storybook docgen.
+    const references = await getTsConfigReferences(projectTsConfigPath);
+
+    if (references.length === 0) {
+      return createChecker(projectTsConfigPath, checkerOptions);
+    }
+  }
+
+  return createCheckerByJson(projectRoot, { include: ['**/*'] }, checkerOptions);

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@code/renderers/vue3/src/docgen/component-meta.ts` around lines 58 - 78,
Reorder the checker initialization so `createCheckerByJson` is called only after
confirming that `projectTsConfigPath` is missing or has references. In the
existing project tsconfig branch, return `createChecker(projectTsConfigPath,
checkerOptions)` directly when no references exist, while preserving the
`defaultChecker` fallback for missing or referenced configurations.

code/renderers/vue3/src/docgen/__testfixtures__/tsconfig.json (1)

3-6: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

baseUrl is redundant here.

The paths targets are already tsconfig-relative, and the repo otherwise avoids baseUrl for TypeScript 7 compatibility. Dropping it keeps the fixture aligned with that convention.

♻️ Proposed simplification

   "compilerOptions": {
-    "baseUrl": ".",
     "paths": { "`@ui/`*": ["./aliased/*"] }
   }

As per coding guidelines: "Keep TypeScript configurations valid for both TypeScript 7 native checks and the workspace TypeScript 6 dependency; for example, do not use baseUrl."

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@code/renderers/vue3/src/docgen/__testfixtures__/tsconfig.json` around lines 3
- 6, Remove the redundant baseUrl option from the compilerOptions object in the
tsconfig fixture, leaving the paths mapping unchanged. Ensure the resulting
configuration remains valid for both TypeScript 7 native checks and the
workspace TypeScript 6 dependency.

Source: Coding guidelines

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@code/renderers/vue3/src/docgen/build-docgen.ts`:
- Around line 74-80: Update the readFile error handling in the storyFile loading
block of build-docgen so it returns undefined only when the failure indicates a
missing file (ENOENT). Re-throw all other read failures, preserving the existing
parse-failure behavior and avoiding silent fall-through for unexpected I/O
errors.

In `@code/renderers/vue3/src/docgen/component-meta.ts`:
- Line 105: Update the applyTempFixForEventDescriptions call to pass the
exportNames list, then change that function to match each component meta with
parsedComponentDocs by its exportName rather than array index. Preserve handling
for component metadata entries whose getComponentMeta call failed and ensure
matching remains based on the corresponding exported name.

In `@code/renderers/vue3/src/docgen/resolve-component.ts`:
- Around line 18-22: Update the Vue docgen re-extraction flow that uses the
module-level componentResolver to clear its oxc-resolver cache after updateFile
or filesystem invalidation and before resolving components again. Use the
resolver’s clearCache() API, ensuring moved or renamed imports are resolved from
the current filesystem during long-lived sessions.

---

Nitpick comments:
In `@code/renderers/vue3/src/docgen/__testfixtures__/tsconfig.json`:
- Around line 3-6: Remove the redundant baseUrl option from the compilerOptions
object in the tsconfig fixture, leaving the paths mapping unchanged. Ensure the
resulting configuration remains valid for both TypeScript 7 native checks and
the workspace TypeScript 6 dependency.

In `@code/renderers/vue3/src/docgen/component-meta.ts`:
- Around line 58-78: Reorder the checker initialization so `createCheckerByJson`
is called only after confirming that `projectTsConfigPath` is missing or has
references. In the existing project tsconfig branch, return
`createChecker(projectTsConfigPath, checkerOptions)` directly when no references
exist, while preserving the `defaultChecker` fallback for missing or referenced
configurations.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 2df7214b-b476-4e60-9bf4-727427529f47

📥 Commits

Reviewing files that changed from the base of the PR and between d819809 and f284601.

⛔ Files ignored due to path filters (1)

• yarn.lock is excluded by !**/yarn.lock, !**/*.lock

📒 Files selected for processing (17)

• code/frameworks/vue3-vite/src/docgen/options.ts
• code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts
• code/frameworks/vue3-vite/src/preset.ts
• code/renderers/vue3/build-config.ts
• code/renderers/vue3/package.json
• code/renderers/vue3/src/docgen/__testfixtures__/Button.stories.ts
• code/renderers/vue3/src/docgen/__testfixtures__/Button.vue
• code/renderers/vue3/src/docgen/__testfixtures__/NoComponent.stories.ts
• code/renderers/vue3/src/docgen/__testfixtures__/Unparseable.stories.ts.txt
• code/renderers/vue3/src/docgen/__testfixtures__/aliased/AliasedButton.vue
• code/renderers/vue3/src/docgen/__testfixtures__/tsconfig.json
• code/renderers/vue3/src/docgen/build-docgen.test.ts
• code/renderers/vue3/src/docgen/build-docgen.ts
• code/renderers/vue3/src/docgen/component-meta.ts
• code/renderers/vue3/src/docgen/resolve-component.test.ts
• code/renderers/vue3/src/docgen/resolve-component.ts
• code/renderers/vue3/tsconfig.json

[valentinpalkovic]

Second review pass. For transparency: I paired this with an AI code-quality review (the Cursor "thermo-nuclear code quality review" skill), then filtered it down to only the findings that are genuinely new on top of my earlier comments. A couple are deliberately low-confidence questions rather than blockers - flagged inline. 🙂