Creating a "Loader" component that is fully independent and functional just by being included in the layout requires exposing some methods for use. Here is the code I have come up with:
<script setup>
let active = false;
function show() {
active = true;
}
function hide() {
active = false;
}
window.loader = {show, hide};
</script>
<template>
<Transition name="loader">
<div class="loader" v-if="active">
</div>
</Transition>
</template>
<style scoped>
/* All styles and transitions */
.loader {
position: fixed;
height: 100vh;
width: 100vw;
background: #000;
z-index: 9999;
top: 0;
left: 0;
opacity: 0.5;
}
</style>
However, the show and hide methods do not update the internal state of the component as intended.
The goal is to include it in BaseLayout.vue like this:
<template>
<div class="root">
<Loader />
<slot>All application body</slot>
</div>
</template>
Is there a way to globally expose these functions and effectively change the internal state of the loader component? Are there any patterns or solutions to address this issue efficiently, considering its usage across multiple layouts?