vue-modality-v3

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

Check GitHub to see all the props and events

Examples

Hi, there! I'm a basic modal with no footer

Use the footer buttons to close the modal

Oh! Something went wrong!

That was a success ;)

Click on the OK button

Now you can't exit the modal by hiting ESC or clicking outside the box

Basic modal

<vue-modality-v3 ref="myRef" title="Modal" hide-footer centered>  Hi, there! I'm a basic modal with no footer</vue-modality-v3>

Footer

<vue-modality-v3 ref="myRef" @ok="$refs.myRef.hide()" @cancel="$refs.myRef.hide()" title="Modal" centered>  Use the footer buttons to close the modal</vue-modality-v3>

Error icon

<vue-modality-v3 ref="myRef" error title="Error" centered  @ok="$refs.myRef.hide()" @cancel="$refs.myRef.hide()">  Oh! Something went wrong!</vue-modality-v3>

Success icon

<vue-modality-v3 ref="myRef" success title="Success" centered  @ok="$refs.myRef.hide()" @cancel="$refs.myRef.hide()">  That was a success ;)</vue-modality-v3>

Loading

<vue-modality-v3 ref="myRef" :ok-loading="loading" @ok="okHandle()" title="Loading" centered @cancel="$refs.success.hide()">  Click on the OK button</vue-modality-v3>

No close on backdrop

<vue-modality-v3 ref="myRef" no-close-on-backdrop no-close-on-esc hide-cancel title="Use the button" centered  @ok="$refs.myRef.hide()" @cancel="$refs.myRef.hide()">  Now you can't exit the modal by hiting ESC or clicking outside the box</vue-modality-v3>