# vue-final-modal: a renderless modal component for Vue > vue-final-modal is a small modal library for Vue 3 that renders no markup of its own, leaving the dialog markup to the caller while handling stacking, focus and accessibility. It suits an application that wants modal behaviour without adopting the library's markup, and the 5.0 line is currently shipping as beta releases. **vue-final/vue-final-modal** — 🍕Vue Final Modal is a tiny, renderless, mobile-friendly, feature-rich modal component for Vue.js. - Repository: https://github.com/vue-final/vue-final-modal - Website: https://vue-final-modal.org - Stars: 1,013 · Forks: 99 - Language: TypeScript - License: MIT - Published: 2026-10-19 · Updated: 2026-10-19 · Language: en - Canonical page: https://hysenlabs.com/projects/vue-final-vue-final-modal ## What renderless means here Vue Final Modal is a modal library for Vue, and the repository description calls it a tiny, renderless, mobile-friendly, feature-rich modal component. Renderless is the load-bearing word. The library provides the modal behaviour, the stacking, the focus handling and the accessibility plumbing, and it does not supply the dialog markup, the buttons or the styling, which stay with the application. That is a deliberate trade. A modal library that renders its own markup is quick to adopt and hard to make look like the rest of your design, while a renderless one gives you full control of the appearance at the cost of writing the template. The topics list carries the feature set, with a11y, dialog, modal, renderless-components, stackable, tiny, vue, vue-dialog, vue3 and vue-modal. The primary language is TypeScript, the licence is MIT, the homepage is vue-final-modal.org, and the last push was on 2026-10-14. ## Which version line you are actually on The versions need reading carefully, because the documentation and the published packages are on different lines. The README is headed Vue Final Modal 4 and calls it the most powerful yet most light-weight modal library for Vue 3, and the documentation link points at the v4 site, with a migration guide from v3. The newest published releases are on the 5.0 line, and all three of the most recent are betas, v5.0.0-beta.14, v5.0.0-beta.13 and v5.0.0-beta.12, all on 2026-10-14. Older lines are still published and still documented, with vue-final-modal@3.x for Vue 3 at v3.vue-final-modal.org and vue-final-modal@2.x for Vue 2 at v2.vue-final-modal.org. So a project on Vue 3 today has a choice between the stable 4.x line, which is what the documentation describes, and a 5.0 line that is still settling. ## Running it, and the three-part workspace The contribution guide shows how the repository is put together, and the workspace structure is the interesting part. The install and the run are: ```bash # Install packages pnpm install --shamefully-hoist # Build vue-final-modal library first pnpm build:vfm # Run both docs and viteplay pnpm dev ``` The build of the library has to happen before the development servers start, which is the one ordering constraint in the sequence. Then the two dev servers split by purpose, with `pnpm dev:docs` serving the documentation at http://localhost:3000/ and `pnpm dev:viteplay` serving the playground at http://localhost:5173/. The root package manifest shows the whole set of scripts, with the `dev` script running the docs and the viteplay concurrently, and separate filters for the library itself, `dev:vfm` and `build:vfm`. The `--shamefully-hoist` flag on install is a workspace layout choice, and the repository has a `pnpm-workspace.yaml` alongside `packages/`. ## The packages, and the Nuxt module The root manifest is named `vfm` and is private, with Vue 3.3.7 as its only runtime dependency, which is a statement about the library's own weight. The packages live under `packages/`, and the scripts name three of them by filter, `vue-final-modal` for the library, `docs` for the documentation site, and `viteplay` for the playground. There is a fourth, `@vue-final-modal/nuxt`, which appears in the `prepare:module` script that builds it for the module prepare and prepack steps, so the library ships a Nuxt module as well as a plain Vue package. The tests are run with `pnpm --filter vue-final-modal cypress:run`, so the suite is Cypress based rather than a unit test framework, and the lint is `eslint . --ext=.ts,.vue --fix` with the `@antfu/eslint-config` rules, and there is a separate `typecheck` script running `pnpm --parallel typecheck` with vue-tsc. The `postinstall` script builds the library and prepares the Nuxt module, so a fresh clone is usable without a manual build step. ## The playground, and the two framework examples There are two StackBlitz playgrounds, one for Vue 3 and one for Nuxt 3, both pointing at the `examples/` directory in the repository. The `examples/` folder holds exactly those two, `examples/vue3/` and `examples/nuxt3/`, and the repository also has a `viteplay/` directory at the root, which is the local playground application with its own package in the workspace. Having a Nuxt example matters more than it looks, because the Nuxt module is a separate integration with its own build and prepare steps, and a browser-runnable example of it is the fastest way to check that the module works in a server-rendered app rather than only in a client-side one. The `netlify.toml` at the root handles the documentation deployment. ## What to check before you commit to it Three things. The first is the version line, and it is the one that bites. The documentation you will read is for 4.x while the published packages are 5.0.0 betas, so a quickstart written for 4 will not match the newest artefact, and the migration guide from v3 exists precisely because the API moved between major lines. The second is what renderless costs you. You own the markup, which means you own the focus trap, the ARIA attributes and the scroll locking, and the library's accessibility value is only realised if you wire the attributes it expects into your template. The third is the size claim. The topics call the library tiny, the manifest has one runtime dependency, and the whole thing is written in TypeScript, but the bundle size that reaches your users depends on how much of the surrounding markup and styling you end up writing yourself, which is the part the README's light-weight claim does not cover. ## Conclusion Adopt vue-final-modal if you want a Vue modal that owns the behaviour, focus management and accessibility but not the markup, since that is the design the library is built around. Skip it if you want a drop-in dialog with styling included, because renderless means you write the template yourself. Before you start, check which line you are on, since the documentation site covers the 4.x release while the newest published artefacts are 5.0.0 beta releases, and the older 3.x and 2.x lines for Vue 3 and Vue 2 are still published separately with their own documentation. ## FAQ ### What does renderless mean in vue-final-modal? The library provides the modal behaviour, stacking, focus handling and accessibility plumbing without supplying the dialog markup, buttons or styling, which stay with the application. That is the trade: full control of the appearance at the cost of writing the template. ### Which version of vue-final-modal should I use with Vue 3? The 4.x line is what the current documentation site describes and is the stable choice, while the newest published releases are 5.0.0 betas. The older 3.x line for Vue 3 and 2.x line for Vue 2 are still published with their own documentation sites. ### How do I set up the vue-final-modal development environment? Run `pnpm install --shamefully-hoist`, then `pnpm build:vfm` to build the library before starting the dev servers. `pnpm dev` runs the docs and the playground together, with the docs on port 3000 and the viteplay on port 5173. ### Does vue-final-modal work with Nuxt? There is a separate @vue-final-modal/nuxt package, built by the prepare:module script which runs its dev:prepare and prepack steps, and the repository carries a StackBlitz playground and an example for Nuxt 3 alongside the Vue 3 one. ## Sources - [License: MIT](https://github.com/vue-final/vue-final-modal/blob/master/LICENSE) - [Project website](https://vue-final-modal.org) - [README](https://github.com/vue-final/vue-final-modal/blob/master/README.md) - [Releases](https://github.com/vue-final/vue-final-modal/releases) - [vue-final/vue-final-modal on GitHub](https://github.com/vue-final/vue-final-modal) --- Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/vue-final-vue-final-modal