Looking forQuasar v2 beta(Vue 3) docs?

Morph Directive

“Morph” is a Quasar directive that provides the ability to morph DOM elements between two states.

Under the covers, it uses the Quasar Morph function util.


 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.


Reading the Morph function util first will be best in your understanding of how this directive works.

This directive morphs one element in a group into another. The morphing is activated by changing the value (model) of the directive to match the name of the morphing element.


  • The “name” and “group” (as directive arg or through the value of the directive) are mandatory.
  • If the value of the directive is in Object form, then “model” is also mandatory.
Morph between multiple elements in a group
Morph a button into a card

Morph API

Loading API...
Please wait...