Is is possible to use vue-flow component in non-typescript Vue3 project?

[eminaigoritma]

Hi @bcakmakoglu ,

Thank you for an amazing product. We want to integrate it in our own Vue3 project, which is not written in typescript. Is it possible to partially integrate this component, or shall we first convert the project to typescript?

And would you be OK to support us to integrate this plugin for our own custom needs? We would be more than happy to compensate for it.

[bcakmakoglu]

Hi!

Sure, you can use Vue Flow without TypeScript.
If you're using webpack or vite you should be good with ES-6 syntax (i.e. import ... from '@braks/vue-flow' instead of const ... = require('@braks/vue-flow'))

<script setup>
// ES-6
import { VueFlow } from '@braks/vue-flow'

const elements = ref([
  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
  { id: 'e1-2', source: '1', target: '2', animated: true },
  { id: 'e1-3', source: '1', target: '3' },
])
</script>
<template>
  <VueFlow v-model="elements" class="vue-flow-basic-example"> </VueFlow>
</template>

or if you're using the Options-API

<script>
import { VueFlow } from '@braks/vue-flow'

export default defineComponent({
  components: { VueFlow },
  data: () => ({
    elements: [
      { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
      { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
      { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
      { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
      { id: 'e1-2', source: '1', target: '2', animated: true },
      { id: 'e1-3', source: '1', target: '3' },
    ],
  }),
})
</script>
<template>
  <VueFlow v-model="elements" class="vue-flow-basic-example"> </VueFlow>
</template>

Regarding help with your integration, if you can give me a contact I'll message you about that :)
Otherwise discussions are always open for new ideas, suggestions, issues etc. and that is free of charge 😄

[eminaigoritma]

Sounds great. Thanks for the detailed example.

Here's my contact information: [email protected] . Looking forward to hearing from you :-)

[eminaigoritma]

Hi @bcakmakoglu

Didn't receive an email yet, in case you sent one. Just wanted to notify.

[bcakmakoglu]

@eminaigoritma
Just sent you a mail :)