G6 Extension Vue

English | 中文

This extension allows you to define G6 nodes using Vue components. It's inspired by @antv/g6-extension-react.

Features

• 🎯 Vue Node Support: Use Vue components as G6 nodes
• 🔧 Vue 2/3 Compatible: Support both Vue 2 and Vue 3
• 📦 TypeScript Support: Full type definitions

Usage

1. Install

npm install g6-extension-vue
# or
yarn add g6-extension-vue
# or
pnpm add g6-extension-vue

2. Import and Register

import { onMounted, defineComponent } from 'vue';
import { VueNode } from 'g6-extension-vue';
import { ExtensionCategory, register } from '@antv/g6';

register(ExtensionCategory.NODE, 'vue', VueNode); // or in onMounted

3. Define Node

Vue Composition API:

import { defineComponent, h } from 'vue';
export default defineComponent({
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props) {
    return () => {
      return h(
        'div',
        {
          class: 'vue-node',
        },
        props.data.label,
      );
    };
  },
});

Vue Functional component:

export default function VueNode(props) {
  return <div class="vue-node">
    {props.data.label}
  </div>

4. Use Node

const graph = new Graph({
  // ... other options
  node: {
    type: 'vue',
    style: {
      component: (data) => <VueNode data={Object.assign({}, data)} />, // new object to trigger effect
    },
  },
});

Q&A

1. Why the watch props is not working? (vue3)

VueNode will refresh when g6 node property changes.(hover、click、drag、etc.) And make sure that the node data is reactive.

✅ Correct Examples:

// Method 1: Create new object with spread operator
const graph = new Graph({
  node: {
    type: 'vue',
    style: {
      component: (data) => <VueNode data={{ ...data }} />, // Creates new object
    },
  },
});

// Method 2: Use Object.assign to create new object
const graph = new Graph({
  node: {
    type: 'vue',
    style: {
      component: (data) => <VueNode data={Object.assign({}, data)} />, // Creates new object
    },
  },
});

❌ Incorrect Examples:

// DON'T: Direct reference - won't trigger reactivity
const graph = new Graph({
  node: {
    type: 'vue',
    style: {
      component: (data) => <VueNode data={data} />, // Direct reference
    },
  },
});

// DON'T: Nested property direct reference
const graph = new Graph({
  node: {
    type: 'vue',
    style: {
      component: (data) => <VueNode data={data.data} />, // Direct nested reference
    },
  },
});

Important Note: Non-reactive objects need new object references to trigger side effects. When you pass the same object reference, Vue won't know the data has changed and won't re-render the component.

Development

# Install dependencies
npm install

# Development mode
npm run dev

# Build
npm run build

# Test
npm run test

# Lint
npm run lint

Compatibility

• Vue 2.6+
• Vue 3.0+
• G6 5.0+

License

MIT License @Child-qjj

Contributing

Welcome to submit Issues and Pull Requests!