modal

Reusable modal dialog component with backdrop management.

<modal
    :active.sync="showModal"
    title="Edit Product"
    size="lg"
    @close="handleClose"
>
    <!-- Modal content -->
</modal>

Key Features:

  • Automatic z-index management for nested modals

  • Keyboard navigation (ESC to close)

  • Click-outside-to-close

  • Multiple size options

  • Customizable header/footer

  • Loading states

Props:

  • active (Boolean) - Modal visibility

  • title (String) - Modal title (default: 'Modal')

  • loading (Boolean) - Loading state

  • centered (Boolean) - Vertically center modal

  • size (String) - Size class ('sm', 'lg', 'xl')

  • footerActive (Boolean) - Show footer (default: true)

  • headerActive (Boolean) - Show header (default: true)

Events:

  • close - Modal close requested

  • update:active - Sync prop for v-model support

Last updated

Was this helpful?