Vue doesn't render second component if the previous self-terminates

Question

In my root component, App.vue, I have the following template code:

<template>
<div class="app-wrapper">
    <Header></Header>
    <Panel></Panel>
    <Showcase/>
    <Modal/>
    <Footer/>
</div>
</template>

I was just trying to mock-up an app I'm building, so the parts aren't nested and don't contain anything meaningful.

Each of those Vue Components contains the following in their .vue:

<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>

and this is the same for Header, Showcase, Modal and Footer.

For some odd reason, with the above code, only the Header, Panel, and Showcase components render. If I change <Showcase/> to <Showcase></Showcase> then the Modal also renders.

Shouldn't it render regardless of whether or not the component self terminates its JSX?

I'm new to Vue and set up the project myself with TS, and Parcel, but I don't think know if that has anything to do with it.

score 4 · Accepted Answer · answered Jun 17 '19 at 07:29

This is a known issue with Parcel bundler. Parcel's posthtml as an HTML parser which break with custom self-closing HTML tags.

As a temporary solution, you must tell bundler to explicitly recognize self-closing custom elements. Add the following config to your package.json:

"posthtml": {
    "recognizeSelfClosing": true
}

This issue is being tracked here on these threads: issue-1 and issue-2.

score 1 · Answer 2 · answered Jun 16 '19 at 19:57

I think the best thing here is to quote the official vue style guide :

Components with no content should be self-closing in single-file components, string templates, and JSX - but never in DOM templates.

You can find the full documentation here : https://vuejs.org/v2/style-guide/#Self-closing-components-strongly-recommended

Unfortunately, HTML doesn’t allow custom elements to be self-closing - only official “void” elements. That’s why the strategy is only possible when Vue’s template compiler can reach the template before the DOM, then serve the DOM spec-compliant HTML.

score 1 · Answer 3 · answered Jun 17 '19 at 13:27

Vue templates need to be a valid HTML. The self closing tags are of XHTML syntax and which are now outdated. You can follow the style guide of Vue documentation Official Style Guide Vuejs

for more information on valid tags in HTML please see Are (non-void) self-closing tags valid in HTML5?

Vue doesn't render second component if the previous self-terminates

3 Answers3