Pretty Nice Modal Component For Vue 3 – Modality

Install & Download:

# NPM
$ npm i vue-modality-v3

Description:

A simple, customizable, animated modal dialog component for Vue 3 applications.

How to use it:

1. Import and register the component.

// globally
import { createApp } from 'vue'
import App from './App.vue'
import VueModalityV3 from 'vue-modality-v3'
createApp(App)
.component('VueModality', VueModalityV3)
.mount('#app')

// Locally
import VueModalityV3 from 'vue-modality-v3'
export default {
  components: {
    VueModality: VueModalityV3
  }
};

2. Create a basic modal.

<vue-modality-v3 ref="myRef" title="Modal" hide-footer centered>
  Hello World!
</vue-modality-v3>

3. Available props to customize the modal.

width: {
  type: String,
  default: '400px'
},
centered: {
  type: Boolean,
  default: false
},
overlay: {
  type: Boolean,
  default: true
},
'text-center': {
  type: Boolean,
  default: false
},
title: {
  type: String,
  default: 'Modal'
},
'title-class': {
  type: String,
  default: ''
},
'hide-header': {
  type: Boolean,
  default: false
},
'hide-footer': {
  type: Boolean,
  default: false
},
'ok-title' : {
  type: String,
  default: 'Ok'
},
'ok-disabled': {
  type: Boolean,
  default: false
},
'ok-class': {
  type: String,
  default: ''
},
'hide-ok': {
  type: Boolean,
  default: false
},
'ok-loading': {
  type: Boolean,
  default: false
},
'cancel-title': {
  type: String,
  default: 'Cancel'
},
'cancel-disabled': {
  type: Boolean,
  default: false
},
'cancel-class': {
  type: String,
  default: ''
},
'hide-cancel': {
  type: Boolean,
  default: false
},
'no-close-on-backdrop': {
  type: Boolean,
  default: false
},
'no-close-on-esc': {
  type: Boolean,
  default: false
},
error: {
  type: Boolean,
  default: false
},
success: {
  type: Boolean,
  default: false
}

4. Open & close the modal.

// open
this.$refs.myRef.open()
// close
this.$refs.myRef.hide()

5. Events.

• @open
• @hide
• @ok
• @cancel

Preview: