Vue3: Use component's name as displayName if available

[huang-julien]

Closes #30455

What I did

Hey 👋 this PR makes the vue-component-meta plugin use the component's name if provided at runtime. By default, Vue will auto fill the __name property of the component, users usually define thename property directly

#33428

Checklist for Contributors

Testing

It seems like there's no unit test for vue=-component-meta plugin.

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

• 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 pull request has been released as version 0.0.0-pr-34008-sha-fc2f9bf0. Try it out in a new sandbox by running npx storybook@0.0.0-pr-34008-sha-fc2f9bf0 sandbox or in an existing project with npx storybook@0.0.0-pr-34008-sha-fc2f9bf0 upgrade.

More information

Published version	0.0.0-pr-34008-sha-fc2f9bf0
Triggered by	@yannbf
Repository	storybookjs/storybook
Branch	fix/vue3_docgen
Commit	fc2f9bf0
Datetime	Wed Mar 4 10:51:49 UTC 2026 (1772621509)
Workflow run	22666159839

To request a new release of this pull request, mention the @storybookjs/core team.

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

Summary by CodeRabbit

Summary by CodeRabbit

• Refactor
  • Component metadata now always includes a displayName derived from each component's name with an automatic fallback, merged into existing documentation metadata so prior info is preserved.
  • No changes to public/exported APIs or runtime behavior; this only adjusts how component documentation metadata is constructed and exposed.

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 8fbf977

Command	Status	Duration	Result
nx run-many -t compile,check,knip,test,pretty-d...	❌ Failed	11m 20s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-03-05 18:04:07 UTC

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 46378e26-bcf9-4127-982b-61c0a32835a7

📥 Commits

Reviewing files that changed from the base of the PR and between 29fd7a5 and 8fbf977.

📒 Files selected for processing (1)

• code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts

---

📝 Walkthrough

Walkthrough

Merge a computed displayName into each component's __docgenInfo using Object.assign (derived from name or __name), replacing direct metadata assignment; also replace catch (e) with a bare catch in one plugin file.

Changes

Cohort / File(s)	Summary
Vue3 Docgen Plugins code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts, code/frameworks/vue3-vite/src/plugins/vue-docgen.ts	Replace direct __docgenInfo assignment with Object.assign(__docgenInfo, { displayName }) to merge a displayName (from name or __name) into existing metadata. Also change catch (e) to a bare catch in vue-component-meta.ts.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• Vue3: Use component's name as displayName if available #33428 — Modifies the same Vue3 docgen plugins to merge a computed displayName into __docgenInfo using Object.assign.

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (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 and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts`:
- Around line 138-140: The generated Object.assign currently places
${JSON.stringify(meta)} last which overwrites the runtime displayName so update
the assignment to preserve runtime names by merging meta first and then the
runtime displayName (use an empty object target to avoid mutating meta). In
other words, change the Object.assign call that builds ${name}.__docgenInfo so
it merges {}, ${JSON.stringify(meta)}, and then { displayName: ${name}.name ??
${name}.__name } (so displayName from name/__name takes precedence).

In `@code/frameworks/vue3-vite/src/plugins/vue-docgen.ts`:
- Around line 22-24: The generated assignment to _sfc_main.__docgenInfo
currently does Object.assign({ displayName: runtime }, metaData) so
metaData.displayName overwrites the runtime/user name; change the merge order so
metaData is applied first and the runtime displayName wins — i.e. create the
docgen object by Object.assign({}, ${JSON.stringify(metaData)}, { displayName:
_sfc_main.name ?? _sfc_main.__name }) (update the s.append call that constructs
_sfc_main.__docgenInfo accordingly).

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: d65016f4-c4f9-4371-a25a-8f2532eef92e

📥 Commits

Reviewing files that changed from the base of the PR and between 33e2117 and fc2f9bf.

📒 Files selected for processing (2)

• code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts
• code/frameworks/vue3-vite/src/plugins/vue-docgen.ts