Currently, I am initializing my Vue instance in the following manner:
import ListClubsComponent from "./components/clubs/list-clubs.vue";
new Vue({
el: "#app",
components: {
"list-clubs": ListClubsComponent
}
});
It seems to be functioning correctly, but there is a peculiar behavior where only the Vue component is rendered if it is placed inside <div id="app">. Any other HTML content within the app div does not render.
This setup is being used in conjunction with Laravel and Blade. The default template structure is as follows:
<body>
@include('templates.header')
<main id="app">
<h1>This won't be rendered</h1>
<!-- This will be rendered -->
<list-clubs :player="{!! $player !!}"></list-clubs>
</main>
@include('templates.footer')
</body>
list-clubs.vue
<template>
<h1>List Clubs Component</h1>
</template>
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Clubs } from "../../modules/clubs";
export default class ListClubsComponent extends Vue {}
</script>