### Installing Vue Final Modal

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/2.get-started/1.guide/2.setup.md

These commands demonstrate how to install the `vue-final-modal` package using different package managers: Yarn, npm, and pnpm. This is the first step to integrate the library into your project.

```bash
yarn add vue-final-modal
```

```bash
npm install vue-final-modal
```

```bash
pnpm add vue-final-modal
```

--------------------------------

### Vue Final Modal Contribution Development Setup

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/1.index.md

These pnpm commands guide contributors through setting up the development environment for Vue Final Modal, including installing dependencies, building the library, and running the documentation and viteplay servers for local testing and development.

```bash
# Install packages
pnpm install --shamefully-hoist

# Build vue-final-modal library first
pnpm build:vfm

# Run both docs and viteplay
pnpm dev

# Run docs: http://localhost:3000/
pnpm dev:docs

# Run viteplay: http://localhost:5173/
pnpm dev:viteplay
```

--------------------------------

### Development Commands for Vue Final Modal with pnpm (Bash)

Source: https://github.com/vue-final/vue-final-modal/blob/master/README.md

This snippet provides a set of pnpm commands for setting up and running the Vue Final Modal project locally. It includes commands for installing dependencies, building the library, and running various development servers for documentation and the viteplay example.

```bash
# Install packages
pnpm install --shamefully-hoist

# Build vue-final-modal library first
pnpm build:vfm

# Run both docs and viteplay
pnpm dev

# Run dev for vue-final-modal
pnpm dev:vfm

# Run docs: http://localhost:3000/
pnpm dev:docs

# Run viteplay: http://localhost:5173/
pnpm dev:viteplay
```

--------------------------------

### Creating Dynamic Modals with useModal() in Vue

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/2.get-started/1.guide/2.setup.md

This example demonstrates how to use the `useModal()` composable to programmatically open and close a dynamic modal. It requires `<ModalsContainer>` in the main `App.vue` file and allows passing component, attributes, and slots for content.

```Vue
<script setup lang="ts">\nimport { ModalsContainer, useModal } from 'vue-final-modal'\nimport ModalConfirm from './ModalConfirm.vue'\n\nconst { open, close } = useModal({\n  component: ModalConfirm,\n  attrs: {\n    title: 'Hello World!',\n    onConfirm() {\n      close()\n    },\n  },\n  slots: {\n    default: '<p>UseModal: The content of the modal</p>',\n  },\n})\n</script>\n\n<template>\n  <VButton @click="() => open()">\n    Open Modal\n  </VButton>\n\n  <ModalsContainer />\n</template>
```

--------------------------------

### Starting Nuxt Module Development Playground (Shell)

Source: https://github.com/vue-final/vue-final-modal/blob/master/packages/nuxt/README.md

This command initiates the development server for the Nuxt module's playground, allowing developers to test and interact with the module in a live environment.

```Shell
npm run dev
```

--------------------------------

### Setting up ModalsContainer in Vue App

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/3.api/2.composables/1.use-modal.md

This snippet demonstrates the prerequisite setup for using `useModal()` by integrating the `<ModalsContainer />` component into the main `App.vue` file. It ensures that dynamic modals can be rendered correctly within the application.

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

<template>
  <div>
    ...
    <ModalsContainer />
  </div>
</template>
```

--------------------------------

### Opening Modal with Atomic CSS - Vue

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/2.get-started/1.guide/2.setup.md

This Vue snippet demonstrates how to open a modal using `useModal`, similar to the plain CSS example, but utilizing a modal component designed with atomic CSS (TailwindCSS). It configures `ModalConfirm` as the component, passing a title and a confirmation handler, along with default slot content.

```vue
<script setup lang="ts">
import { ModalsContainer, useModal } from 'vue-final-modal'
import ModalConfirm from './ModalConfirm.vue'
const { open, close } = useModal({
  component: ModalConfirm,
  attrs: {
    title: 'Hello World!',
    onConfirm() {
      close()
    },
  },
  slots: {
    default: '<p>UseModal: The content of the modal</p>',
  },
})
</script>

<template>
  <VButton @click="() => open()">
    Open Modal
  </VButton>

  <ModalsContainer />
</template>
```

--------------------------------

### Controlling Modals by ID with useVfm() in Vue

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/2.get-started/1.guide/2.setup.md

This example shows how to manage modal visibility using a unique `modalId` and the `useVfm()` composable, without relying on `v-model`. The `useVfm()` instance allows opening and closing specific modals by their assigned ID.

```Vue
<script setup lang="ts">\nimport { useVfm } from 'vue-final-modal'\n\nconst vfm = useVfm()\nconst modalId = Symbol('modalId')\n\nfunction confirm() {\n  vfm.close(modalId)\n}\n</script>\n\n<template>\n  <VButton @click="() => vfm.open(modalId)">\n    Open Modal\n  </VButton>\n\n  <ModalConfirm\n    :modal-id="modalId"\n    title="Hello World!"\n    @confirm="() => confirm()"\n  >\n    <p>The content of the modal</p>\n  </ModalConfirm>\n</template>
```

--------------------------------

### Installing Vue Final Modal Library

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/1.index.md

This command installs the latest stable version of the Vue Final Modal library using npm, making it available for use in a Vue 3 project.

```bash
npm install vue-final-modal@latest
```

--------------------------------

### Opening Fullscreen Modal with VueFinalModal (Preview.vue)

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/4.use-cases/5.modal-fullscreen.md

This snippet demonstrates how to open a `ModalFullscreen` component using the `useModal` composable from `vue-final-modal`. It configures the modal with a title, a close handler, and default slot content, then provides a button to trigger its display. The `ModalsContainer` is essential for rendering the modal.

```vue
<script setup lang="ts">
import { ModalsContainer, useModal } from 'vue-final-modal'
import ModalFullscreen from './ModalFullscreen.vue'
const { open, close } = useModal({
  component: ModalFullscreen,
  attrs: {
    title: 'Hello World!',
    onClose() {
      close()
    },
  },
  slots: {
    default: '<p>ModalFullscreen: The content of the modal</p>',
  },
})
</script>

<template>
  <VButton @click="() => open()">
    Open Modal
  </VButton>

  <ModalsContainer />
</template>
```

--------------------------------

### Opening a Bottom Modal with VueFinalModal (Preview.vue)

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/4.use-cases/6.modal-bottom.md

This Vue.js snippet demonstrates how to programmatically open a `ModalBottom` component using the `useModal` composable from `vue-final-modal`. It configures the modal with a title, a close callback, and default slot content, then provides a button to trigger its display.

```Vue.js
<script setup lang="ts">
import { ModalsContainer, useModal } from 'vue-final-modal'
import ModalBottom from './ModalBottom.vue'
const { open, close } = useModal({
  component: ModalBottom,
  attrs: {
    title: 'Hello World!',
    onClose() {
      close()
    },
  },
  slots: {
    default: '<p>ModalBottom: The content of the modal</p>',
  },
})
</script>

<template>
  <VButton @click="() => open()">
    Open Modal
  </VButton>

  <ModalsContainer />
</template>
```

--------------------------------

### Opening a Modal Login Form in Vue

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/4.use-cases/7.modal-login-form.md

This snippet demonstrates how to open the ModalLoginForm using useModal from vue-final-modal. It defines an onSubmit handler that alerts the form data and closes the modal upon submission. The ModalsContainer component is essential for rendering all modals.

```Vue
<script setup lang="ts">
import { ModalsContainer, useModal } from 'vue-final-modal'
import ModalLoginForm from './ModalLoginForm.vue'

const { open, close } = useModal({
  component: ModalLoginForm,
  attrs: {
    onSubmit(formData) {
      alert(JSON.stringify(formData, null, 2))
      close()
    },
  },
})
</script>

<template>
  <VButton @click="open">
    Open Modal
  </VButton>

  <ModalsContainer />
</template>
```

--------------------------------

### Setting Up Development Environment with pnpm for Vue Final Modal

Source: https://github.com/vue-final/vue-final-modal/blob/master/packages/vue-final-modal/README.md

This snippet provides a series of pnpm commands to set up and run the development environment for Vue Final Modal. It covers installing dependencies, building the library, and running the documentation and viteplay servers for local development and testing.

```bash
# Install packages
pnpm install --shamefully-hoist

# Build vue-final-modal library first
pnpm build:vfm

# Run both docs and viteplay
pnpm dev

# Run docs: http://localhost:3000/
pnpm dev:docs

# Run viteplay: http://localhost:5173/
pnpm dev:viteplay
```

--------------------------------

### Registering Vue Final Modal Plugin in Nuxt 3

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/2.get-started/1.guide/2.setup.md

This snippet demonstrates how to register the `vue-final-modal` plugin within a Nuxt 3 application's plugin file. It uses `defineNuxtPlugin` to create a Nuxt plugin, initializes `createVfm`, and then applies it to the `nuxtApp.vueApp` instance.

```typescript
import { createVfm } from 'vue-final-modal'

export default defineNuxtPlugin((nuxtApp) => {
  const vfm = createVfm() as any

  nuxtApp.vueApp.use(vfm)
})
```

--------------------------------

### Opening Modal with Plain CSS - Vue

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/2.get-started/1.guide/2.setup.md

This Vue snippet demonstrates how to programmatically open a modal using the `useModal` composable from `vue-final-modal`. It configures `ModalConfirmPlainCss` as the modal component, passing a title and a confirmation handler via `attrs`, and provides default slot content for the modal body.

```vue
<script setup lang="ts">
import { ModalsContainer, useModal } from 'vue-final-modal'
import ModalConfirmPlainCss from './ModalConfirmPlainCss.vue'

const { open, close } = useModal({
  component: ModalConfirmPlainCss,
  attrs: {
    title: 'Hello World!',
    onConfirm() {
      close()
    },
  },
  slots: {
    default: '<p>The content of the modal</p>',
  },
})
</script>

<template>
  <VButton @click="open">
    Open Modal
  </VButton>

  <ModalsContainer />
</template>
```

--------------------------------

### Adding ModalsContainer in Vue 3

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/2.get-started/1.guide/2.setup.md

This Vue 3 snippet demonstrates how to integrate the `<ModalsContainer>` component into an `App.vue` file. This component acts as a crucial container for dynamically created modals, and it only needs to be placed once in the application's component tree.

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

<template>
  <div>
    ...
    <ModalsContainer />
  </div>
</template>
```

--------------------------------

### Adding ModalsContainer in Nuxt 3

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/2.get-started/1.guide/2.setup.md

This Nuxt 3 snippet shows how to add the `<ModalsContainer>` component to a `layouts/default.vue` file. Placing it in a layout ensures that the container for dynamic modals is available across all pages using that layout, requiring only a single inclusion.

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

<template>
  <div>
    Some default layout shared across all pages
    <slot />
    <ModalsContainer />
  </div>
</template>
```

--------------------------------

### Initializing Vue Final Modal 3.x in Vue 3

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/2.get-started/1.guide/3.migration-guide.md

This snippet demonstrates the old method of initializing `vue-final-modal` version 3.x in a Vue 3 application using `vfmPlugin`. It shows how the plugin was imported and registered with the Vue application instance.

```TypeScript
import { vfmPlugin } from 'vue-final-modal'

app.use(vfmPlugin)
```

--------------------------------

### Using ModalConfirm Component in Vue

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/4.use-cases/3.confirm-modal.md

This snippet demonstrates how to integrate and use the `ModalConfirm` component within a parent Vue component. It shows how to control the modal's visibility using `v-model` and handle the `confirm` event.

```vue
<script setup lang="ts">
const show = ref(false)

function confirm() {
  show.value = false
}
</script>

<template>
  <VButton @click="show = true">
    Open Modal
  </VButton>

  <ModalConfirm
    v-model="show"
    title="Hello World!"
    @confirm="() => confirm()"
  >
    <p>The content of the modal</p>
  </ModalConfirm>
</template>
```

--------------------------------

### VueFinalModal Wrapper Component for Login Form

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/4.use-cases/7.modal-login-form.md

This component acts as a wrapper for the LoginFormVorms component, integrating it within a VueFinalModal. It defines the modal's styling classes for centering and content appearance, and forwards the submit event from the inner form component to its parent.

```Vue
<script setup lang="ts">
import { VueFinalModal } from 'vue-final-modal'
import type { FormData } from './LoginFormVorms.vue'
import LoginFormVorms from './LoginFormVorms.vue'

const emit = defineEmits<{
  (e: 'submit', formData: FormData): void
}>()
</script>

<template>
  <VueFinalModal
    class="flex justify-center items-center"
    content-class="relative p-4 rounded-lg bg-white dark:bg-gray-900"
    content-transition="vfm-fade"
    overlay-transition="vfm-fade"
  >
    <LoginFormVorms @submit="formData => emit('submit', formData)" />
  </VueFinalModal>
</template>
```

--------------------------------

### Defining ModalConfirm Component with VueFinalModal

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/4.use-cases/3.confirm-modal.md

This snippet defines the `ModalConfirm` component, which wraps `VueFinalModal`. It uses `defineProps` for a `title` prop and `defineEmits` to handle `update:modelValue` for `v-model` binding and a `confirm` event. TailwindCSS classes are used for styling.

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

defineProps<{
  title?: string
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', modelValue: boolean): void
  (e: 'confirm'): void
}>()
</script>

<template>
  <VueFinalModal
    class="flex justify-center items-center"
    content-class="flex flex-col max-w-xl mx-4 p-4 bg-white dark:bg-gray-900 border dark:border-gray-700 rounded-lg space-y-2"
    @update:model-value="val => emit('update:modelValue', val)"
  >
    <h1 class="text-xl">
      {{ title }}
    </h1>
    <slot />
    <button class="mt-1 ml-auto px-2 border rounded-lg" @click="emit('confirm')">
      Confirm
    </button>
  </VueFinalModal>
</template>
```

--------------------------------

### Importing Vue Final Modal CSS in Nuxt 3

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/2.get-started/1.guide/2.setup.md

This snippet illustrates how to include the `vue-final-modal` CSS file in a Nuxt 3 application by adding it to the `css` array within `nuxt.config.ts`. This method ensures the styles are globally available across the Nuxt project.

```typescript
export default defineNuxtConfig({
  css: ['vue-final-modal/style.css'],
})
```

--------------------------------

### Importing Vue Final Modal CSS in Vue 3

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/2.get-started/1.guide/2.setup.md

This line shows how to import the necessary CSS for `vue-final-modal` in a Vue 3 application's main entry file. This ensures that the modal components are properly styled with the library's default styles.

```typescript
import 'vue-final-modal/style.css'
```

--------------------------------

### Opening a Drag-Resize Modal in Vue

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/4.use-cases/8.modal-drag-resize.md

This snippet demonstrates how to open and manage a drag-resize modal using `vue-final-modal`. It utilizes `useModal` to programmatically open the `ModalDragResize.vue` component and ensures the modal is destroyed on component unmount. The `ModalsContainer` is required for modals to render.

```Vue
<script setup lang="ts">
import { ModalsContainer, useModal } from 'vue-final-modal'

const { open, destroy } = useModal({
  keepAlive: true,
  component: defineAsyncComponent(() => import('./ModalDragResize.vue')),
})

onBeforeUnmount(() => {
  destroy()
})
</script>

<template>
  <VButton @click="() => open()">
    Open Modal
  </VButton>

  <ModalsContainer />
</template>
```

--------------------------------

### Initializing Vue Final Modal 4.0 in Vue 3

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/2.get-started/1.guide/3.migration-guide.md

This snippet shows the new way to initialize `vue-final-modal` version 4.0 in a Vue 3 application. Instead of `vfmPlugin`, `createVfm` is used to create an instance, which is then registered with the Vue application.

```TypeScript
import { createVfm } from 'vue-final-modal'
const vfm = createVfm()
app.use(vfm)
```

--------------------------------

### Importing and Destructuring useVfm() in Vue

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/3.api/2.composables/2.use-vfm.md

This snippet demonstrates how to import the `useVfm` composable in a Vue 3 setup script and destructure its properties and methods for direct access. It initializes `vfm` to manage modal components globally, providing access to modal states and control functions.

```Vue
<script setup lang="ts">
import { useVfm } from 'vue-final-modal'

const vfm = useVfm()
const {
  modals,
  openedModals,
  dynamicModals,
  get,
  toggle,
  open,
  close,
  closeAll,
} = vfm
</script>
```

--------------------------------

### Toggling a Modal with useVfm() in TypeScript

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/3.api/2.composables/2.use-vfm.md

This example shows how to use the `vfm.toggle()` method to programmatically open or close a modal identified by `modalId`. The method returns a Promise, allowing for asynchronous operations to be performed after the toggle action completes.

```TypeScript
vfm.toggle(modalId).then(() => {
  // Do something after the modal opened or closed
})
```

--------------------------------

### Closing a Modal with useVfm() in TypeScript

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/3.api/2.composables/2.use-vfm.md

This example demonstrates using the `vfm.close()` method to programmatically close a specific modal identified by `modalId`. The method returns a Promise, allowing for subsequent actions to be performed after the modal has closed.

```TypeScript
vfm.close(modalId).then(() => {
  // Do something after the modal closed
})
```

--------------------------------

### Creating Dynamic Modals with useModal in Vue Final Modal 4.0

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/2.get-started/1.guide/3.migration-guide.md

This snippet demonstrates the new approach for creating dynamic modals in `vue-final-modal` 4.0 using the `useModal()` composable. It shows how to define the modal component, pass attributes, specify event handlers, and provide slot content, then explicitly open the modal.

```TypeScript
const { open, close } = useModal({
  component: ModalConfirm,
  attrs: {
    title: 'Hello World!',
    onConfirm() {
      close()
    },
    onOpened() {
      console.log('modal opened')
    }
  },
  slots: {
    default: '<p>The content of the modal</p>'
  }
})
open()
```

--------------------------------

### Controlling Modals with v-model in Vue

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/2.get-started/1.guide/2.setup.md

This snippet illustrates using `v-model` for two-way data binding to control the visibility of a modal component. The `show` reactive variable toggles the modal's display, and a confirm action sets `show` to false to close it.

```Vue
<script setup lang="ts">\nconst show = ref(false)\n\nfunction confirm() {\n  show.value = false\n}\n</script>\n\n<template>\n  <VButton @click="show = true">\n    Open Modal\n  </VButton>\n\n  <ModalConfirm\n    v-model="show"\n    title="Hello World!"\n    @confirm="() => confirm()"\n  >\n    <p>VModel: The content of the modal</p>\n  </ModalConfirm>\n</template>
```

--------------------------------

### Initializing Vue Final Modal 3.x in Nuxt 3

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/2.get-started/1.guide/3.migration-guide.md

This snippet illustrates the previous method for initializing `vue-final-modal` version 3.x within a Nuxt 3 application's plugin. It uses `defineNuxtPlugin` to access the Vue app instance and apply `vfmPlugin`.

```TypeScript
import { defineNuxtPlugin } from '#imports'
import { vfmPlugin } from 'vue-final-modal'

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(vfmPlugin)
})
```

--------------------------------

### Controlling Modals with useVfm Composable in Vue Final Modal 4.0 (TypeScript)

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/2.get-started/1.guide/3.migration-guide.md

This snippet illustrates the recommended approach for controlling modal visibility in Vue Final Modal version 4.0 using the `useVfm` composable. It shows how to import `useVfm`, initialize it, and then use the `open`, `close`, and `closeAll` methods to manage modals. This replaces the `$vfm` global instance from previous versions.

```TypeScript
import { useVfm } from 'vue-final-modal'

const vfm = useVfm()

vfm.open(...)
vfm.close(...)
vfm.closeAll(...)
```

--------------------------------

### Importing Vue Final Modal CSS in Nuxt 3

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/2.get-started/1.guide/3.migration-guide.md

This snippet demonstrates how to include the `vue-final-modal` CSS in a Nuxt 3 application. The `style.css` path is added to the `css` array within the `nuxt.config.ts` file, allowing Nuxt to bundle it.

```TypeScript
export default defineNuxtConfig({
  css: ['vue-final-modal/style.css'],
})
```

--------------------------------

### Defining Plain CSS Modal Component - Vue

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/2.get-started/1.guide/2.setup.md

This Vue component defines a reusable modal using `VueFinalModal`. It accepts an optional `title` prop and emits a `confirm` event. The component is styled using plain CSS classes, which define the modal's display, alignment, padding, background, border-radius, and font sizes for a consistent look.

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

defineProps<{
  title?: string
}>()

const emit = defineEmits<{
  (e: 'confirm'): void
}>()
</script>

<template>
  <VueFinalModal
    class="confirm-modal"
    content-class="confirm-modal-content"
    overlay-transition="vfm-fade"
    content-transition="vfm-fade"
  >
    <h1>{{ title }}</h1>
    <slot />
    <button @click="emit('confirm')">
      Confirm
    </button>
  </VueFinalModal>
</template>

<style>
.confirm-modal {
  display: flex;
  justify-content: center;
  align-items: center;
}
.confirm-modal-content {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background: #fff;
  border-radius: 0.5rem;
}
.confirm-modal-content > * + *{
  margin: 0.5rem 0;
}
.confirm-modal-content h1 {
  font-size: 1.375rem;
}
.confirm-modal-content button {
  margin: 0.25rem 0 0 auto;
  padding: 0 8px;
  border: 1px solid;
  border-radius: 0.5rem;
}
.dark .confirm-modal-content {
  background: #000;
}
</style>
```

--------------------------------

### Importing Vue Final Modal CSS in Vue 3

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/2.get-started/1.guide/3.migration-guide.md

This snippet shows how to import the necessary CSS for `vue-final-modal` in a Vue 3 application. The `style.css` file is directly imported, ensuring the modal's default styling is applied.

```TypeScript
import 'vue-final-modal/style.css'
```

--------------------------------

### Initializing Vue Final Modal 4.0 in Nuxt 3

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/2.get-started/1.guide/3.migration-guide.md

This snippet demonstrates the updated approach for initializing `vue-final-modal` version 4.0 in a Nuxt 3 application. It uses `createVfm` within a Nuxt plugin to create and register the modal instance with the Vue application.

```TypeScript
import { createVfm } from 'vue-final-modal'

export default defineNuxtPlugin((nuxtApp) => {
  const vfm = createVfm() as any

  nuxtApp.vueApp.use(vfm)
})
```

--------------------------------

### Registering Vue Final Modal Plugin in Vue 3

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/2.get-started/1.guide/2.setup.md

This snippet shows how to register the `vue-final-modal` plugin in a Vue 3 application. It imports `createVfm` to create a new Vue Final Modal instance and then uses it with the Vue application instance, which is necessary for shared context via provide/inject.

```typescript
import { createApp } from 'vue'
import { createVfm } from 'vue-final-modal'
import App from './App.vue'

const app = createApp(App)

const vfm = createVfm()
app.use(vfm).mount('#app')
```

--------------------------------

### Defining Vfm Type in TypeScript

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/2.get-started/1.guide/4.types.md

Defines the `Vfm` (Vue Final Modal) instance type, representing the global modal manager. It includes methods for installing the plugin, accessing modal states, and controlling individual or all modals, such as `toggle`, `open`, `close`, and `closeAll`.

```typescript
export type Vfm = {
  install(app: App): void
  modals: ComputedRef<Modal>[]
  openedModals: ComputedRef<Modal>[]
  openedModalOverlays: ComputedRef<Modal>[]
  dynamicModals: (UseModalOptions<any> & UseModalOptionsPrivate)[]
  modalsContainers: Ref<symbol[]>
  get: (modalId: ModalId) => undefined | ComputedRef<Modal>
  toggle: (modalId: ModalId, show?: boolean) => undefined | Promise<string>
  open: (modalId: ModalId) => undefined | Promise<string>
  close: (modalId: ModalId) => undefined | Promise<string>
  closeAll: () => Promise<[PromiseSettledResult<Promise<string>[]>]>
}
```

--------------------------------

### Creating Dynamic Modals with $vfm.show in Vue Final Modal 3.x

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/2.get-started/1.guide/3.migration-guide.md

This snippet illustrates the deprecated method of creating dynamic modals using `$vfm.show()` in `vue-final-modal` 3.x. It shows how to specify the component, bind props, define event handlers, and include slot content directly.

```TypeScript
this.$vfm.show({
  component: ModalConfirm,
  bind: {
    name: 'ModalConfirmName'
  },
  on: {
    confirm() {
      this.$vfm.hide('ModalConfirmName')
    },
    opened() {
      console.log('modal opened')
    }
  },
  slots: {
    default: '<p>The content of the modal</p>'
  }
})
```

--------------------------------

### Implementing a Resizable Modal Component in Vue

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/4.use-cases/8.modal-drag-resize.md

This component defines a resizable modal using `vue-final-modal` and `vue3-drag-resize`. It manages the modal's dimensions and position via reactive references and updates them during drag and resize events. The `ClientOnly` wrapper is included for Nuxt compatibility, and an 'X' button allows closing the modal.

```Vue
<script setup lang="ts">
import { VueFinalModal } from 'vue-final-modal'
import VueDragResize from 'vue3-drag-resize'

const emit = defineEmits<{
  (e: 'update:modelValue', modelValue: boolean): void
}>()

const width = ref(0)
const height = ref(0)
const top = ref(0)
const left = ref(0)

function dragResize(newRect) {
  width.value = newRect.width
  height.value = newRect.height
  top.value = newRect.top
  left.value = newRect.left
}
</script>

<template>
  <VueFinalModal
    display-directive="show"
    background="interactive"
    content-transition="vfm-fade"
    :hide-overlay="true"
    @update:model-value="val => emit('update:modelValue', val)"
  >
    <!-- in case you use Nuxt, make sure to wrap with `<ClientOnly>` -->
    <!-- in case you don't use Nuxt, you don't need `<ClientOnly>` -->
    <ClientOnly>
      <VueDragResize
        :is-active="true"
        :w="200"
        :h="200"
        class="bg-primary-100 dark:bg-gray-800"
        @resizing="dragResize"
        @dragging="dragResize"
      >
        <h3>Hello World!</h3>
        <p>{{ top }} х {{ left }} </p>
        <p>{{ width }} х {{ height }}</p>
        <button class="absolute top-0 right-0 mt-2 mr-2 px-2 border rounded-md " @pointerup="emit('update:modelValue', false)">
          X
        </button>
      </VueDragResize>
    </ClientOnly>
  </VueFinalModal>
</template>
```

--------------------------------

### Defining Fullscreen Modal Component with VueFinalModal (ModalFullscreen.vue)

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/4.use-cases/5.modal-fullscreen.md

This snippet defines the `ModalFullscreen` Vue component. It utilizes `VueFinalModal` as its base, applying TailwindCSS classes to achieve full-screen styling. The component accepts an optional `title` prop and emits a `close` event when its internal close button is clicked, allowing external control over its visibility. It also configures `hide-overlay` and `content-transition` for a seamless user experience.

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

defineProps<{
  title?: string
}>()

const emit = defineEmits<{
  (e: 'close'): void
}>()
</script>

<template>
  <VueFinalModal
    content-class="w-full h-full flex flex-col bg-white dark:bg-gray-900 space-y-2"
    :hide-overlay="true"
    content-transition="vfm-fade"
  >
    <h1 class="text-xl">
      {{ title }}
    </h1>
    <slot />
    <button class="absolute top-4 right-4 px-2 border rounded-lg" @click="emit('close')">
      x
    </button>
  </VueFinalModal>
</template>
```

--------------------------------

### Using useModal for Dynamic Modal Control in TypeScript

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/3.api/2.composables/1.use-modal.md

This example demonstrates the core usage of `useModal()` to programmatically control a dynamic modal. It shows how to initialize a modal with various options (e.g., `defaultModelValue`, `keepAlive`, `component`, `attrs` for props and events) and how to use the returned `open`, `close`, `destroy`, `options`, and `patchOptions` functions to manage its lifecycle and properties.

```ts
import { VueFinalModal, useModal } from 'vue-final-modal'

const { open, close, destroy, options, patchOptions } = useModal({
  // Open the modal or not when the modal was created, the default value is `false`.
  defaultModelValue: false,
  /**
   * If set `keepAlive` to `true`: 
   * 1. The `displayDirective` will be set to `show` by default. 
   * 2. The modal component will not be removed after the modal closed until you manually execute `destroy()`. 
   */
  keepAlive: false,
  // `component` is optional and the default value is `<VueFinalModal>`.
  component: VueFinalModal,
  attrs: {
    // Bind props to the modal component (VueFinalModal in this case).
    clickToClose: true,
    escToClose: true,
    // Bind events to the modal component (VueFinalModal in this case).
    // Any custom events can be listened for when prefixed with "on", e.g. "onEventName".
    onBeforeOpen() { /* on before open */ },
    onOpened() { /* on opened */ },
    onBeforeClose() { /* on before close */ },
    onClosed() { /* on closed */ }
  }
})

// Open the modal
open().then(() => { /* Do something after modal opened */ })
// Close the modal
close().then(() => { /* Do something after modal closed */ })
// Destroy the modal manually, it only be needed when the `keepAlive` is set to `true`
destroy()
// Checkout the modal options
options // the state of the dynamic modal

// Overwrite the modal options
patchOptions({
  attrs: {
    // Overwrite the modal's props
    clickToClose: false,
    escToClose: false
  }
})
```

--------------------------------

### Implementing Nested Modals with Vue Final Modal (Preview.vue)

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/4.use-cases/4.modal-nested.md

This snippet demonstrates how to create and manage nested modals using the `vue-final-modal` library. It defines two `ModalConfirm` instances, where the first modal's confirmation action triggers the opening of the second modal, showcasing the `useModal` composable for modal control and interaction.

```vue
<script setup lang="ts">
import { ModalsContainer, useModal } from 'vue-final-modal'
import ModalConfirm from './ModalConfirm.vue'

const modalFirst = useModal({
  component: ModalConfirm,
  attrs: {
    title: 'The first confirm modal',
    onConfirm() {
      modalSecond.open()
    },
  },
  slots: {
    default: 'Magna deserunt nulla aliquip velit aute. Et occaecat elit nulla excepteur labore cupidatat. Duis culpa mollit commodo dolor qui Lorem qui laborum elit elit Lorem occaecat. Commodo eiusmod esse voluptate officia amet quis occaecat aliqua. Proident do irure amet ut occaecat dolor laboris consectetur.',
  },
})

const modalSecond = useModal({
  component: ModalConfirm,
  attrs: {
    title: 'The second confirm modal',
    onConfirm() {
      modalSecond.close()
    },
  },
})

function openConfirm2() {
  modalSecond.open()
}
</script>

<template>
  <VButton @click="() => modalFirst.open()">
    Open Modal
  </VButton>

  <ModalsContainer />
</template>
```

--------------------------------

### Passing Vue Component to Modal Slots with useModal

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/3.api/2.composables/1.use-modal.md

This example demonstrates how to render a custom Vue component within a modal's default slot using `useModal()`. It shows importing a `ModalContent` component and assigning it directly to `slots.default`, enabling complex and reusable content within dynamic modals.

```ts
import { VueFinalModal, useModal } from 'vue-final-modal'
// ModalContent is the component you want to put into the modal content
import ModalContent from './ModalContent.vue'


const modalInstance = useModal({
  component: VueFinalModal,
  attrs: { ... },
  slots: {
    // You can import your own component as a slot and put it to `slots.default` without binding props and events.
    default: ModalContent
  }
})
```

--------------------------------

### Defining Atomic CSS Modal Component - Vue

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/2.get-started/1.guide/2.setup.md

This Vue component defines a reusable modal using `VueFinalModal`, styled entirely with TailwindCSS utility classes. It accepts an optional `title` prop and emits a `confirm` event. The atomic classes control the modal's display, alignment, maximum width, margins, padding, background, border, rounded corners, and spacing, providing a highly customizable and responsive design.

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

defineProps<{
  title?: string
}>()

const emit = defineEmits<{
  (e: 'confirm'): void
}>()
</script>

<template>
  <VueFinalModal
    class="flex justify-center items-center"
    content-class="flex flex-col max-w-xl mx-4 p-4 bg-white dark:bg-gray-900 border dark:border-gray-700 rounded-lg space-y-2"
  >
    <h1 class="text-xl">
      {{ title }}
    </h1>
    <slot />
    <button class="mt-1 ml-auto px-2 border rounded-lg" @click="emit('confirm')">
      Confirm
    </button>
  </VueFinalModal>
</template>
```

--------------------------------

### Defining a Reusable Bottom Modal Component (ModalBottom.vue)

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/4.use-cases/6.modal-bottom.md

This Vue.js component defines a customizable bottom modal using `VueFinalModal`. It accepts an optional `title` prop and applies TailwindCSS classes for styling, positioning it at the bottom of the screen. It also enables `swipe-to-close` functionality and specifies transition effects for content and overlay.

```Vue.js
<script setup lang="ts">
import { VueFinalModal } from 'vue-final-modal'

defineProps<{
  title?: string
}>()
</script>

<template>
  <VueFinalModal
    content-class="absolute bottom-0 w-full p-4 bg-white dark:bg-gray-900 space-y-2"
    swipe-to-close="down"
    content-transition="vfm-slide-down"
    overlay-transition="vfm-fade"
  >
    <h1 class="text-xl">
      {{ title }}
    </h1>
    <div class="text-3xl">Swipe down to close the modal</div>
    <slot />
  </VueFinalModal>
</template>
```

--------------------------------

### Opening a Long Scrollable Modal in Vue

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/4.use-cases/9.modal-long-scroll.md

This snippet demonstrates how to open a long scrollable modal using `useModal` from `vue-final-modal`. It defines a large amount of lorem ipsum content to simulate a long scroll and passes it as a slot to the `ModalLongScroll` component. It also shows how to handle the `confirm` event to close the modal.

```Vue
<script setup lang="ts">
import { ModalsContainer, useModal } from 'vue-final-modal'
import ModalLongScroll from './ModalLongScroll.vue'

const p = `<p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ullamcorper,
          ex at blandit iaculis, nibh urna lacinia tellus, a auctor lorem libero a
          lectus. Nulla bibendum mollis sapien, nec euismod mi mattis cursus.
          Curabitur accumsan erat eu viverra fringilla. Interdum et malesuada fames
          ac ante ipsum primis in faucibus. Phasellus ut neque eu diam vehicula
          efficitur. Vivamus ultricies purus facilisis augue porttitor vestibulum a
          non neque. Nunc egestas risus elit, sed fringilla velit posuere et.
        </p>`

const { open, close } = useModal({
  component: ModalLongScroll,
  attrs: {
    title: 'Hello World!',
    onConfirm: () => close(),
  },
  slots: {
    default: p + p + p + p + p + p + p + p + p + p + p + p,
  },
})
</script>

<template>
  <VButton @click="open">
    Open Modal
  </VButton>

  <ModalsContainer />
</template>
```

--------------------------------

### Controlling Modals with $vfm in Vue Final Modal 3.x (TypeScript)

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/2.get-started/1.guide/3.migration-guide.md

This snippet demonstrates the usage of the `$vfm` global instance in Vue Final Modal version 3.x for controlling modal visibility. It shows how to import `$vfm` and use its `show`, `hide`, and `hideAll` methods to manage modals. This API is deprecated in version 4.0 in favor of `useVfm`.

```TypeScript
import { $vfm } from 'vue-final-modal'

$vfm.show(...)
$vfm.hide(...)
$vfm.hideAll(...)
```

--------------------------------

### Defining a Reusable Confirmation Modal Component (ModalConfirm.vue)

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/4.use-cases/4.modal-nested.md

This snippet defines a reusable `ModalConfirm` component based on `VueFinalModal`. It accepts an optional `title` prop, provides a default slot for content, and emits `update:modelValue` for v-model binding and a `confirm` event when the internal confirm button is clicked, allowing for custom actions.

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

defineProps<{
  title?: string
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', modelValue: boolean): void
  (e: 'confirm'): void
}>()
</script>

<template>
  <VueFinalModal
    class="flex justify-center items-center"
    content-class="flex flex-col max-w-xl mx-4 p-4 bg-white dark:bg-gray-900 border dark:border-gray-700 rounded-lg space-y-2"
    @update:model-value="val => emit('update:modelValue', val)"
  >
    <h1 class="text-xl">
      {{ title }}
    </h1>
    <slot />
    <button class="mt-1 ml-auto px-2 border rounded-lg" @click="emit('confirm')">
      Confirm
    </button>
  </VueFinalModal>
</template>
```

--------------------------------

### Vorms-powered Login Form Component in Vue

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/4.use-cases/7.modal-login-form.md

This component implements the login form logic using the @vorms/core library for state management and validation. It defines the form's data structure, registers input fields with Vorms, handles form submission, and displays validation errors. Basic styling for the form elements is also included.

```Vue
<script setup lang="ts">
import { useForm } from '@vorms/core'

export type FormData = {
  account: string
  password: string
  remember: boolean
}

const emit = defineEmits<{
  (e: 'submit', formData: FormData): void
}>()

const { register, errors, handleSubmit } = useForm({
  initialValues: {
    account: '',
    password: '',
    remember: false,
  },
  onSubmit(values) {
    emit('submit', values)
  },
})

const { value: account, attrs: accountAttrs } = register('account', {
  validate(value) {
    if (!value)
      return 'account is required!'
  },
})
const { value: password, attrs: passwordAttrs } = register('password')
const { value: remember, attrs: rememberAttrs } = register('remember')
</script>

<template>
  <h1 class="text-2xl mb-4">Login</h1>
  <form @submit="handleSubmit">
    <div class="field">
      <input
        v-model="account"
        class="field__input"
        type="text"
        placeholder="Account"
        v-bind="accountAttrs"
      >
      <div v-show="'account' in errors" class="field__error">
        {{ errors.account }}
      </div>
    </div>
    <div class="field">
      <input
        v-model="password"
        class="field__input"
        type="password"
        placeholder="Password"
        v-bind="passwordAttrs"
      >
    </div>

    <div class="field checkbox">
      <input
        id="remember"
        v-model="remember"
        class="field__checkbox"
        type="checkbox"
        v-bind="rememberAttrs"
      >
      <label for="remember">remember</label>
    </div>

    <div class="field">
      <input type="submit" value="Submit">
    </div>
  </form>
</template>

<style>
.field + .field {
  margin-top: 15px;
}

.field__input,
input[type='submit'] {
  box-sizing: border-box;
  width: 100%;
  border-radius: 4px;
  border: 1px solid white;
  padding: 4px 16px 4px 4px;
}

.field__error {
  color: red;
  margin-top: 2px;
}

.checkbox {
  display: flex;
  align-items: center;
}

.field__checkbox {
  accent-color: #41b883;
}

.field__checkbox + label {
  margin-left: 4px;
}

input[type='submit'] {
  background: #41b883;
  border: 1px solid #41b883;
  cursor: pointer;
}
</style>
```

--------------------------------

### Defining a Long Scrollable Modal Component in Vue

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/4.use-cases/9.modal-long-scroll.md

This snippet defines the `ModalLongScroll` component using `VueFinalModal`. It accepts a `title` prop and emits `update:modelValue` and `confirm` events. The component is styled to be full-screen with scrollable content, allowing the user to click outside the inner content to close the modal.

```Vue
<script setup lang="ts">
import { VueFinalModal } from 'vue-final-modal'

defineProps<{
  title?: string
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', modelValue: boolean): void
  (e: 'confirm'): void
}>()
</script>

<template>
  <VueFinalModal
    content-transition="vfm-fade"
    overlay-transition="vfm-fade"
    content-class="absolute inset-0"
    @update:model-value="(val) => emit('update:modelValue', val)"
  >
    <div
      class="absolute inset-0 h-full overflow-auto"
      @click.self="() => emit('update:modelValue', false)"
    >
      <div class="flex flex-col max-w-xl my-12 mx-auto p-4 bg-white dark:bg-gray-900 border dark:border-gray-700 rounded-lg space-y-2">
        <h1 class="text-xl">
          {{ title }}
        </h1>
        <slot />
        <button class="mt-1 ml-auto px-2 border rounded-lg" @click="() => emit('confirm')">
          Confirm
        </button>
      </div>
    </div>
  </VueFinalModal>
</template>
```

--------------------------------

### Generating Type Stubs for Nuxt Module Development (Shell)

Source: https://github.com/vue-final/vue-final-modal/blob/master/packages/nuxt/README.md

This command prepares the development environment by generating necessary type stubs, which are crucial for proper type checking and IDE support during development.

```Shell
npm run dev:prepare
```

--------------------------------

### Defining VueFinalModal Component Template (HTML)

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/3.api/1.components/1.vue-final-modal.md

This snippet illustrates the simplified HTML template structure of the `<VueFinalModal>` component. It defines the main container, the overlay element (`vfm__overlay`), and the content area (`vfm__content`), both wrapped in transition components. This structure is fundamental for understanding how props like `overlayTransition` and `contentTransition` apply.

```HTML
<template>
  <div class="vfm">
    <transition v-bind="overlayTransition">
      <div class=vfm__overlay></div>
    </transition>
    <transition v-bind="contentTransition">
      <div class=vfm__content>
        <slot />
        <div class="vfm-swipe-banner-container"></div>
      </div>
    </transition>
  </div>
</template>
```

--------------------------------

### Opening a Modal with useVfm() in TypeScript

Source: https://github.com/vue-final/vue-final-modal/blob/master/docs/content/3.api/2.composables/2.use-vfm.md

This snippet illustrates how to use the `vfm.open()` method to programmatically open a specific modal by its `modalId`. The method returns a Promise, enabling execution of code once the modal has finished opening.

```TypeScript
vfm.open(modalId).then(() => {
  // Do something after the modal opened
})
```