Include Modal.vue in page1.vue and page2.vue - vue.js

Question

I started using Laravel with vue.js, i have created some pages using vue.js
so i have modal that i would like to use in both of pages ( page1.vue and page2.vue ) without re write the modal html code again:
Page1.vue
<template>
<div>Page 1 </div>
</template>
Page2.vue
<template>
<div>Page 2 </div>
</template>
How can i share a modal.vue with this two pages

Answer 1

Just import the modal component into both pages. Here ive done it with a bool modalBool that will toggle weather the modal is displayed or not.
<template>
<div>
Page 1
<modal v-if="modalBool"> </modal>
</div>
</template>
<script>
import Modal from "./Modal.vue";
export default {
components: {
Modal,
},
data() {
return {
modalBool: false,
};
},
};
</script>
<style lang="scss" scoped></style>
You can add things like on close to reset the bool in the parent
<template>
<div>
Page 1
<modal v-if="modalBool" v-on:close="showInvitationModal = false"> </modal>
</div>
</template>
Here is an example of my modal that will emit close when closed. The parent is listening for this close and will reset the modalBool. This will be emitted if the user clicks outside of the modal or on the X
<template>
<transition name="component-fade" mode="out-in">
<div class="modal-background" #click.self="$emit('close')">
<div class="modal-body shadow">
<h2 class="modal-title">
<div>{{ title }}</div>
<div>
<button class="btn-clear" #click="$emit('close');">
<font-awesome-icon :icon="timesIcon" class="pointer" />
</button>
</div>
</h2>
<div>
<slot></slot>
</div>
</div>
</div>
</transition>
</template>