G6 Extension Vue

English | 中文

[![NPM Package][npm]][npm-url] [![Build Size][build-size]][build-size-url] [![NPM Downloads][npm-downloads]][npmtrends-url]

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

$3

``bash
npm install g6-extension-vue


or

yarn add g6-extension-vue

or

pnpm add g6-extension-vue
`

$3

`js
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

Vue Composition API:

`ts
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:

`tsx
export default function VueNode(props) {
return


`

$3

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

Q&A

$3

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

#### ✅ Correct Examples:

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

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

#### ❌ Incorrect Examples:

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

// DON'T: Nested property direct reference
const graph = new Graph({
node: {
type: 'vue',
style: {
component: (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

`bash


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!

[npm]: https://img.shields.io/npm/v/g6-extension-vue.svg
[npm-url]: https://www.npmjs.com/package/g6-extension-vue
[build-size]: https://img.shields.io/bundlephobia/minzip/g6-extension-vue
[build-size-url]: https://bundlephobia.com/package/g6-extension-vue
[npm-downloads]: https://img.shields.io/npm/dm/g6-extension-vue.svg
[npmtrends-url]: https://npmtrends.com/g6-extension-vue