bug: @ionic/vue components displayed as "<AnonymousComponent>" in vue3-devtools

[ythomop]

Bug Report

Ionic version:
[ ] 4.x
[x] 5.x

Current behavior:
When using ionic components that are not in /packages/vue/src/components, Vue3-Devtools displayed
them as <AnonymousComponent>. E.g. When using <ion-split-pane>, it was indicated as Anonymous.
However, named components in /packages/vue/src/components like <ion-app> were named correctly.

Expected behavior:
Display components like <ion-split-pane> as <IonSplitPane> in Vue3-Devtools.

Steps to reproduce:

<template>
  <ion-app>
    <ion-menu>
      <ion-content>
        ...
      </ion-content>
    </ion-menu>
  </ion-app>
</template>

Vue3-Devtools displays <AnonymousComponent> instead of <IonMenu>, <IonContent>, etc.

Related code:

<template>
  <ion-app>
    <ion-page>
      <ion-split-pane name="d" when="md" content-id="main">
        <ion-menu content-id="main">
          <ion-header>
            <ion-toolbar color="primary">
              <ion-title>Menu Header</ion-title>
            </ion-toolbar>
          </ion-header>

          <ion-content>
            <ion-list>
              <ion-list-header>
                List header
              </ion-list-header>
              <ion-menu-toggle auto-hide="false">
                <ion-item>
                  <ion-label>
                    Test Label
                  </ion-label>
                </ion-item>
              </ion-menu-toggle>
            </ion-list>
          </ion-content>
        </ion-menu>

        <ion-router-outlet id="main" />
      </ion-split-pane>
    </ion-page>
    <tabs class="ion-hide-md-up" />
  </ion-app>
</template>

<script lang="ts">
import {
  IonApp,
  IonPage,
  IonRouterOutlet,
  IonSplitPane,
  IonContent,
  IonMenu,
  IonItem,
  IonIcon,
  IonList,
  IonMenuToggle,
  IonLabel,
} from '@ionic/vue';
import { defineComponent } from 'vue';
import { home } from 'ionicons/icons';
import Tabs from '@/views/Tabs.vue';

export default defineComponent({
  name: 'App',
  components: {
    IonPage,
    IonApp,
    IonRouterOutlet,
    IonSplitPane,
    IonContent,
    IonMenu,
    IonItem,
    IonIcon,
    IonList,
    IonMenuToggle,
    IonLabel,
    Tabs,
  },
  setup() {
    return {
      home,
    };
  },
});
</script>

Ionic info:

Ionic:

   Ionic CLI       : 6.13.1 (/home/yt/.config/yarn/global/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 5.6.1

Capacitor:

   Capacitor CLI   : 2.4.7
   @capacitor/core : 2.4.7

Utility:

   cordova-res : 0.15.3
   native-run  : not installed

System:

   NodeJS : v14.15.4 (/usr/bin/node)
   npm    : 6.14.11
   OS     : Linux 5.10

I will create a pull request shortly.

[HarleyShugart]

Any updates on this? Looks like the roadmap linked above hasn't been updated RE: this specific issue in almost a year. From what I'm seeing with ionic/vue 6.5.6, Ionic components inside an IonPage are still showing as anonymous in the vue devtools.

[liamdebeasi]

Hi everyone,

The reported behavior is caused by a Vue Dev Tools that has since been fixed. (See: vuejs/devtools-v6#1494)

I recommend updating to the latest version of Vue Dev Tools for component names to show up correctly.

edit 1: This might not actually be the case with certain components. Going to take a closer look again.

edit 2: Going to re-open. This is definitely still a bug we need to address.

[liamdebeasi]

Thanks for the issue. This has been resolved via #257, and the fix will be available in an upcoming release of the Vue Output Targets packages.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of the output targets, please create a new issue and ensure the template is fully filled out.