Is there a way to trigger a modal window to open when a button is clicked without storing the modal window in the header?
file header:
<template>
<section class="header">
<div class="header-container">
<div class="header_start">
<a href="#!" class="header__logo">logo</a>
</div>
<div class="header-buttons_end">
<button class="header_button" @click="isOpen = true; console.log('Button clicked')">Sign In</button>
<teleport to="body">
<Authorization v-if="isOpen" />
</teleport>
</div>
</div>
</section>
</template>
<script setup lang="ts">
import Authorization from "@/components/ModalWindow/Authorization.vue"
</script>
file modal:
<template>
<MazDialog v-model="isOpen" title="Dialog Title">
<p>
Your content
</p>
<template #footer="{ close }">
<MazBtn @click="close">
Confirm
</MazBtn>
</template>
</MazDialog>
</template>
<script setup>
import { ref } from 'vue'
import MazDialog from 'maz-ui/components/MazDialog'
const isOpen = ref(false)
</script>
I've gone through the documentation but I'm still unclear on how to implement calling a modal window on click.
(using nuxt)