Is the "name" attribute required in (certain) single file components?

[Susccy]

While working with layout components today I noticed a warning in the console every time I am routed to my layout page:

[Vue warn]: Invalid component name: "src/client/layouts/mobile.vue".
Component names should conform to valid custom element name in html5 specification.

This doesn't appear on initial page load, only on subsequent routings to the page (in SSR dev mode). The layout works perfectly fine.

After googling this problem I found 2 similar questions on stackoverflow with identical answers:

• https://stackoverflow.com/questions/63981989/how-to-fix-invalid-component-name-when-changing-page-with-custom-layout-in-nux (same exact problem)
• https://stackoverflow.com/questions/60169343/invalid-component-name-pages-product-slug-vue-component-names-should-confor (same problem but in the pages directory)

The answers in both threads say to add the "name" property to the component causing the warning but without a reason why that fixes it. I couldn't find anything about this in the Nuxt docs so it looks to me like a bug? Any explanation would be welcome.

[kissu]

What is the name you wrote?

[Susccy]

None. I didn't give any of my components the name property until this warning started to show up. After seeing this warning I added the name "MobileLayout" to the layout file mobile.vue which fixed the warning. My question was why this fixes it and why the warning showed up in the first place because I thought Nuxt is responsible for naming my components.

[manniL]

This is due to the automated name generation from Nuxt which simply takes the path of the component.
In theory this shouldn't create any problems except the warning in dev. The warning basically says that the name is not in line with the W3C spec for custom elements (see vuejs/vue#11204 (comment) and the specs).

You can add a name on your own which will overwrite the "faulty" name and, as long as that one matches, the warning will disappear.

[Susccy]

So the automatic component naming by Nuxt doesn't follow W3C standards?

[manniL]

It seems so, yes. Raising an issue/bug report regarding that would make sense (though it might not be high priority) 👍

[Susccy]

Ok I will do that. Seems weird to me though that this seemingly hasn't been talked about yet. This warning showed up less than 30 minutes into a new project while following basic Nuxt conventions for project structure.

Edit: well actually that is not true, I moved the source directories into a subfolder because I personally don't like the standard Nuxt root structure, so that might be the cause. I will add that in the issue.