Notifications
See all
  • Alice C. left a comment.

    1 hour ago

  • Joshua S. uploaded a file.

    2 hours ago

  • Tara S. sent you a message.

    2 hours ago

  • Melany W. left a comment.

    3 hours ago

Erik KovalskyProduct Manager
ProfileView your profile

ProjectsAll my projects
TeamManage your team

SettingsAccount settings

  • Erik KovalskyProduct Manager
    ProfileView your profile

    ProjectsAll my projects
    TeamManage your team

    SettingsAccount settings

  • Erik KovalskyProduct Manager
    ProfileView your profile

    ProjectsAll my projects
    TeamManage your team

    SettingsAccount settings

Components

  • Components Hub
  • Colors
  • Helpers
  • Content
  • Table
  • Icons
  • Interaction
  • VDropdown
  • VLoader
  • VPlaceload
  • VPlaceloadText
  • VPlaceloadAvatar
  • VMessage
  • VModal
  • VProgress
  • VTootlip
  • Buttons
  • Forms
  • Switches
  • Display
  • VAvatar
  • VAvatarStack
  • VBlock
  • VIconBox
  • VIconWrap
  • VSnack
  • VTag
  • VFlex
  • VGrid
  • VBreadcrumb
  • VTabs
  • VFlexPagination
  • VFlexTable
  • Accordions
  • Cards
  • Placeholders
  • Addons

Notifications
See all
  • Alice C. left a comment.

    1 hour ago

  • Joshua S. uploaded a file.

    2 hours ago

  • Tara S. sent you a message.

    2 hours ago

  • Melany W. left a comment.

    3 hours ago

  • Components
  • VModal

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, set the is property to change the element used to render the modal tag. 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

NameDefaultType
:title required
:actions
:cancel-label
:is
:noclose
:noscroll
:open
:rounded
:size
:tabs

<VModal> Events

NameType
@close

<VModal> Slots

NameType
#action
#cancel
#content