vue-modal
GitHub
GitHub
  • Introduction
  • Installation
  • Usage
  • Options
  • Examples

    • Basic
    • Sidebar / Drawer
    • Animations
    • Prevent body scroll
    • Prevent modal from closing
    • Customizing

Modal sizes

vue-modal is responsive out-of-the box, with a default max-width of 500px.
You can set its width using the modal-style and modal-class props.

Scrollable content

Using the modal-class prop and some additional CSS, we can have a modal that allows scroll on the modal content.

Vertically centered

Using the wrapper-class prop and some additional CSS, we can have a vertically centered modal.

Fullscreen

Sometimes we want a modal that covers the entire viewport.
We can achieve that using the wrapper-class and modal-class props.

Edit this page
Last Updated: 11/2/25, 6:15 AM
Prev
Prevent modal from closing