title: Vue.js -Importing custom directive as ES6 Module
body: <p>I have a rather specific question.</p>
  <p>I'm using vue in my rails application through rails webpacker, to use vue components, I have to put a javascript pack tag in my layout and that references a javascript file that in turn renders the vue component, you can imagine that in total this approach has led me to make a lot of workarounds, but the one thing I still have left is a vue custom directive <code>click-outside</code> that I have had to add to each of my vue component generators, for example, here in <code>filter-products.js</code></p>
  <pre class="lang-js prettyprint-override"><code>import Vue from &quot;vue&quot;;
  import filterProducts from &quot;../../views/filter-products&quot;;
  var element = document.getElementById(&quot;filter-products&quot;);
  const props = JSON.parse(element.getAttribute(&quot;props&quot;));
  
  Vue.directive('click-outside', {
      bind: function(el, binding, vNode) {
      //bind logic
      },
  
      unbind: function(el, binding) {
      //unbind logic
      }
  });
  
  if (element != null) {
    new Vue({
      render: (h) =&gt; h(filterProducts, { props }),
    }).$mount(element);
  }
  </code></pre>
  <p>the custom directive code is actually big, so what I have in mind but am not sure how to do is one of two things:</p>
  <ul>
  <li>Have the bulk for that custom directive in an ES6 Module and import that here and just use it directly.</li>
  <li>Create a prototype for Vue that includes this custom directive and import it instead of importing <code>vue from &quot;vue&quot;</code>.</li>
  </ul>
  <p>Is either of the approaches better? and how would I achieve them? thanks!</p>