# Modals

Sooooo for Modals (popups, dialogs, whatever...lets use Modals), I think VueFinalModal supports what we need?

You put a component at the top level App.vue

<template>
  <RouterView />
  <ModalsContainer />
</template>

<script setup lang="ts">
import { RouterView } from "vue-router";
import { ModalsContainer } from "vue-final-modal";
</script>

Then we'd have a ModalComponent in Nostra that looks pretty:

 <vue-final-modal
    v-slot="{ close }"
    v-bind="$attrs"
  >
    <button class="modal__close" @click="close">X</button>
    <slot name="content"

  </vue-final-modal>
</template>

Then in our app we can do:

$vfm.show({
	component: NostraModal,
	bind: {
		title: 'Note', // Props for Nostra Modal
	},
	slots: { content: { component: ModalContents } }, // Props etc can go here too (or even { content: '<p>Content</p>' } is valid)
});

ModalContents would have emits etc to pass data up, and you can only ever have 1 dialog as the go in the same DOM hole. ModalComponent could listen for modal:close events from it's slot too, as well as the regular close button.

I don't think the parent calling $vfm.show cares about the modal state, so we don't need showPopupX everywhere?

I _think_ it'll work with more complex setups, but it works with my simple Vault sample