vuejs component hides everything after if not put inside a div

Question

I started using vuejs with parcel. I have a main component App.vue from which I call a subcomponent Hello.vue using <Hello/> in App's template. I have a weird bug if I don't put the <Hello/> inside a div tag, everything that comes after in html doesn't show. The code is below:

index.js

import Vue from "vue";
import App from "./App";

new Vue({
  el: "#app",
  components: { App },
  template: "<App/>"
});

App.vue

<template>
  <div id="app">
    <h3>bla bla</h3>

    <div><Hello/></div>
    <!-- if not put inside a div, hides everything after-->

    <h2>test</h2>
    <p>kldsfnlkdsjfldsfds</p>
    <h5>skjdnsqkfdnlkdsqf</h5>
  </div>
</template>

<script>
import Hello from "./components/Hello";

export default {
  name: "App",
  components: {
    Hello
  }
};
</script>

<style>
</style>

Hello.vue

<template>
  <div>
    <h1>{{ message }}</h1>
    <h2>Hello {{ person.firstname}} {{person.lastname}}</h2>
    <label>
      Firstname:
      <input type="text" v-model="person.firstname">
    </label>
    <label>
      Lastname:
      <input type="text" v-model="person.lastname">
    </label>
    <label>
      Message:
      <input type="text" v-model="message">
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      person: {
        firstname: "John",
        lastname: "Doe"
      },
      message: "Welcome !"
    };
  }
};
</script>

<style>
</style>

Here is a screenshot of what I get without wrapping <Hello/> with a <div></div> And then with a div:

Thanks !

EDIT: I don't get an error in the console. I forgot to add that I tried with webpack and I don't get this bug, so It's most likely related to parcel.

No I don't get an error in the console. I forgot to add that I tried with webpack and I don't get this bug, so It's most likely related to parcel. — Amine SOUIKI, May 01 '19 at 09:53
Also, post the generated code so we can see if your component is missing from the DOM, or if it is hidden by CSS settings. — Steven Spungin, May 01 '19 at 11:44
Thanks @StevenSpungin that worked. Do you have the explanation why the two syntaxes are possible ? and why does `````` works well when using webpack but is problematic with parcel ? — Amine SOUIKI, May 01 '19 at 11:57
@AmineSOUIKI I put an explanation in the solution below. Did your source have the element BTW? — Steven Spungin, May 01 '19 at 15:22

score 1 · Answer 1 · edited Jul 15 '22 at 04:34

1

When you use a SFC (Single File Component) you must have only one element inside the <template>. Then, inside that one element you can have as many other elements as you like.

Have a look at the "Example sandbox" Simple to do app in the official documentation: https://v2.vuejs.org/v2/guide/single-file-components.html#Example-Sandbox

The file ToDoList.vue is a good example in here: https://codesandbox.io/s/o29j95wx9

edited Jul 15 '22 at 04:34

tony19

125,647
18
229
307

answered May 01 '19 at 10:15

Adriano

3,788
5
32
53

1

Actually that's not the problem. I think I wasn't accurate enough, I am not refering to the div the wraps the whole App.vue (which has id=app). But I have to do this to not have the bug : ```
``` inside the ```
– Amine SOUIKI May 01 '19 at 11:22

score 1 · Accepted Answer · answered May 01 '19 at 15:22

Some browsers do not display elements correctly if they use <foo /> without a closing tag, instead of <foo></foo>.

If items are not rendered with the closing tag, this may be your issue.

Some vue components will generate the closing tag from your template, even though you do not have it in your source, and others will not.

vuejs component hides everything after if not put inside a div

2 Answers2