logo

X6

  • Tutorials
  • API
  • Examples
  • Q&A
  • Change Log
  • XFlow
  • Productsantv logo arrow
  • 2.x
  • Introduction
  • Quickstart
  • Basic
    • Graph
    • Nodes
    • Edges
    • Connection Pile
    • Interaction
    • Events
    • Data Serialization
  • Intermediate
    • Connection Points
    • Tools
    • Group
    • React Nodes
    • Vue Nodes
    • Angular Nodes
    • HTML Nodes
  • Plugin
    • Graphic Transformations
    • Snapline
    • Clipboard
    • Keyboard
    • History
    • Selection Box
    • Scroller
    • Dnd
    • Mini Map
    • Stencil
    • Export
  • Upgrade to Version 2.x
  • Developer Tools

Vue Nodes

Previous
React Nodes
Next
Angular Nodes

Resource

Ant Design
Galacea Effects
Umi-React Application Framework
Dumi-Component doc generator
ahooks-React Hooks Library

Community

Ant Financial Experience Tech
seeconfSEE Conf-Experience Tech Conference

Help

GitHub
StackOverflow

more productsMore Productions

Ant DesignAnt Design-Enterprise UI design language
yuqueYuque-Knowledge creation and Sharing tool
EggEgg-Enterprise-class Node development framework
kitchenKitchen-Sketch Tool set
GalaceanGalacean-Interactive solution
xtechLiven Experience technology
© Copyright 2025 Ant Group Co., Ltd..备案号：京ICP备15032932号-38

Loading...

In this chapter, you will learn about

  • How to use Vue components to render node content
  • How to update node content

Rendering Nodes

We provide a standalone package @antv/x6-vue-shape to render nodes using Vue components.

Note

It is important to ensure that the versions of x6 and x6-vue-shape match, meaning both packages should use the same major version.

<template>
  <div class="app-content">
    <div id="container"></div>
    <TeleportContainer />
  </div>
</template>


<script lang="ts">
  import { defineComponent } from 'vue'
  import ProgressNode from './components/ProgressNode.vue'
  import { Graph } from '@antv/x6'
  import { register, getTeleport } from '@antv/x6-vue-shape'


  register({
    shape: 'custom-vue-node',
    width: 100,
    height: 100,
    component: ProgressNode,
  })
  const TeleportContainer = getTeleport()


  export default defineComponent({
    name: 'App',
    components: {
      TeleportContainer,
    },
    mounted() {
      const graph = new Graph({
        container: document.getElementById('container')!,
        background: {
          color: '#F2F7FA',
        },
        autoResize: true,
      })


      graph.addNode({
        shape: 'custom-vue-node',
        x: 100,
        y: 60,
      })
    },
  })
</script>

The content of the node component is as follows:

<template>
  <el-progress type="dashboard" :percentage="percentage" :width="80">
    <template #default="{ percentage }">
      <span class="percentage-value">%</span>
    </template>
  </el-progress>
</template>


<script lang="ts">
  import { defineComponent } from 'vue'


  export default defineComponent({
    name: 'ProgressNode',
    inject: ['getNode'],
    data() {
      return {
        percentage: 80,
      }
    },
    mounted() {
      const node = (this as any).getNode()
      console.log(node)
    },
  })
</script>

The final effect is as follows:

Updating Nodes

To update the content of a Vue node, there are two methods:

  • Listen for node events within the component and trigger events externally.
  • Use state management tools like Vuex (not elaborated here, but used in the same way as regular Vue components with Vuex data).

Below is an introduction to dynamically updating node content using events:

const node = graph.addNode({
  shape: 'custom-vue-node',
  x: 100,
  y: 60,
  data: {
    progress: 80,
  },
})


setInterval(() => {
  const { progress } = node.getData()
  node.setData({
    progress: (progress + 10) % 100,
  })
}, 2000)

Inside the node component, we can listen for changes to the node's data:

export default defineComponent({
  name: 'ProgressNode',
  inject: ['getNode'],
  data() {
    return {
      percentage: 80,
    }
  },
  mounted() {
    const node = (this as any).getNode() as Node
    node.on('change:data', ({ current }) => {
      const { progress } = current
      this.percentage = progress
    })
  },
})

Using in Vue2

In the above example, we used teleport, which is a feature in Vue3. How can we use it in Vue2?

<template>
  <div id="app"></div>
</template>


<script lang="ts">
  import Vue from 'vue'
  import CustomNode from './components/CustomNode.vue'
  import { Graph } from '@antv/x6'
  import { register } from '@antv/x6-vue-shape'


  register({
    shape: 'custom-vue-node',
    width: 100,
    height: 100,
    component: CustomNode,
  })


  export default Vue.extend({
    name: 'App',
    mounted() {
      const graph = new Graph({
        container: document.getElementById('app'),
        width: 1000,
        height: 1000,
      })


      graph.addNode({
        shape: 'custom-vue-node',
        x: 100,
        y: 100,
      })
    },
  })
</script>

The node component is written in the same way as above.

Note

In Vue2, there are some limitations on the content of node components, such as the inability to use Vuex, i18n, element-ui, etc.