<ModalsContainer>

<ModalsContainer> is a renderless component that is responsible for hosting the Vue instances of your dynamic modals. You don't need to add anything else to the <ModalsContainer>. As long as you include it in your Vue tree once, you can use dynamic modals:

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

<template>
  <!-- Your app -->
  <ModalsContainer />
</template>

In the component tree the modals are children of <ModalsContainer>, so put it inside any component whose provided context the modal content needs, such as Nuxt UI's <UApp>.

Checkout the Prerequisite section to learn how to use dynamic modals with useModal().

Advanced: isolated instances

For advanced scenarios (e.g. micro frontends) you can create an isolated provider with its own useModal() and useVfm() that don't share state with the default one. <ModalsProvider> provides the isolated context to its subtree and hosts the dynamic modals by itself:

import { createModalsProvider } from 'vue-final-modal'

const { ModalsProvider, useModal, useVfm } = createModalsProvider()

Read more in API > Composables > Use Modal.