Vue.js Modal (Vue 3)
Github
Vue 2
Demo
Github
Vue 2
Demo
  • Guide

    • Installation
    • Introduction
    • Usage
    • Properties
    • Events
    • Slots
    • Other
  • Examples

    • Demo

Slots

Close button

If you want to have a Close (x) button in the top-right corner, you can use "top-right" slot for it. There is no pre-defined Close button style - you will have to implement your own button.

<template>
  <modal name="foo">
    <template #top-right>
      <div>
        <button @click="$modal.hide('foo')">
          ❌
        </button>
      </div>
    </template>
    Hello, ☀️!
  </modal>
</template>
Last Updated:: 5/5/25, 1:26 PM
Contributors: Yev, Felix Bernhard
Prev
Events
Next
Other