Skip to content

Tooltips and Popovers clutter Vue DevTools with unnamed "App" entries #2700

@darrelfrancis

Description

@darrelfrancis

Describe the bug

Description

When using <BTooltip> or <BPopover> from bootstrap-vue-next, each instance appears as a separate "App" entry in Vue DevTools. This becomes problematic when using many tooltips or popovers on a page — DevTools is cluttered with hundreds of indistinguishable entries named simply "App".

This makes it very difficult to find the actual root app or debug anything meaningfully.

Expected behavior

Ideally, internal Vue apps created for tooltips/popovers should set a .name property (e.g., "BTooltipInternal" or "BPopoverInternal") when calling createApp. This way, Vue DevTools can label them accordingly, and they won't be confused with the real root app.

Steps to reproduce

  1. Use multiple <BTooltip> or <BPopover> components in a Vue 3 app.
  2. Open Vue DevTools.
  3. Observe the large number of "App" entries in the component tree.

Suggested fix

Set the name option when creating internal Vue apps for tooltips/popovers:

const app = createApp(PopoverComponent, props)
app._component.name = 'BPopoverInternal'

Reproduction

https://llqipbxnmqgithub-mkn2--5173--4d9fd228.local-credentialless.webcontainer.io

Used Package Manager

npm

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions