Open thespacedeck opened 3 years ago
I have tried to create a Vue-3 container for vis-network. I got issues related to strict mode. Some how all vis functions ended up with problems in their argument TS. Here is a snapshot.
Here is a codesandbox link which reproduces this issue with graph2d. Note that vue version in the sandbox is 3.2.6. Please take a look @alexcode
example for vue 3:
<template>
<q-inner-loading :showing="loading">
<q-spinner-ball size="50px" color="primary"/>
</q-inner-loading>
<div ref="root"/>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { Network } from 'vis-network';
import API from 'src/services/api';
export default defineComponent({
name: 'vis',
data(): {
vis: Network | null,
loading: boolean
} {
return {
loading: false,
vis: null,
};
},
async mounted() {
try {
this.loading = true;
var data: any = await API.core.vis(this.$route.query);
} catch (error) {
const message = 'Error vis';
this.$q.notify({ type: 'negative', message: message });
console.log(message, error, data);
} finally {
this.loading = false;
}
if (data != undefined) {
const el : HTMLElement | any = this.$refs.root;
this.vis = new Network(el, data['graph'], {});
this.vis.once('afterDrawing', () => {
el.style.height = '100vh'
});
};
},
beforeUnmount() {
this.vis?.destroy();
}
});
</script>
minimum for typescript and vue 3:
<template>
<div ref="root"/>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { Network } from 'vis-network';
export default defineComponent({
name: 'vis',
data(): {
vis: Network | null,
} {
return {
vis: null,
};
},
mounted() {
const el : HTMLElement | any = this.$refs.root;
this.vis = new Network(el, {nodes: ...}, {});
this.vis.once('afterDrawing', () => {
el.style.height = '100vh'
});
};
},
beforeUnmount() {
this.vis?.destroy();
}
});
</script>
Sorry for the very late reply. @shambu2k you are using the vue2 version of vue2vis. You must migrate to the new package of the repo by modifying the imports to:
import { Graph2d } from "@vue2vis/graph2d";
import "vis-timeline/styles/vis-timeline-graph2d.css";
Hi there,
I cannot seem to get vue2vis to work in vue3. I did a simple implementation and seems to crash at:
var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"visualization"})}
Neither _self or $createElement is available.
Could you perhaps assist?
Thanks, Wzz