Vue Template error: Unknown custom element #288

New Issue

fergalmoran · 2025-08-09T17:15:43Z

fergalmoran commented

2025-08-09 17:15:43 +00:00

Originally created by @Zaid-Safadi on 12/6/2017

I'm trying to use the Vue template and also learning Vue. Things seems to be working until I try to use a nested component then I keep getting the error (in the browser console):

Unknown custom element: <mylistitem> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

While this might be a vue issue I strongly believe something is messed up with the template or tools causing this as I have tried all options I can think of, even the names of my components are all lower case just so I get no naming problems. Here is my code:

app.ts:

import Vue from 'vue';
import { Component } from 'vue-property-decorator';


@Component({
    components: {
        MenuComponent: require('../navmenu/navmenu.vue.html'),
        mylistitem: require('../mylistitem/mylistitem.vue.html')
    }
})
export default class AppComponent extends Vue {
}

My list is rendered fine as I have it registered i the boot.ts routes and the navmenu

mylist.vue.html:

<template>
    <div>
        <div>{{ myTitle }}</div>
        <mylistitem/> 
    </div>
</template>

<script src="./mylist.ts"></script>

mylist.ts:

import Vue from 'vue';
import { Component } from 'vue-property-decorator';

@Component
export default class MyList extends Vue {
    myTitle = "Rendering My List:";
}

This is the component that I can't display!

mylistitem.vue.html:

<template>
    <div>Hello from my list item</div>
</template>

<script src="./mylistitem.ts"></script>

mylistitem.ts:

import Vue from 'vue';
import { Component } from 'vue-property-decorator';

@Component({name:'mylistitem'})
export default class mylistitem extends Vue {
    
}

*Originally created by @Zaid-Safadi on 12/6/2017* I'm trying to use the Vue template and also learning Vue. Things seems to be working until I try to use a nested component then I keep getting the error (in the browser console): `Unknown custom element: <mylistitem> - did you register the component correctly? For recursive components, make sure to provide the "name" option. ` While this might be a vue issue I strongly believe something is messed up with the template or tools causing this as I have tried all options I can think of, even the names of my components are all lower case just so I get no naming problems. Here is my code: app.ts: ``` import Vue from 'vue'; import { Component } from 'vue-property-decorator'; @Component({ components: { MenuComponent: require('../navmenu/navmenu.vue.html'), mylistitem: require('../mylistitem/mylistitem.vue.html') } }) export default class AppComponent extends Vue { } ``` My list is rendered fine as I have it registered i the boot.ts routes and the navmenu mylist.vue.html: ``` <template> <div> <div>{{ myTitle }}</div> <mylistitem/> </div> </template> <script src="./mylist.ts"></script> ``` mylist.ts: ``` import Vue from 'vue'; import { Component } from 'vue-property-decorator'; @Component export default class MyList extends Vue { myTitle = "Rendering My List:"; } ``` This is the component that I can't display! mylistitem.vue.html: ``` <template> <div>Hello from my list item</div> </template> <script src="./mylistitem.ts"></script> ``` mylistitem.ts: ``` import Vue from 'vue'; import { Component } from 'vue-property-decorator'; @Component({name:'mylistitem'}) export default class mylistitem extends Vue { } ```

fergalmoran closed this issue

2025-08-09 17:15:43 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#288