Vue 3 component to integrate with Vis-Network views
Inspired by vue-vis-network

Features

• Vue 3 & TypeScript - Full type safety with Composition API and <script setup> syntax
• Flexible Data Binding - Support for Array, DataSet, and DataView with reactive updates
• Generic Support - Type-safe custom node/edge ID types
• Complete Event System - All Vis-network events with proper type inference
• Exposed API - Direct access to network instance and data methods

Installation

npm install vue-vis-network2

Quick Start

Basic Example

<script setup lang="ts">
import { ref } from 'vue';
import { VueVisNetwork, type Node, type Edge, type Options } from 'vue-vis-network2';

const nodes = ref<Node[]>([
  { id: 1, label: 'Node 1' },
  { id: 2, label: 'Node 2' },
  { id: 3, label: 'Node 3' },
  { id: 4, label: 'Node 4' },
  { id: 5, label: 'Node 5' },
]);

const edges = ref<Edge[]>([
  { from: 1, to: 3 },
  { from: 1, to: 2 },
  { from: 2, to: 4 },
  { from: 2, to: 5 },
]);

const options = ref<Options>({
  nodes: {
    shape: 'dot',
    size: 16,
  },
  edges: {
    smooth: false,
  },
});
</script>

<template>
  <vue-vis-network
    :nodes="nodes"
    :edges="edges"
    :options="options"
    style="height: 400px"
  />
</template>

With Events and Methods

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { VueVisNetwork, type Node, type Edge, type Options } from 'vue-vis-network2';

const nodes = ref<Node[]>([
  { id: 1, label: 'Node 1' },
  { id: 2, label: 'Node 2' },
  { id: 3, label: 'Node 3' },
]);

const edges = ref<Edge[]>([
  { from: 1, to: 2 },
  { from: 2, to: 3 },
]);

const options = ref<Options>({
  nodes: {
    shape: 'circle',
    size: 24,
    color: {
      border: '#2B7CE9',
      background: '#97C2FC',
    },
  },
});

const networkRef = ref();

// Handle click events
const handleClick = (params) => {
  console.log('Clicked node:', params.nodes);
  console.log('Clicked edge:', params.edges);
};

// Access network instance and methods
onMounted(() => {
  // Get vis-network instance
  const network = networkRef.value.network;
  console.log('Network instance:', network);
  
  // Get node data
  const node = networkRef.value.getNode(1);
  console.log('Node 1:', node);
  
  // Get edge data
  const edge = networkRef.value.getEdge(1);
  console.log('Edge 1:', edge);
});
</script>

<template>
  <vue-vis-network
    ref="networkRef"
    :nodes="nodes"
    :edges="edges"
    :options="options"
    @click="handleClick"
    @select-node="(params) => console.log('Selected:', params)"
    style="height: 400px; border: 1px solid #ccc"
  />
</template>

TypeScript Generics

Use generics to specify custom node and edge ID types:

<script setup lang="ts">
import type { NetworkClickEvent } from 'vue-vis-network2';

const handleClick = (params: NetworkClickEvent<number, number>) => {
  console.log(params.nodes); // number[]
  console.log(params.edges); // number[]
};
</script>

<template>
  <!-- @vue-generic {number, number} -->
  <vue-vis-network
    :nodes="nodes"
    :edges="edges"
    @click="handleClick"
  />
</template>

API Reference

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | nodes | Node[] | DataSet<Node> | DataView<Node> | [] | Network nodes | | edges | Edge[] | DataSet<Edge> | DataView<Edge> | [] | Network edges | | options | Options | {} | Vis-network configuration options | | events | EventKey[] | All events | Array of event names to subscribe to | | style | StyleValue | {} | Inline styles for the container | | class | any | undefined | CSS class for the container |

Exposed Methods

Access network instance and data via template ref:

const networkRef = ref();

networkRef.value.network;      // Network - Get vis-network instance
networkRef.value.getNode(id);  // Node | null - Get node by ID
networkRef.value.getEdge(id);  // Edge | null - Get edge by ID

Events

Network Events

All Vis-network events are emitted by default. Subscribe to specific events using the events prop:

<vue-vis-network 
  :nodes="nodes"
  :edges="edges"
  :options="options"
  :events="['selectNode', 'hoverNode']"
  @select-node="onNodeSelected"
  @hover-node="onNodeHovered"
/>

DataSet Events

When passing an Array, it's converted to a DataSet internally. DataSet events are emitted with prefixed names:

• Mounted events: nodes-mounted, edges-mounted - Fired when DataSet is created
• Data events: nodes-add, nodes-update, nodes-remove, edges-add, edges-update, edges-remove

Example payload for nodes-add:

{
  event: 'add',
  properties: { items: [7] },
  senderId: null,
}

Learn more about DataSet events.

Event Reference

| Event Name | Payload Type | Description | |------------|--------------|-------------| | click | NetworkClickEvent | Fired when the user clicks | | doubleClick | NetworkBaseEvent | Fired when the user double clicks | | oncontext | NetworkBaseEvent | Fired when the user right clicks (context menu) | | hold | NetworkBaseEvent | Fired when the user holds (touch or mouse) | | release | NetworkBaseEvent | Fired when the user releases | | select | NetworkBaseEvent | Fired when nodes or edges are selected | | selectNode | NetworkBaseEvent | Fired when a node is selected | | selectEdge | NetworkBaseEvent | Fired when an edge is selected | | deselectNode | NetworkDeselectEvent | Fired when a node is deselected | | deselectEdge | NetworkDeselectEvent | Fired when an edge is deselected | | dragStart | NetworkBaseEvent | Fired when dragging starts | | dragging | NetworkBaseEvent | Fired while dragging | | dragEnd | NetworkBaseEvent | Fired when dragging ends | | controlNodeDragging | NetworkControlNodeDraggingEvent | Fired while dragging a control node | | controlNodeDragEnd | NetworkControlNodeDraggingEvent | Fired when control node dragging ends | | hoverNode | NetworkNodeEvent | Fired when hovering over a node | | blurNode | NetworkNodeEvent | Fired when leaving a node | | hoverEdge | NetworkEdgeEvent | Fired when hovering over an edge | | blurEdge | NetworkEdgeEvent | Fired when leaving an edge | | zoom | NetworkZoomEvent | Fired when the view is zoomed | | showPopup | Id | Fired when a popup is shown | | hidePopup | - | Fired when a popup is hidden | | startStabilizing | - | Fired when stabilization starts | | stabilizationProgress | NetworkStabilizationProgressEvent | Fired during stabilization | | stabilizationIterationsDone | - | Fired when stabilization iterations are done | | stabilized | NetworkStabilizedEvent | Fired when stabilization is finished | | resize | NetworkResizeEvent | Fired when the network is resized | | initRedraw | - | Fired before redraw | | beforeDrawing | CanvasRenderingContext2D | Fired before drawing on canvas | | afterDrawing | CanvasRenderingContext2D | Fired after drawing on canvas | | animationFinished | - | Fired when animation is finished | | configChange | any | Fired when configuration changes | | nodes-mounted | DataSet<Node> | Fired when nodes DataSet is mounted | | nodes-add | AddEventPayload | Fired when nodes are added | | nodes-update | UpdateEventPayload | Fired when nodes are updated | | nodes-remove | RemoveEventPayload | Fired when nodes are removed | | edges-mounted | DataSet<Edge> | Fired when edges DataSet is mounted | | edges-add | AddEventPayload | Fired when edges are added | | edges-update | UpdateEventPayload | Fired when edges are updated | | edges-remove | RemoveEventPayload | Fired when edges are removed |

Resources

• Vis-Network API Documentation
• DataSet Documentation
• DataView Documentation

License

MIT