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.