vue-modality-v3

A really nice Vue.js modal component. (Compatible with Vue.js 3)

Demo

Installation

NPM

$ npm install vue-modality-v3

Register the component globally...

import { createApp } from 'vue'
import App from './App.vue'

import VueModalityV3 from 'vue-modality-v3';
import 'vue-modality-v3/dist/style.css'
// don't forget to load the css file

createApp(App)
.component('VueModalityV3', VueModalityV3)
.mount('#app')

... or import it locally

<script setup>
import VueModalityV3 from 'vue-modality-v3';
import 'vue-modality-v3/dist/style.css'
</script>

Usage

<button @click="openMyModal()">Open</button>

<vue-modality-v3 ref="myRef" title="My Title" centered>
  body content
</vue-modality-v3>

<script setup>
import { ref } from 'vue';

const myRef = ref(null)
const openMyModal = () => { myRef.value.open() }
</script>

Available props

| Prop | Type | Default | Description | |--------------------------|---------------|--------------------|----------------------| | width | String | 400px | | | centered | Boolean | false | Vertically centered | | overlay | Boolean | false | | | text-center | Boolean | false | | | title | String | Modal | | | title-class | String | | | | hide-header | Boolean | false | | | hide-footer | Boolean | false | | | ok-title | String | Ok | | | ok-disabled | Boolean | false | | | ok-class | String | | | | ok-loading | Boolean | false | Shows the loading icon | | hide-ok | Boolean | false | Hides the ok button | | cancel-title | String | Cancel | | | cancel-disabled | Boolean | false | | | cancel-class | String | | | | hide-cancel | Boolean | false | Hides the cancel button | | no-close-on-backdrop | Boolean | false | | | no-close-on-esc | Boolean | false | | | error | Boolean | false | Shows error icon | | success | Boolean | false | Shows success icon |

Events

| Event | Description | |----------|--------------| | open | When you open the modal | | hide | When you hide the modal | | ok | When the Ok button is pressed | | cancel | When the Cancel button is pressed |