vue-force-graph

vue-force-graph

Vue components for 2D, 3D, VR and AR force‑directed graphs.

Available as four standalone packages:

• vue-force-graph-2d
• vue-force-graph-3d
• vue-force-graph-vr
• vue-force-graph-ar

Strongly recommended: install only the renderer you actually need to keep your bundle small.
A vue-force-graph meta‑package is also available if you require every mode, but its use is discouraged.

✨ Examples

• vue-force-graph-demos(Source Codes)
• vue-force-graph-2d-demos(Source Codes)
• vue-force-graph-3d-demos(Source Codes)
• vue-force-graph-vr-demos(Source Codes)

To load any of vue-force-graph-ar examples below:

1. Open this hiro marker image in your desktop browser.
2. Open the example on your phone browser, and point it at your desktop screen.

• Basic(Source Code)
• Large Graph(Source Code)
• Async Load(Source Code)
• Auto Colored(Source Code)
• Collistion Detection(Source Code)
• Curved Links(Source Code)
• Custom Node Geometry(Source Code)
• Directional Links Arrows(Source Code)
• Directional Links Particles(Source Code)
• Dynamic Nodes(Source Code)
• Emit Particles(Source Code)
• Img Nodes(Source Code)
• Text Links(Source Code)
• Text Nodes(Source Code)

📦 Installation

Per renderer (recommended)

npm install vue-force-graph-2d
# or
npm install vue-force-graph-3d
# or
npm install aframe
npm install vue-force-graph-vr
# or
npm install @ar-js-org/ar.js
npm install vue-force-graph-ar

Meta‑package (all renderers – not recommended)

npm install aframe
npm install vue-force-graph

🚀 Usage

<template>
  <ForceGraph2D :graph-data="graphData" />
  <ForceGraph3D :graph-data="graphData" />
  <ForceGraphVR :graph-data="graphData" />
  {/* <ForceGraphAR :graph-data="graphData" /> */}
</template>

<script setup>
import "aframe"
import {ForceGraph2D,ForceGraph3D,ForceGraphVR} from 'vue-force-graph'

const graphData = {
  nodes: [ /* ... */ ],
  links: [ /* ... */ ]
}

📚 Documentation

Each package has its own API reference covering the full Force Graph API and extended properties:

• vue-force-graph-2d
• vue-force-graph-3d
• vue-force-graph-vr
• vue-force-graph-ar