Cleanest way to import/require a Vue.js directive?

Question

I'm trying to organize my plugins into custom Vue Directives that could be a simple as:

Vue.directive('popout', {
    bind() {
        $(this.el).popOut();
    }
});

And save these in separate files, to be imported in either the main JS file or the Vue(ify) components with something like:

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

I've tried a number of export default setups, but I can't seem to get it to work. What would be the cleanest (i.e. best-practice) way to do this?

Since you seemt o want to register them globally (`Vue.directive(...)`) there's nothing you want to import from these files, there's no need for any exports. Just make sure you `import Vue from 'vue'` in them. — Linus Borg, Jul 18 '16 at 11:40
Hi Oscar, I'm wondering if you ever found a solution to this and if you could share it - thanks — Beaker, Sep 20 '17 at 16:29

score 3 · Answer 1 · answered Jan 04 '18 at 07:09

I got the solution,below is the code

import Vue from 'vue';
export const global= {
 bind(el, binding, vnode) {
     console.log('you code');
 }
};

this code goes in lets say directive/global.js file. Then in you app.js or entry point file use this

import { global } from './directive/global.js';
Vue.directive('global', global);

first line will import the directive as we are using same name to only used global, second line to make you directive global. Hope it help.

1 Answers1