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.

[Akryum]

Please provide a runnable reproduction.

[lesderid]

I'm getting this issue with the Home component of the Hello World project created by Vue CLI v4.5.11 (with settings: Vue 3, TypeScript, class-based components, router enabled).

[tollswap]

I got this issue when using vue-styled-components. fixed it like this

import styled from "vue3-styled-components"; 
const Flexbox = styled.div`
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
 `;
// this line is important

Flexbox.name = 'Flexbox';
 
/*VUEJS*/
export default{
    components:{
        Flexbox
    }
}

[hongquan]

I got this problem with the Icon component imported from @iconify/vue and setup script.

The fix is to register this component with a name in main.ts:

import { createApp } from 'vue'
import { Icon } from '@iconify/vue'
import App from './App.vue'

createApp(App).component('icon', Icon)

[gh-LZC]

这是一封自动回复邮件。已经收到您的来信，我会尽快回复。