Vue shared component not showing up - laravel

Question

I need some help in debugging a problem that is driving me nuts.
I have a laravel project with Vue3 as the frontend, using InertiaJS for connecting to the backend.
The folder structure is as follows
|_resources
|__js
|___Pages
|____AddContent
|_____Index.vue
|____Home
|_____Index.vue
|___Shared
|____Footer.vue
My Footer.vue (below) is working fine when called at Home/Index.vue
<div class="m-6 text-ternary-dark dark:text-ternary-light text-lg">
<div class="flex justify-between">
<Link href="/">
<i data-feather="home" class="ml-0 sm:ml-1 mr-2 sm:mr-3 w-5 sm:w-6"></i>
</Link>
<Link href="/market"><i data-feather="package" class="ml-0 sm:ml-1 mr-2 sm:mr-3 w-5 sm:w-6"></i></Link>
<Link href="/add"><i data-feather="plus-square" class="ml-0 sm:ml-1 mr-2 sm:mr-3 w-5 sm:w-6"></i></Link>
<Link href="/message"><i data-feather="send" class="ml-0 sm:ml-1 mr-2 sm:mr-3 w-5 sm:w-6"></i></Link>
<Link href="/profile"><i data-feather="user" class="ml-0 sm:ml-1 mr-2 sm:mr-3 w-5 sm:w-6"></i></Link>
</div>
</div>
</template>
<script>
import { Link } from "#inertiajs/inertia-vue3";
import feather from 'feather-icons';
export default {
components: {
Link,
},
};
</script>
Home.vue
<template>
<Header />
<div class="mb-4 text-ternary-dark dark:text-ternary-light text-lg">
<!-- The top section of homepage, reserved for hastags, news, and other features -->
<div>
<p>Top Component</p>
</div>
<!-- The rest of the homepage contents -->
<div>
<p>The Rest</p>
<div class="wrapper" v-if="blogs.length">
<div class="blog" v-for="blog in blogs" :key="blog">
<Link href="blogs/{id}/show" method="get" :data="{id: blog.id}">
<!-- <img v-bind:src="blog.image"/> -->
<small>posted by: {{ blog.id }}</small>
{{ blog.title }}
</Link>
</div>
</div>
</div>
</div>
<Footer />
</template>
<script>
import { Link } from '#inertiajs/inertia-vue3'
import Header from "../../Shared/Header.vue";
import Footer from "../../Shared/Footer.vue";
export default {
components: {
Header,
Footer,
Link
},
props: {
blogs: Object,
},
};
</script>
Here's the look of Home/Index.vue:
Then, the problem is, at the AddContent/Index.vue (below), I have the same code as the Home/Index.vue to import the footer.
<template>
<div class="mb-4 text-ternary-dark dark:text-ternary-light text-lg">
<form #submit.prevent="submit">
<label for="title">Title: </label>
<input type="text" id="title" v-model="form.title" placeholder="type something" class="rounded-full py-1 px-4"/>
<label for="body">Body: </label>
<input type="text" id="body" v-model="form.body" placeholder="type something" class="rounded-full py-1 px-4"/>
<button type="submit">Submit</button>
</form>
</div>
<Footer />
</template>
<script>
import { reactive } from "vue";
import { Inertia } from "#inertiajs/inertia";
import Footer from "../../Shared/Footer.vue";
export default {
components: {
Footer,
},
setup() {
const form = reactive({
title: null,
body: null,
});
function submit() {
Inertia.post("/", form);
}
return { form, submit };
},
};
</script>
<style scoped>
* {
outline: 1px solid red;
}
</style>
However, in my AddContent/index.vue, the footer bar just does not show up.
I have no idea what the heck is going on... as the red outline was wrapping the footer just fine but nothing from the footer passed to the AddContent page. Any hints on this would be greatly appreciated!

Answer 1

#ShayaUlman suggestion resolved the issue by changing the component into a layout https://inertiajs.com/pages.
For future reference, if your layout does not appear, try to remove or comment out the contents, re-start npm and re-add the contents. This appears to resolve the issue afterwards.