Within my primary component, known as App.vue, I have structured the template code like so:
<template>
<div class="app-wrapper">
<Header></Header>
<Panel></Panel>
<Showcase/>
<Modal/>
<Footer/>
</div>
</template>
This is simply a mock-up of an application I am working on, hence the lack of nesting and meaningful content within each part.
Each of these Vue Components follow a similar structure in their respective .vue files:
<template>
<div class="panel-wrapper">Panel</div>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
name: "Panel"
});
</script>
<style lang="scss">
.panel-wrapper {
background: orange;
font-size: 1.75rem;
}
</style>
The same format applies to Header, Showcase, Modal, and Footer.
Strangely, when implementing the above code, only the Header, Panel, and Showcase components are visible. If I modify <Showcase/> by adding closing tags as
, the Modal also becomes visible.<Showcase></Showcase>
Isn't it expected for components to render regardless of whether they self-terminate their JSX?
I am new to Vue and have independently set up the project with TypeScript and Parcel. I am unsure if this setup influences the rendering issue.