Morph Directive

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

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

Morph API

Loading API...


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