Invalid component name: "pages/product/_slug.vue". Component names should conform to valid custom element name in html5 specification. #67
Comments
ghost
added
the
|
Hi @simplenotezy Are you using this module? |
|
same issue when using it together with nuxt-i18n and hash routes link code
error |
|
Can you please provide a reproduction with CodeSandBox please? |
I had the same issue i just added the name in index.vue and stopped of show the warn.
|
|
I also frequently see this error, can confirm adding |
Yep, same for me. Got the error and resolved it by adding |
|
i also get the error in "nuxt": "^2.15.8" - any news? |
|
Same here. But not on page load. Just happen when click on some link. |
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 Note: this error occurs only when you have a some dynamic routing set up with the page the page that you access doesn't have to be TL;DR to this: |
Causes & Fixes
Routing hierarchy as below |
|
Hi, sorry for bumping this thread, but is there any workaround when using |
|
Sadly there is no workaround for the |
|
I already migrated to Nuxt 3: I had to change path from |
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 :) |
|
Please read the vue documentation. |
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 :) |
|
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. |
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 |
Version
v1.3.0
Steps to reproduce
I have some dynamic routes. My folder structure is this:
I link to the route like this:
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:
I have found this issue, but to little avail: nuxt/nuxt#165
What is expected ?
No error should be outputted
What is actually happening?
An error is being outputted even though it links just fine
The text was updated successfully, but these errors were encountered: