Concepts

What is VueFinalModal?

vue-final-modal is a modal library built specifically for Vue.js and as such it makes some assumptions and enforces "best-practices" for your modals while being versatile and customizable.

vue-final-modal is a collection of composables and Vue components, the main things that will be covered is how to use these components to build your own modal components and use them with useModal() composable function.

useModal() and <ModalsContainer> are built on vue-use-template: a modal you open with useModal() is rendered inside <ModalsContainer>, so it needs no place in your template.

Built-in features

• useModal() composable to manage your modal programmatically. Its open() and close() return promises that always settle.
• SSR (Nuxt) support: a modal opened while a component sets up is part of the server HTML and hydrates already open. Teleport your modals to 'body' by default.
• A Nuxt module that registers the plugin, adds the CSS and auto-imports the components and composables.
• Trap keyboard focus within modal element (uses focus-trap for best web accessibility).
• Lock the scroll of the page, and of the scroll container a modal is rendered in, while the modal is opened (see lockScroll prop).
• Full control to the zIndex of the nested modals (see zIndexFn prop).
• Customizable <Transition> for the modal content and overlay.
• Tiny footprint! Vue Final Modal focuses on the core functionality of modals, leaves the complex CSS up to the developer.

A Styleless component

<VueFinalModal> is a styleless component that provides the features that modal required as much as possible but leave the layout as a slot to developer.

So you have to define the modal style by yourself.

You Might Not Need VueFinalModal

Although I created vue-final-modal, I still try not to use it as much as possible.

Here are the articles that I highly recommended you to read before diving into VueFinalModal:

• Popups: 10 Problematic Trends and Alternatives
• Can Hated Design Elements Be Made to Work?
• The Most Hated Online Advertising Techniques
• Modal & Nonmodal Dialogs: When (& When Not) to Use Them
• Modes in User Interfaces: When They Help and When They Hurt Users