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

Quinate

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

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

Gresham

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

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. – Magnien

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'

Pamplona

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

Vite

Answer 4

If you are using vue 2.x with vue-property-decorator it can get this problem when class of vue component looks like:

@Component({})
export default class MyComponent extends Vue {
...
}

You should remove ({}) or set specific value for the name field - @Component or @Component({ name: 'MyComponent' }).

Trichomoniasis

Answer 5

I got this error when I had used square brackets for the component list, it took me ages to spot it as all the errors lead elsewhere.

WRONG!

export default {
    name: "WelcomeScreen",
    components: [
        Welcome_Ready,
    ],
}

RIGHT

export default {
    name: "WelcomeScreen",
    components: {
        Welcome_Ready,
    },
}

Chlori