Invalid component name: "pages/product/_slug.vue". Component names should conform to valid custom element name in html5 specification.

[simplenotezy]

Version

v1.3.0

Steps to reproduce

I have some dynamic routes. My folder structure is this:

- pages
 - product
  - _slug.vue

I link to the route like this:

<nuxt-link :to="{ name: 'product-slug', params: { slug: product.slug } }">

It works fine, it shows the correct URL and also directs the page fine, however, I am getting an annoying red error in my console:

[Vue warn]: Invalid component name: "pages/product/_slug.vue". Component names should conform to valid custom element name in html5 specification.

I have found this issue, but to little avail: https://github.com/nuxt/nuxt.js/issues/165

What is expected ?

No error should be outputted

What is actually happening?

An error is being outputted even though it links just fine

_{This bug report is available on Nuxt community (#c50)}

[ricardogobbosouza]

Hi @simplenotezy I followed the step by step, but I couldn't reproduce

Are you using this module? Use this module to use router.js instead of pages/ directory

[carljustineoyales]

same issue when using it together with nuxt-i18n and hash routes

- pages
  - index

link code

<nuxt-link class="nav__links" :to="{ path: localePath('/'),hash:'#mainvisual'}">Home</nuxt-link>

error

vue.runtime.esm.js?2b0e:619 [Vue warn]: Invalid component name: "pages/index.vue". Component names should conform to valid custom element name in html5 specification.
warn @ vue.runtime.esm.js?2b0e:619
validateComponentName @ vue.runtime.esm.js?2b0e:1401
checkComponents @ vue.runtime.esm.js?2b0e:1395
mergeOptions @ vue.runtime.esm.js?2b0e:1514
resolveConstructorOptions @ vue.runtime.esm.js?2b0e:5057
createComponent @ vue.runtime.esm.js?2b0e:3219
_createElement @ vue.runtime.esm.js?2b0e:3434
createElement @ vue.runtime.esm.js?2b0e:3353
vm.$createElement @ vue.runtime.esm.js?2b0e:3494
render @ vue-router.esm.js?8c4f:137
createFunctionalComponent @ vue.runtime.esm.js?2b0e:3058
createComponent @ vue.runtime.esm.js?2b0e:3231
_createElement @ vue.runtime.esm.js?2b0e:3422
createElement @ vue.runtime.esm.js?2b0e:3353
vm.$createElement @ vue.runtime.esm.js?2b0e:3494
render @ nuxt-child.js?2452:77
createFunctionalComponent @ vue.runtime.esm.js?2b0e:3058
createComponent @ vue.runtime.esm.js?2b0e:3231
_createElement @ vue.runtime.esm.js?2b0e:3422
createElement @ vue.runtime.esm.js?2b0e:3353
vm.$createElement @ vue.runtime.esm.js?2b0e:3494
render @ nuxt.js?b89b:72
Vue._render @ vue.runtime.esm.js?2b0e:3548
updateComponent @ vue.runtime.esm.js?2b0e:4055
get @ vue.runtime.esm.js?2b0e:4479
run @ vue.runtime.esm.js?2b0e:4554
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4310
eval @ vue.runtime.esm.js?2b0e:1980
flushCallbacks @ vue.runtime.esm.js?2b0e:1906
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1933
nextTick @ vue.runtime.esm.js?2b0e:1990
queueWatcher @ vue.runtime.esm.js?2b0e:4402
update @ vue.runtime.esm.js?2b0e:4544
notify @ vue.runtime.esm.js?2b0e:730
reactiveSetter @ vue.runtime.esm.js?2b0e:1055
setTransitions @ index.js?f26e:79
_callee6$ @ client.js?06a0:345
tryCatch @ runtime.js?96cf:63
invoke @ runtime.js?96cf:293
eval @ runtime.js?96cf:118
asyncGeneratorStep @ asyncToGenerator.js?1da1:3
_next @ asyncToGenerator.js?1da1:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js?1da1:13
_next @ asyncToGenerator.js?1da1:25
eval @ asyncToGenerator.js?1da1:32
eval @ asyncToGenerator.js?1da1:21
_render @ client.js?06a0:262
render @ client.js?06a0:262
iterator @ vue-router.esm.js?8c4f:2252
step @ vue-router.esm.js?8c4f:1898
eval @ vue-router.esm.js?8c4f:1899
eval @ vue-router.esm.js?8c4f:2274
_callee4$ @ client.js?06a0:183
tryCatch @ runtime.js?96cf:63
invoke @ runtime.js?96cf:293
eval @ runtime.js?96cf:118
asyncGeneratorStep @ asyncToGenerator.js?1da1:3
_next @ asyncToGenerator.js?1da1:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js?1da1:13
_next @ asyncToGenerator.js?1da1:25
eval @ asyncToGenerator.js?1da1:32
eval @ asyncToGenerator.js?1da1:21
_loadAsyncComponents @ client.js?06a0:146
loadAsyncComponents @ client.js?06a0:146
iterator @ vue-router.esm.js?8c4f:2252
step @ vue-router.esm.js?8c4f:1898
runQueue @ vue-router.esm.js?8c4f:1906
confirmTransition @ vue-router.esm.js?8c4f:2282
transitionTo @ vue-router.esm.js?8c4f:2152
push @ vue-router.esm.js?8c4f:2519
push @ vue-router.esm.js?8c4f:2953
push @ router.js?5783:13
handler @ vue-router.esm.js?8c4f:1102
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6917

[atinux]

Can you please provide a reproduction with CodeSandBox please?

[helderjnpinto]

same issue when using it together with nuxt-i18n and hash routes

- pages
  - index

link code

<nuxt-link class="nav__links" :to="{ path: localePath('/'),hash:'#mainvisual'}">Home</nuxt-link>

error

vue.runtime.esm.js?2b0e:619 [Vue warn]: Invalid component name: "pages/index.vue". Component names should conform to valid custom element name in html5 specification.

I had the same issue i just added the name in index.vue and stopped of show the warn.

export default { // components: { // Logo // }, name: 'index', ....

[bitbytebit1]

I also frequently see this error, can confirm adding name: 'index' resolves the issue, can we see a fix for this in the next release?

[keyonvdelzen]

I also frequently see this error, can confirm adding name: 'index' resolves the issue, can we see a fix for this in the next release?

Yep, same for me. Got the error and resolved it by adding name: 'somelayout' to my layouts.

[JonathanSchndr]

i also get the error in "nuxt": "^2.15.8" - any news?

[theo-bittencourt]

Same here. But not on page load. Just happen when click on some link.

[InerkyJad]

The issue, and it's Solution (tested)

actually there is no bug, the only way i found to reproduce the error is to add and export the name from a page or a component something like:

export default {
  name: "_slug"
}

Note: this error occurs only when you have a some dynamic routing set up with the page _slug.vue, it's important to note that the reason is mostly that your IDE is setting .vue files with some initial boilerplate containing the property name with the value of the filename, this will result in the name being exported to be _slug and that name will be used to create a custom element, which should comply with the HTML5 specification.

the page that you access doesn't have to be _slug.vue and exporting name: '_slug' to run into the error, just it's existence sometimes (also tested) results in that error, it's strange but i couldn't find the reason for that, the important thing is that you can solve the error just by changing the name to an accepted name (a name that doesn't have _ or any other none valid characters )

TL;DR change this:

export default {
  name: "_slug"
}

to this:

export default {
  name: "someComponentName"
}

[PlusA2M]

Causes & Fixes

• Error occurred for pages/index.vue and any dynamic route with underscore.
• Error occurred only when navigating from _category/index.vue or _category/_product.vue to other pages.
• Manually adding name of the route as @InerkyJad suggested is working.

Routing hierarchy as below