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

Question

I am using Nuxt.js and 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

Solution 1

Where you have name in your component remove the space between the name. e.g

export default {
  name: 'Assign Role'
}

Change it to:

export default {
  name: 'AssignRole',
}

Solution 2

The reason of this error message is that the name of the _slug.vue component which is the same as the file name.

I expect it name='_slug.vue' you need to change it to something like this name='ProductItem'

Solution 3

I am not sure this is a bug or what.

But after giving a name to my components, fixed this issue as follows.

  export default {
    name: 'NameOfTheCompnent',
    ...
  }

Comments

[Toni Michel Caubet]

have you tried <nuxt-link :to="{ name: 'product/slug', params: { slug: product.slug } }"> ?

[ioan]

or add it if you don't have an export from that file

[remed.io]

He was correct. When you do NOT specify a "name" in the component, Nuxt assigns the path as the name. You need to add: export default { name: 'componentName', ... } to fix the warning.