@lrochefort/vue-final-modal

Vue Final Modal 5

The most powerful yet most light-weight modal library for Vue 3.

[!IMPORTANT] This is an unofficial fork of vue-final/vue-final-modal.

Upstream has not published a release since September 2024 (4.5.5). This fork exists to keep the library working on a current toolchain: Vue 3.5, Vite 8, TypeScript 6, Nuxt 4 and Node 20.19+.

Because the upstream package names are owned by the original author, this fork publishes under its own scope:

Upstream	This fork
vue-final-modal	@lrochefort/vue-final-modal
@vue-final-modal/nuxt	@lrochefort/vue-final-modal-nuxt

There are no runtime API changes. Every component, composable, prop, event and slot behaves exactly as it did in 4.5.5. Upgrading is a rename.

Requirements

@vueuse/core, @vueuse/integrations (>=10) and focus-trap (>=7.2) are peer dependencies and are installed for you by default.

Installation

# npm
npm install @lrochefort/vue-final-modal

# pnpm
pnpm add @lrochefort/vue-final-modal

# yarn
yarn add @lrochefort/vue-final-modal

For Nuxt 4, also install the module:

npm install @lrochefort/vue-final-modal-nuxt

Quick start

Vue 3

// main.ts
import { createApp } from 'vue'
import { createVfm } from '@lrochefort/vue-final-modal'
import '@lrochefort/vue-final-modal/style.css'
import App from './App.vue'

createApp(App).use(createVfm()).mount('#app')

<!-- App.vue -->
<script setup lang="ts">
import { ModalsContainer } from '@lrochefort/vue-final-modal'
</script>

<template>
  <div>
    <ModalsContainer />
  </div>
</template>

Nuxt 4

The module registers the plugin and injects the stylesheet for you:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@lrochefort/vue-final-modal-nuxt'],
})

Migrating from 4.x to 5.0

A codemod handles the rename:

# preview the changes
npx @lrochefort/vue-final-modal-codemod@latest --dry-run

# apply them
npx @lrochefort/vue-final-modal-codemod@latest

It rewrites import specifiers in .ts, .js, .mjs, .cjs and .vue files, updates package.json and nuxt.config, then reports anything it cannot fix automatically. See the full migration guide for the manual steps.

Playground

• Stackblitz for Vue 3
• Stackblitz for Nuxt 4

Documentation

The documentation site is maintained upstream at vue-final-modal.org. It is accurate for this fork apart from the package names: substitute @lrochefort/vue-final-modal wherever it says vue-final-modal.

Looking for old version?

• vue-final-modal@3.x for Vue 3
• vue-final-modal@2.x for Vue 2

Contributing

See the contribution guide in the repository.

Credits

vue-final-modal was created by Hunter Liu and its contributors. This fork exists only to keep their work running on current tooling; all credit for the library belongs to them.

Made with contributors-img.

If you find this library useful, consider supporting the original author:

If you have any ideas for optimization of this fork, feel free to open issues or pull requests.

License

MIT - Copyright (c) 2018-present, Chung Hang (Hunter) Liu