Not able to make it work on Vue3
See original GitHub issueHello, I have been trying to make it work on Vue3 without any luck. I feel like I am stuck on something very trivial. Any help would be appreciated. Here is the code. Nothing appears in the ui when I run this except for the background color from the card. There are no errors as well.
<template>
<v-container fluid>
<v-row>
<v-col cols="12">
<v-card theme="dark" min-height="760">
<v-card-title>Shapes</v-card-title>
<v-card-text>
<div id="canvas"></div>
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
import Drawflow from "drawflow";
import { h, getCurrentInstance, render } from "vue";
// eslint-disable-next-line no-unused-vars
import styleDrawflow from "drawflow/dist/drawflow.min.css";
const Vue = { version: 3, h, render };
export default {
name: "CreateFlows",
data() {
return {
shapes: {},
components: [],
editor: null,
dataflowData: {
drawflow: {
Home: {
data: {},
},
Other: {
data: {
16: {
id: 16,
name: "facebook",
data: {},
class: "facebook",
html: "Facebook Message",
inputs: {},
outputs: {
output_1: {
connections: [
{
node: "17",
output: "input_1",
},
],
},
},
pos_x: 226,
pos_y: 138,
},
17: {
id: 17,
name: "log",
data: {},
class: "log",
html: "Save log file",
inputs: {
input_1: {
connections: [
{
node: "16",
input: "output_1",
},
],
},
},
outputs: {},
pos_x: 690,
pos_y: 129,
},
},
},
},
},
};
},
mounted() {
const id = document.getElementById("canvas");
const internalInstance = getCurrentInstance();
this.editor = new Drawflow(
id,
Vue,
internalInstance.appContext.app._context
);
this.editor.start();
this.editor.import(this.dataflowData);
},
methods: {},
};
</script>
<style>
@import "drawflow/dist/drawflow.min.css";
#square {
background: lightblue;
width: 100px;
height: 100px;
}
#triangle {
width: 0;
height: 0;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 80px solid lightblue;
}
</style>
Issue Analytics
- State:
- Created a year ago
- Comments:6 (3 by maintainers)
Top Results From Across the Web
Provide Inject not working properly in vue 3 composition API
In the component receiving the data and making the call I have a provide method and then I am inject ing the data...
Read more >Why Your Vue Component Isn't Updating (and how to fix it)
1. Check that variables are reactive · 2. Make sure to update Arrays and Objects correctly (only in Vue 2) · 3. Use...
Read more >Storybook 6.5 does not work with vue 3 · Issue #18264 - GitHub
When trying to create a storybook reproduction setup, even the default vue 3 configuration does not work. It shows the following error:.
Read more >Frequently Asked Questions - Vue.js
Frequently Asked Questions #. Who maintains Vue? #. Vue is an independent, community-driven project. It was created by Evan You in 2014 as...
Read more >Vue 3 was a mistake that we should not repeat - Medium
Vue was always the framework that made sense. You could try guessing how an API should work and you would probably be right....
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
If it is not displayed, it is because you have not defined the height and width in the canvas div. Try adding in the style.
Thanks a lot, that was the issue.