Using Material Design Lite with Vue.js

When building an application I like to use a nice framework for the design. Lately Material Design has been getting some attention. Some implementation are being worked on and are functional. One of these implementations is Material Design Lite which is library agnostic and can be used with any data-reactive library/framework like Angular, Reactjs, Aurelia or, my preferred one, Vue.js.

As MDL (Material Design Lite) is library/framework agnostic, you have to manually call some functions on elements that are dynamically created. This is clearly said on the Getting Started section of MDL. It is actually very simple as you only have to call the method componentHandler.upgradeElement on an element to make it behave as any other MDL component.

In Vue.js this is extremely easy to do by using a directive:

Vue.directive('mdl', {
  bind: function() {
    componentHandler.upgradeElement(this.el);
  }
});

This directive will call the needed method at creation on any element using it. In the case of a button, this will add the on click ripple effect.

But what about more complex components, like the progressbar?

It has a variable value that must be changed with a special method element.MaterialProgress.setProgress. It would be nice to have some markup like this:

<div v-progress="progressVariable" class="mdl-progress mdl-js-progress"></div>

If the progressVariable value changes, the progressbar should change accordingly. Well, another incredibly simple directive solves this as well:

Vue.directive('mdl-progress', function(val) {
  // The directive may be called before the element have been upgraded
  if (!this.el.MaterialProgress)
    componentHandler.upgradeElement(this.el);
  this.el.MaterialProgress.setProgress(val);
});

Easy peasy!