Concepts
These are the core concepts you need to know about vue-final-modal and its approach to modals management.
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.
Built-in features
- SSR (Nuxt 3) support. Teleport your modals to
'body'by default. useModal()composable to manage your modal programmatically.- Trap keyboard focus within modal element (uses focus-trap for best web accessibility).
- Full control to the zIndex of the nested modals (see zIndexFn prop).
- Customizable
<Transition>for the modal content and overlay. - Tiny footprint! Only 4.x kB! 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: