One interesting feature is the Vue component named DisplayContent,
<template>
<div></div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import Home from "@/components/Home.vue";
@Component({
components: {
Home
}
})
export default class DisplayContent extends Vue {}
</script>
<style scoped></style>
And within this component, there is a child component called Home, here is its structure,
<template>
<div id="content-container">
<v-container>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium,
voluptates. Blanditiis neque dolore adipisci? Ad temporibus dolorum nihil
nam necessitatibus ratione, atque sint. At nostrum quos quas odit
recusandae sunt.
</v-container>
</div></template
>
<script lang="ts">
import { Vue } from "vue-property-decorator";
export default class Home extends Vue {}
</script>
<style>
#content-container {
padding-top: 3%;
}
</style>
Currently, when loading the 'Display' component inside the main App.vue, it results in a blank page with an error message stating -
TypeError: Cannot set property 'components' of undefinedInterestingly, upon removing v-component from the Home component, the application loads without any errors -
<template>
<div id="content-container">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium,
voluptates. Blanditiis neque dolore adipisci? Ad temporibus dolorum nihil
nam necessitatibus ratione, atque sint. At nostrum quos quas odit
recusandae sunt.
</div></template
>
<script lang="ts">
import { Vue } from "vue-property-decorator";
export default class Home extends Vue {}
</script>
<style>
#content-container {
padding-top: 3%;
}
</style>
Another observation is that if the Home component (along with v-container) is directly included within the Display component, everything renders correctly.
The question arises as to why having v-container inside the Home component leads to failure in rendering and causes errors?