Currently, I am facing a challenge in calling the modal based on my header component while using nuxt3/vue3. I attempted to place the modal inside the header component and utilize the Teleport function to teleport the modal into the body based on the value of showModal, but unfortunately it is not working as expected. Below is an outline of what I have tried:
Header.vue
<template>
<header class="header sticky-top">
<nav class="container-fluid navbar-light bg-light">
<div class="row justify-content-start">
<div class="col text-end p-3">
<button @click="showModal = true" type="button" class="btn">Register</button>
</div>
</div>
<Modal v-show="showModal"/>
</nav>
</header>
</template>
<script lang="ts">
import Modal from '~~/components/Modal.vue';
export default {
components:{
Modal
},
data(){
return{
showModal: false
}
},
}
</script>
DefaultLayout.vue
<template>
<Header />
<main class="p-4 ">
<div class="container-fluid ">
<slot />
</div>
</main>
<Footer />
</template>
<script lang="ts">
import Header from '~~/components/Header.vue';
import Footer from '~~/components/Footer.vue';
export default {
components: {
Footer,
Header
},
}
</script>
index.vue (homepage)
<template>
<default-layout>
<Listings/>
</default-layout>
</template>
<script lang="ts">
import DefaultLayout from '~~/layouts/DefaultLayout.vue';
import Listings from '~~/components/Listings.vue';
export default {
setup() {
},
components: {
DefaultLayout,
Listings
}
}
</script>
Modal.vue
<template>
<Teleport to="body">
<div class="modal show" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</Teleport>
</template>
<script lang="ts">
export default{
props:{
showModal: Boolean
}
}
</script>