Can Vue.js custom directive be implemented as individual files?

Question

Is there any way that Vue custom directives can be implemented as individual files (ala Vue components .vue file) and be compiled in the root js file? (I'm using Webpack)

I tried the following on app.js but it's not recognised.

require('./directives/test.js');

Thanks in advance.

Answer 1

A directive is only a class with a few well-defined methods. In JS, you can write something like :

export const MyDirective {
    bind(el,binding,vnode) {
        /* your code */
    }
}

then, in the file where you use it :

<template>
    <p v-app-my-directive:arg.modifier="value">Some Text</p>
</template>
<script>
    import MyDirective from './directives/MyDirective.js';

    export default {
        directives: {
            AppMyDirective: MyDirective
        }
        /* ... */
    }
</script>

You can also use

Vue.directive('app-my-directive', MyDirective)

to declare it globally.