Motion+

Modal dialog

An example of a modal dialog using Motion for Vue and the HTML <dialog /> element. This example uses a custom useDialog hook to manage Vue's declarative API with the dialog HTML element's imperative setModal and close API. It also provides a useClickOutside hook to check when the document has been clicked outside the modal dialog to close it.

Vue
>Live exampleOpen

Related examples

Latest in Vue

Motion+

Unlock all 370+ examples

  • Source code for every Plus example.
  • Provide examples direct to your agent via Motion's MCP.
  • Lifetime access to new examples and APIs.