vue-universal-modal

Universal modal plugin for Vue@3
Demo

> ⚠️ This plugin does not support Vue@2

Table of Contents

- Introduction
- Features
- Install plugin
- Options
- Usage modal
- v1.0.x -> v1.1.x change point
- props
- props.options
- emit events
- Handle global CSS
- Example

Introduction

vue-universal-modal plugin is based on the teleport.
It is very light and simple, but it provides essential features for modal use in applications.
(Such as Add & Remove, Visible & Hidden, Transition, Auto bind keyboard and mouse to close, Support SSR, A11Y...)
Here is the Demo

Features

- Based on the teleport
- Provides essential features for modal
- A11Y
- Support SSR (Insert rendering source into SSR context, Mount from Client-side)

Install plugin

``bash
npm install vue-universal-modal
`

Insert teleport element in your html

`html
...


...
`

> Because SSR cannot be implemented by dynamically creating and ref referencing teleport elements, teleport targets must be inserted into html first.

And install plugin in vue application

`ts
import 'vue-universal-modal/dist/index.css';

import VueUniversalModal from 'vue-universal-modal';

app.use(VueUniversalModal, {
teleportTarget: '#modals',
});
`

$3

`ts
app.use(VueUniversalModal, {
teleportTarget: '#my-modals',
modalComponent: 'MyModal',
});
`

| name | type | detault | description |
| ----------------------------- | -------- | --------- | -------------------------------------------------------------------------------------------------------- |
| teleportTarget (required) | string | | Teleport target |
| modalComponent | string | 'Modal' | Global modal component name |

Usage modal

Insert the component wrapped with the modal component. (Slot based)

`vue



`

> ### v1.0.x -> v1.1.x change point
>
> - Use v-model instead of v-if for modal component insertion
> - If you control the insertion of components with v-if, the close animation will not work.
> - emitClose slot argument was deprecated.

$3

| name | type | detault | description |
| -------- | ---------- | ---------- | --------------------------------------------------- |
| close | function | () => {} | Function to close a modal (apply when click dimmed) |
| disabled | boolean | false | Handle just visibility (as in v-show) |
| options | object | {} | |

#### props.options

| name | type | detault | description |
| ----------------- | ----------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| transition | number | false | 300 | transition duration |
| closeClickDimmed | boolean | true | Closes the modal when dimmed is clicked |
| closeKeyCode | number | false | 27 (esc) | Closes the modal when press key |
| styleModalContent | object | {} | Inject modal content style (.vue-universal-modal-content) |

$3

Supports emit properties for all transition events.

`vue



`

Handle global CSS

You can change it directly to your own style by referring to the source

`css
.vue-universal-modal {
/ Change dimmed color /
background-color: rgba(255, 255, 0, 0.3);
}
.vue-universal-modal-content {
/ Align to top (flex-direction property value is set to column) /
justify-content: flex-start;
}
``

Example

- Source
- Demo
- Runtime
- Get SSR Context