Photo by on frank mckenna Unsplash is “The Progressive Framework”. It takes inspiration from all prior art in the view library and frontend framework world, including AngularJS, React, Angular, Ember, Knockout and Polymer. In Vue (and Angular/AngularJS), a directive is a way to wrap functionality that usually applies to DOM elements. The example in Vue’s documentation is a directive. VueJS JavaScript focus When running inside of AngularJS, an issue occured whereby the AngularJS router would try to resolve normal anchors’ on click. The s weren’t AngularJS URLs so it would fall back to the default page. One solution could have leveraged components to update directly, but here’s a nifty directive to do the same: VueJS href href window.location <a v-href="'/my-url'">Go</a> That’s a pretty cool API, and it’s probably more idiomatic Vue than: <MyAnchor href="/my-url">Go</MyAnchor> There were a couple of gotchas: Local vs global directive registration 🌐 A minimal directive API 👌 Vue directive hooks and [removeEventListener](https://codewithhugo.com/a-simple-real-world-vuejs-directive#hooks-and-remove) 🆓 Handling clicks properly 🖱 Parting thoughts 📚 Local vs global directive registration 🌐 A global Vue directive can be defined like so: Vue.directive("non-angular-link", {// directive definition}); It can also be defined locally as follows: Vue.component("my-component", {directives: {"non-angular-link": nonAngularLinkDirective}}); Where would be a JavaScript object that defines the directive, eg. nonAngularLinkDirective const nonAngularLinkDirective = {bind(el, binding) {},unbind(el) {}}; This allows for flexibility if using a bundler like webpack and single file components: // non-angular-link-directive.jsexport const nonAngularLinkDirective = {// directive definition}; // MyComponent.vue<template><ahref="/my-url"v-non-angular-link Go </a></template> <script>import { nonAngularDirective } from './non-angular-link.directive';export default {directives: {'non-angular-link': nonAngularLinkDirective}};</script> A minimal directive API 👌 A full single file component would look like the following: MyAnchor // MyAnchor.vue<template><a@click="goToUrl($event)":href="href" <slot /> </a></template><script>export default {props: {href: {type: String,required: true}},methods: {goToUrl(e) {e.preventDefault();window.location.assign(this.href);}}});</script> This is quite verbose and leverages a global DOM object… not ideal. Here’s something similar using a directive: // non-angular-link-directive.jsexport const nonAngularLinkDirective = {bind(el) {el.addEventListener("click", event => {event.preventDefault();window.location.assign(event.target.href);});}}; This directive has to be used like so , which isn’t the nicest API. By leveraging the second parameter passed to we can write it so that it can be used like (for more information about and , see <a href="/my-url" v-non-angular-link>Go</a> bind <a v-href="'/my-url'">Go</a> el binding https://vuejs.org/v2/guide/custom-directive.html#Directive-Hook-Arguments): // non-angular-link-directive.jsexport const nonAngularLinkDirective = {bind(el, binding) {el.href = binding.value;el.addEventListener("click", event => {event.preventDefault();window.location.assign(event.target.href);});}}; We can now use it like using a local directive definition: // MyComponent.vue<template><a v-href="'/my-url'">Go</a></template><script>import { nonAngularLinkDirective } from './non-angular-link.directive';export default {directives: {href: nonAngularLinkDirective}};</script> Vue directive hooks and 🆓 removeEventListener For the full list of directive hooks, see . https://vuejs.org/v2/guide/custom-directive.html#Hook-Functions As a good practice, the event listener should be removed when it’s not required any more. This can be done in much in the same way as it was added, there’s a catch though, the arguments passed to have to be the same as the ones passed to : unbind removeEventListener addEventListener // non-angular-link-directive.jsconst handleClick = event => {event.preventDefault();window.location.assign(event.target.href);};export const nonAngularLinkDirective = {bind(el, binding) {el.href = binding.value;el.addEventListener("click", handleClick);},unbind(el) {el.removeEventListener("click", handleClick);}}; This will now remove the listener when the component where the directive is used is destroyed/un-mounts and leaves us with no hanging listeners. Handling clicks properly 🖱 An edge case happens when an anchor contains an image: the of the event is not the , but the … which doesn’t have a attribute. target anchor img href To deal with this, with a little knowledge of how calls the passed handler, we can refactor the function. addEventListener handleClick // non-angular-link-directive.jsfunction handleClick(event) {// The `this` context is the element// on which the event listener is defined.event.preventDefault();window.location.assign(this.href);} // rest stays the same By using a named functions and the allows the event listener to bind to the element on which it’s attached as opposed to the lexical of an arrow function. this this this Parting thoughts 📚 We use so as to allow to test easily. With Jest and a test at the component level should look like this: window.location.assign @vue/test-utils import { shallowMount } from '@vue/test-utils';import MyComponent from './MyComponent.vue'; test('It should call window.location.assign with the right urls', () => {// Stub window.location.assignwindow.location.assign = jest.fn(); const myComponent = shallowMount(MyComponent); myComponent.findAll('a').wrappers.forEach((anchor) => {const mockEvent = {preventDefault: jest.fn()};anchor.trigger('click', mockEvent);expect(mockEvent.preventDefault).toHaveBeenCalled();expect(window.location.assign).toHaveBeenCalledWith(anchor.attributes().href);}); Directives allow you to contain pieces of code that interact with the DOM. This code needs to be generic enough to be used with the limited information available to a directive. By coding against the DOM, we leverage the browser APIs instead of re-inventing them. Originally published at codewithhugo.com on May 15, 2018.
