I have a very specific query.
Currently, I am utilizing Vue in my Rails application with the help of Rails Webpacker. To incorporate Vue components, I need to add a JavaScript pack tag to my layout file which references a JavaScript file responsible for rendering the Vue component. This method has required me to implement various workarounds, but there's one remaining hurdle - a custom Vue directive called click-outside. I have been adding this directive manually to all my Vue component generators, like in the case of filter-products.js
import Vue from "vue";
import filterProducts from "../../views/filter-products";
var element = document.getElementById("filter-products");
const props = JSON.parse(element.getAttribute("props"));
Vue.directive('click-outside', {
bind: function(el, binding, vNode) {
//bind logic
},
unbind: function(el, binding) {
//unbind logic
}
});
if (element != null) {
new Vue({
render: (h) => h(filterProducts, { props }),
}).$mount(element);
}
The code for the custom directive is quite extensive. Therefore, my idea is to explore either of the following approaches:
- Consolidate the bulk of the custom directive into an ES6 Module and simply import it here for direct usage.
- Create a prototype for Vue that contains this custom directive and then import it instead of using
vue from "vue".
Which approach do you think would be more efficient? Additionally, how can I go about implementing them? Thank you!