In Vue, it always renders the last registered component and ignores any others, even if they are not used at all.
//main.ts
import Vue from 'vue';
Vue.component('component-one', require('./components/ComponentOne.vue'));
Vue.component('component-two', require('./components/ComponentTwo.vue'));
const app = new Vue({
el: '#app1',
vuetify,
})
//ComponentOne
<template>
<h2>Component One</h2>
</template>
<script lang="ts">
import Vue from 'vue'
export default class ComponentOne extends Vue{
}
</script>
//ComponentTwo
<template>
<h2>Component Two</h2>
</template>
<script lang="ts">
import Vue from 'vue';
export default class ComponentTwo extends Vue{
}
</script>
<body>
<div id="app1">
<!-- No matter what I put here, only the last registered component will be displayed -->
<h2>Title</h2>
<component-one></component-one>
<component-two></component-two>
</div>
<script src="/js/app.js"></script>
</body>
The page is rendering the content of ComponentTwo instead of ComponentOne. See a screenshot here.
If I remove the component registration lines, I can use external component libraries (like Vuetify) inside the div tag, but this restricts my custom components. I had expected to freely use both custom and external components within the same div tag.
Edit: Thank you for the responses. Is there a way to incorporate these components into the HTML element as if they were part of a template? Something like:
<!-- This could be an index.html or, in my case, a Laravel Blade view
<body>
<div id="app1">
<component-one></component-one>
<component-two></component-two>
</div>
<script src="/js/app.js"></script>
</body>
Vuetify components function correctly following this approach if no custom components are registered.