Vue-devtools: Component Name shown as "Anonymous Component"

[pymike00]

6.0.0-beta.2

Browser and OS info

Chromium Version 86.0.4240.111 (Official Build) Arch Linux (64-bit)

Steps to reproduce

Create Basic Vue 3 App and Component:

const app = Vue.createApp({
    data() {
        return {
            comments: [
                {
                    username: "alice",
                    content: "First Comment!"
                },
                {
                    username: "bob",
                    content: "Hello World!"
                }
            ]
        }
    }
});


app.component("comment", {
    props: {
        comment: {
            type: Object,
            required: true
        }
    },
    template: `
        <div>
            <div class="card-body">
                <p><strong>{{ comment.username }}</strong></p>
                <p>{{ comment.content }}</p>
            </div>
            <hr>
        </div>
    `
});

const mountedApp = app.mount('#app');

<div id="app">
        <comment v-for="comment in comments" :comment="comment">
        </comment>
</div>

What is expected?

I expect to see the component name (comment) in Vue Devtools. under Root

What is actually happening?

Vue Devtools returns "Anonymous Component" for each component instance

[TimRChen]

try to use named component.

[foyzhao]

Same problem, the name has been declared when registering the component

[TimRChen]

try to use named component.

app.component("comment", {
    name: 'comment',  // component name declared in here.
    props: {
        comment: {
            type: Object,
            required: true
        }
    },
    template: `
        <div>
            <div class="card-body">
                <strong><p>{{ comment.username }}</p></strong>
                <p>{{ comment.content }}</p>
            </div>
            <hr>
        </div>
    `
});

[pymike00]

Hi both, and thanks for your answers.

@TimRChen , am I missing something in v3?

Shouldn't this be optional at best, as the name is already declared as the first argument to app.component ?

https://v3.vuejs.org/guide/component-registration.html#component-names

[foyzhao]

Hi both, and thanks for your answers.

@TimRChen , am I missing something in v3?

Shouldn't this be optional at best, as the name is already declared as the first argument to app.component ?

https://v3.vuejs.org/guide/component-registration.html#component-names

That's the point

Registration also automatically sets the component's name with the given name parameter.

The original words in the document https://v3.vuejs.org/api/application-api.html#component

[TimRChen]

Hi, there. I found this method: https://github.com/vuejs/vue-devtools/blob/6d8fee4d058716fe72825c9ae22cf831ef8f5172/packages/shared-utils/src/util.js#L260-L269
For reference only

[AdamPTD]

@TimRChen So if registration automatically sets the components name why does it need an additional name property to show up in dev tools as something other than Anonymous Component? Why doesn't dev tools show the name that the component was automatically given?

[TimRChen]

@TimRChen So if registration automatically sets the components name why does it need an additional name property to show up in dev tools as something other than Anonymous Component? Why doesn't dev tools show the name that the component was automatically given?

I don't know. but you can find answer in source code.