Universal modal plugin for Vue@3
npm install vue-universal-modalUniversal modal plugin for Vue@3
Demo
> ⚠️ This plugin does not support Vue@2
- Introduction
- Features
- Install plugin
- Options
- Usage modal
- v1.0.x -> v1.1.x change point
- props
- props.options
- emit events
- Handle global CSS
- Example
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
- Based on the teleport
- Provides essential features for modal
- A11Y
- Support SSR (Insert rendering source into SSR context, Mount from Client-side)
``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',
});
`
`ts`
app.use(VueUniversalModal, {
teleportTarget: '#my-modals',
modalComponent: 'MyModal',
});
| name | type | detault | description |
| ----------------------------- | -------- | --------- | -------------------------------------------------------------------------------------------------------- |
| teleportTarget (required) | string | | Teleport target |string
| modalComponent | | 'Modal' | Global modal component name |
Insert the component wrapped with the modal component. (Slot based)
` Hellovue
`
> ### v1.0.x -> v1.1.x change point
>
> - Use v-model instead of v-if for modal component insertionemitClose
> - If you control the insertion of components with v-if, the close animation will not work.
> - slot argument was deprecated.
| name | type | detault | description |
| -------- | ---------- | ---------- | --------------------------------------------------- |
| close | function | () => {} | Function to close a modal (apply when click dimmed) |boolean
| disabled | | false | Handle just visibility (as in v-show) |object
| options | | {} | |
#### props.options
| name | type | detault | description |
| ----------------- | ----------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| transition | number | false | 300 | transition duration |boolean
| closeClickDimmed | | true | Closes the modal when dimmed is clicked |number
| closeKeyCode | | false | 27 (esc) | Closes the modal when press key |object
| styleModalContent | | {} | Inject modal content style (.vue-universal-modal-content) |
Supports emit properties for all transition events.
` Hellovue
:close="closeModal"
@before-enter="beforeEnter"
@after-enter="afterEnter"
@before-leave="beforeLeave"
@after-leave="afterLeave"
>
`
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;
}
- Source
- Demo
- Runtime
- Get SSR Context