Vue.js -Importing custom directive as ES6 Module - javascript

I have a rather specific question.
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 click-outside that I have had to add to each of my vue component generators, for example, here in 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 custom directive code is actually big, so what I have in mind but am not sure how to do is one of two things:
Have the bulk for that custom directive in an ES6 Module and import that here and just use it directly.
Create a prototype for Vue that includes this custom directive and import it instead of importing vue from "vue".
Is either of the approaches better? and how would I achieve them? thanks!

Create a folder named directives and for each directive create a file to make your code more organized and maintenable especially in team :
import Vue from 'vue';
const directiveName = {
inserted: function(el, binding) {},
update: function(el, binding) {},
};
export default directiveName;
Vue.directive('directiveName', directiveName);//optional
then import it in any component like :
import directiveName from 'path-to-directives-folder/directives/directiveName'
then use it as follows :
data(){
...
},
directives:{directiveName}

Related

Is there a way to add Vuex to Vue plugin install function and share state between its components?

Basically i want to use my own store inside vue install and vue components i add throught my vue plugin.
I found that i can use vuex inside actual install function and do everything vuex can, but i can't seem to pass it to my custom components.
Is there any other ways to add global events in my SFC's that i add inside my plugin?
import MyComponent from './MyComponent.vue'
import MySecondComponentfrom './MySecondComponent.vue'
import Vuex from 'vuex'
import store from './store.js'
const CustomFn = function(message, options) {
this.$store.dispatch("someRandomAction", { message, options })
}
export default {
install(Vue, options) {
if (this.installed) { return }
this.installed = true
Vue.use(Vuex)
const storeInstance = new Vuex.Store(store)
Vue['store'] = storeInstance
// is there a way to add storeInstance to my own components and share one state between them?
Vue.component('MyComponent', Vue.extend(MyComponent))
Vue.component('MySecondComponent', Vue.extend(MySecondComponent))
Vue.prototype['$doStuff'] = CustomFn
Vue['doStuff'] = CustomFn
}
}
Problem is that I cannot pass this Vuex store instance inside MyComponent and share the same store between multiple components.
Custom component properties are supposed to be globally provided in Vue 2 by assigning them to Vue.prototype because component instances prototypically inherit from it.
new Vuex.Store(store) is a mistake if store is already Vuex store and not plain object that contains store options. This will result in malfunctioning store like shown in this question. Even if store is not store instance yet, it makes sense to make it an instance and export in a separate module so it could be imported in non-component modules.
It should be:
Vue.prototype.$store = store

How to define directives on vue3 compositionAPI?

How to define and use directives on vue3 composition api with the new syntactic sugar in SFC <script setup> format?
With options API it used to be like this
import click_outside from "#/directives/click-outside.js";
export default {
directives: {
"click-outside": click_outside,
},
...
}
click-outside.js
<script setup>
import {defineProps, onBeforeMount, onUnmounted, directive } from "vue";
const onBeforeMount = (el, binding) => {
...
};
const onUnmounted = (el) => {
...
};
</script>
I couldn't figure out the same counterpart code in composition API
Feature parity with regular script SFC is achieved in 3 different ways.
props argument from setup and props, emits, expose fields from component options are provided by using define... helpers.
context (only slots and attrs properties) argument from setup is provided by using use... helpers.
components and directives are indirectly provided by using imports of the same name.
The rest of features (e.g. name property) are still provided by script element that can coexist with script setup.
#Estus Flask's answer is enough but just to clarify, you just import directives like you do with components with PascalCase or camelCase and you can directly use it in your templates.
<script setup>
import vClickOutside from "#/directives/click-outside.js";
const outside = () =>{ ... }
...
</script>
<template>
...
<div v-click-outside="outside">
...
...
</template>

Vue component inside legacy php/jquery project

I've got this big legacy web app based on Codeigniter and jQuery.
The plan is to phase out jQuery and start using Vuejs instead. We are replacing certain parts of the website step by step.
I have just installed Nuxtjs and got the file structure the way i like it inside the legacy project.
Now to the question. How can i access a Vue component from one of my legacy javascript files?
App.vue
<template>
<div id="app">
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
</div>
</template>
<script lang="ts">
import Vue from "vue";
import HelloWorld from "./components/HelloWorld.vue";
export default Vue.extend({
name: "App",
components: {
HelloWorld
}
});
</script>
main.ts
import Vue from "vue";
import App from "./App.vue";
import store from "./store";
Vue.config.productionTip = false;
new Vue({
store,
render: h => h(App)
}).$mount("#app");
I want to display my App.vue inside an ordinary php/html view.
I am doing something similar right now, the project was originally written using Thymeleaf and jQuery and now we are switching to Vue.
You can communicate between vue components and non-vue components in a few ways, none of them are "pretty".
Communication
Classic JavaScript events
Pretty straightforward
// legacy code
document.dispatchEvent(new CustomEvent('legacy-vue.something-happened', { detail: payload }))
// vue component
created () {
document.addEventListener('legacy-vue.something-happened', this.onSomethingHappened)
},
destroyed () { // don't forget to remove the listener!
document.removeEventListener('legacy-vue.something-happened', this.onSomethingHappened)
}
Exposing EventHub
Similar to the previous one, but you are using vue events instead. This is what i would recommend, because it's the Vue way of handling events and your goal is to vuetify your app.
// initialization
const hub = new Vue()
Vue.prototype.$eventHub = hub
window.$vueEventHub = hub
// legacy code
$vueEventHub.$emit('something-happened', payload)
// vue component
created () {
this.$eventHub.$on('something-happened', this.onSomethingHappened)
},
destroyed () {
this.$eventHub.$off('something-happened', this.onSomethingHappened)
}
Exposing whole components
The most flexible way, but it's hard to see what's going on where. Event based approaches the lesser evil in my opinion (it's easy to track events).
// vue component
created () {
window.vueTableComponent = this
}
// legacy component
vueTableComponent.fetchNextPage()
vueTableComponent.registerOnPageFetchedCallback(callback);
Summary
No matter which approach you pick, i recommend doing something like this:
Let's say that you have TableComponent. TableComponent has few props like apiUrl, emits row-clicked event, etc. It would be best to design the component without thinking about your legacy code at all, and then create it's legacy wrapper because at one point it will be used both with vue-only screens and with mixed-screens (with both legacy components and vue components). An example:
LegacyTableComponentWrapper.vue
<template>
<table-component
:api-path="apiPath"
#row-clicked="onRowClicked"
ref="table-component"
/>
</template>
export default {
data: () => ({
apiPath: null
}),
methods: {
onRowClicked (row) {
this.$eventHub.$emit('table-row-clicked', row) // notify legacy code
},
onApiPathDefined (payload) {
this.apiPath = payload
}
},
mounted () {
// legacy code might require the TableComponent to act differently
// and if you don't want the TableComponent to know whenever it's legacy or not
// you can always override one or more of it's methods.
this.$refs['table-component'] = this.overriddenImplementationOfXYZ
},
created () {
this.$eventHub.$on('define-api-path', this.onApiPathDefined)
},
destroyed () {
this.$eventHub.$off('define-api-path', this.onApiPathDefined)
}
}
It's sure more work at first, but will save you a headache later, when you will be working on your first view which is fully in vue and all that legacy communication stuff is in the way.

Add all vue components to window array

I currently have a strange Vue setup due to our websites all using an old system.
What we have had to do is create an instance of Vue for each component (usually not many). What I want to do for all components is to pass their name and reference to the element into an array, just for reference when debugging issues on live issues.
app.js
import Vue from "vue";
import Axios from 'axios';
import inViewportDirective from 'vue-in-viewport-directive';
window.components = [];
Vue.component( 'video-frame', () => import('./components/VideoFrame.vue' /* webpackChunkName: "video-frame" */) );
Vue.prototype.$event = new Vue();
Vue.prototype.$http = Axios;
Array.prototype.forEach.call(document.querySelectorAll(".app"), (el, index) => new Vue({el}));
Now i'm adding the following code to each component, is there not a way I can do this once within my app.js and have all the components automatically do the following:
mounted() {
window.components.push({
tag: this.$vnode.tag,
elm: this.$vnode.elm
});
},
You can use a global mixin like this:
Vue.mixin({
mounted: function() {
window.components.push({
tag: this.$vnode.tag,
elm: this.$vnode.elm
});
}
});
That will ensure that code will run on the mounted hook on every single one of your Vue instances.
Reference: https://v2.vuejs.org/v2/guide/mixins.html

How to use react custom package into an angular directive

Hi i have an angular v1.x application and a react custom package.
I want to be able to use the react custom package into the angular directive, which eventually will display a react component.
some code:
angular app:
directive that consumes the my-package
import app from '../../main'
import React from "react";
import ReactDOM from "react-dom";
import Mypackage from 'my-package';
const reactDirective = app.directive('injectReact', function() {
return {
template: '<div id="reactapp" class="react-part"></div>',
scope: {},
link: function(scope, el, attrs){
scope.newItem = (value) => {alert (value)}
const reactapp = document.getElementById('reactapp')
scope.$watch('scopeval', function(newValue, oldValue) {
if (angular.isDefined(newValue)) {
ReactDOM.render(
<div>
<Mypackage />
</div>
, reactapp);
}
}, true);
}
}
})
The package is linked into the project, so 'my-package' is inside angular's node_modules folder.
The application uses bower & gruntfile.js to gother all the js files of the application
i cant use import or require into the directive file.
so i miss some babel/browserify configuration to make this work.????
Any help is welcome.
The easiest way you can achieve this is by using external package like react2angular. This package allows you to create angular.js wrapper components which will render specific react components, allowing you to pass props to them. Linking process is quite simple:
angular
.module('myModule', [])
.component('myComponent', react2angular(MyComponent, [], ['$http', 'FOO']))
If you want to create you own wrapping library checkout how it's made here (rendering, passing props and watching for changes to them)

Categories