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

[arraintxo]

Hi,

sorry for bumping this thread, but is there any workaround when using <script setup> syntax?

[MartinX3]

Sadly there is no workaround for the <script setup> syntax (with typescript). (Using nuxtjs 2.16.0 + bridge)

[arraintxo]

I already migrated to Nuxt 3:

I had to change path from _category/_product.vue to [category]/[product].vue and works perfectly :)

[dbssman]

Sadly there is no workaround for the <script setup> syntax (with typescript). (Using nuxtjs 2.16.0 + bridge)

You can have a second script block, where you the name "trick" like this:

<template>
</template>

<script>
// extra options like name, layout...
export default {
 name: '<your-page-name-or-whatever>'
}
</script>

<script setup>
// Your normal script setup stuff here
</script>

Also remember that the extra script tag has to be in the same lang like your setup tag so if you are using typescript

<template>
</template>

<script lang="ts">
// extra options like name, layout...
export default {
 name: '<your-page-name-or-whatever>'
}
</script>

<script setup lang="ts">
// Your normal script setup stuff here
</script>

Hope that helps :)

[MartinX3]

Please read the vue documentation.
You can write the name information in setup as well.

[dbssman]

Please read the vue documentation. You can write the name information in setup as well.

Not for me in a nuxt + bridge setup, since defineOptions does not work there

While other things like defineProps and defineEmits do work.

So yes, I've read the docu, but afaik nuxt2 with bridge is not fully compatible with all the macros that we have in a vue3^ project :)

[MartinX3]

That's sad, especially since a switch to nuxt 3 is not so good since vuetify 3 is still not feature complete.

I migrated away from nuxt to quasar because they have the same features and migrate to newer vuejs versions instantly with their framework and gui components. Also they have less boilerplate code.

[dbssman]

That's sad, especially since a switch to nuxt 3 is not so good since vuetify 3 is still not feature complete.

I migrated away from nuxt to quasar because they have the same features and migrate to newer vuejs versions instantly with their framework and gui components. Also they have less boilerplate code.

Yes, we also have the pain of having vuetify and no good way of migrating, but we are taking the chance to just move completely out of a material design framework and build our own components using tailwind (so that we keep it framework and framework version agnostic).

In general, a lot of things are improvable while migrating to nuxt3 but we have to live with what is available.

if someone wants to know, general things that do not work:

<script setup lang="ts">
//Typescript
import type { XInterface } from 'y'

//this does not work, it is not able to infer your props properly in nuxt + bridge
interface Props extends XInterface {
//more things
}

defineProps<Props>()

//something like this does work
import type {XInterface} from 'y'

interface Props {
attribute:XInterface
//moreprops
}

//Macros
defineOptions
defineSlots
defineModel (easily replaceable with a writable computed)
</script>

Generic components do not work either, and in general trying to work with imported types for props is kinda annoying.

In any case, this is not a part of the router-module nor this thread, But I hope it helps someone