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

Answer 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',
}

Answer 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'

Answer 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',
    ...
  }