VModal
Vuero ships with a dead simple and versatile <VModal /> component. The VModal component has 2 available slots: one for the content, so you can put anything you want inside, and one for the primary action. Check the code example for more details.
Modal Sizes
The <VModal /> component can have different sizes. use the size true prop to change the modal size. Available sizes are: small, default, medium, large and big.
Modal Forms
Vuero <VModal /> component can be used for anything, including displaying and handling forms. Use the content slot <template #content></template> to inject any kind of content inside the modal.
Modal Options
The <VModal /> component behavior can be customized. Use the noscroll prop to disable page scrolling when the modal is open. You also can use the noclose prop to prevent modal from closing if the user click on the background overlay.
VModal Props
Here is the full props available for <VModal /> component:
| Props | Default | Type |
|---|---|---|
| title required | undefined | string |
| size | undefined | small, medium, large, big |
| actions | undefined | center, right |
| open | false | boolean |
| rounded | false | boolean |
| noscroll | false | boolean |
| noclose | false | boolean |
| cancelLabel | Cancel | string |
VModal Slots
Here is the full slots available for <VModal /> component:
| Slot | Properties | Description |
|---|---|---|
| content required | null | Inner modal content |
| action | null | Action button slot |
| cancel | null | Cancel button slot |