My experience with vuejs and parcel has been quite interesting. In my main component App.vue, I call a subcomponent Hello.vue using <Hello/> within App's template. However, I encountered a strange bug - if the <Hello/> is not wrapped inside a div tag, everything that follows in the html doesn't display. Take a look at the code snippets below to see what I mean:
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>
If you need visual proof, here are screenshots comparing when <Hello/> is wrapped in a div versus when it's not:
I appreciate any insight or advice on this issue!
EDIT: No errors were found in the console. I also want to mention that I tried using webpack instead of parcel and did not encounter this bug, so it might be specific to parcel.