DOCSEARCHbyAlgolia
Submit Docs

vue-modal

website·Indexed 29 days ago

https://next--vue-modal-demo.netlify.app/

A Vue.js modal component featuring stackable modals, fade-in/fade-out animations, and responsive sizing. It supports visibility control via the v-model directive or a name prop, and includes options to prevent body scrolling and block modal closing.

Tokens
2.2K
Snippets
12
Records
22
Agent score
75%

What's inside vue-modal

  1. Overview of vue-modal features

    vue-modal is a lightweight (< 4kb gzipped), customizable, and stackable modal component for Vue.js 3. It follows WAI-ARIA Dialog (Modal) accessibility best practices, including keyboard focus trapping and support for the esc key to close. Key capabilities include:

    • Control: Open/close via v-model or via a name prop with show/hide functions.
    • Customization: Override title and content via slots; customize styling via CSS classes; use CSS animation classes for intro/outro effects.
    • Behavior: Supports stackable modals, unclosable windows, and a 'live' mode to keep modals in the DOM. By default, modals are appended to the <body>, but can be appended to a custom element.
    • Focus: Supports the autofocus attribute on internal elements to set initial focus upon opening.

  3. Control vue-modal visibility using name prop and show/hide functions

    To control modals by name, you must first register the modalPlugin. Once registered, you can assign a name prop to the Modal component and trigger its visibility using the show and hide functions.
    import { createApp } from 'vue'
import { modalPlugin } from '@kouts/vue-modal'

const app = Vue.createApp({
  // ...
})

app.use(modalPlugin)

  4. Vertically center a vue-modal

    You can vertically center a modal by applying custom CSS to the modal wrapper. Use the wrapper-class prop to attach a class to the wrapper element and define the centering logic (e.g., using Flexbox or Grid) in your CSS.

  5. Migrate to vue-modal 5.0

    The 5.0 release of vue-modal introduced breaking changes to event naming and the addition of a Plugin API for name-based modal control.
    // Event Name Changes:
// Old: after-open -> New: opened
// Old: after-close -> New: closed

  6. Install and configure vue-modal using npm

    Install the @kouts/vue-modal@next package via npm. Import the Modal component and the required CSS in your entry file (e.g., main.js). You can optionally register the Modal component globally to avoid importing it in every individual component.
    npm i @kouts/vue-modal@next --save
    import { createApp } from 'vue'
import { Modal } from '@kouts/vue-modal'
import '@kouts/vue-modal/dist/vue-modal.css'

const app = Vue.createApp({
  // ...
})

// Optional: Register globally
app.component('Modal', Modal)

  7. Install vue-modal via UMD scripts

    For a basic installation without a build system, download the repository and extract vue-modal.umd.js and vue-modal.css from the dist folder. Include these files in your HTML page. Once loaded, the vue-modal component and functions are available globally via the VueModal object.
    <script type="text/javascript" src="vue-modal.umd.js"></script>
<link rel="stylesheet" href="vue-modal.css" />

  11. Handle modal lifecycle events

    The modal emits events during its open and close transitions, allowing developers to trigger side effects at specific stages of the modal's visibility lifecycle.
    // Visibility Events
'update:modelValue' // Emitted when model changes

// Opening Sequence
'before-open'       // Before opening transition starts
'opening'           // During opening transition
'opened'            // Visible and opening transition ended

// Closing Sequence
'before-close'      // Before closing transition starts
'closing'           // During closing transition
'closed'            // No longer visible and closing transition ended

  12. Use vue-modal with name prop in Options API

    In the Options API, after registering the modalPlugin, the modal control functions are available globally via the $modal object (e.g., $modal.show('modalName')).
    <template>
  <!-- Use the `$modal.show` function to display the modal -->
  <button type="button" @click="$modal.show('myModal')">Open a modal</button>

  <Modal name="myModal" title="My first modal">
    <p>Modal content goes here...</p>
  </Modal>
</template>

<script>
import { Modal } from '@kouts/vue-modal'

export default {
  components: {
    Modal
  }
}
</script>