How can i custom a Card as a Node? about vue-flow

[bcakmakoglu]

You can use any component as a node basically.
The data property is to pass a custom data object to your node, i.e.:

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

const elements = ref([
   // Custom node with an image
   { id: '1', type: 'custom', data: { label: 'Node 1', image: 'https://cdn2.thecatapi.com/images/DmP9GCClC.jpg' }, position: { x: 50, y: 50 } }, 
])
</script>
<template>
   <VueFlow v-model="elements">
		<template #node-custom="props">
      <CustomNode v-bind="props" />
    </template>
   </VueFlow>
</template>

<script setup>
// CustomNode.vue
import Card from './Card.vue'

const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params)
</script>
<template>
  <Handle type="target" :position="Position.Left" :on-connect="onConnect" />
  <Card bg-image="props.data.image">
		{{ props.data.label }}
  </Card>
  <Handle type="source" :position="Position.Right" />
</template>

Here's an example, though it uses the v0.4.0-API (slightly different for this case) but the concept is the exact same