### Install v-network-graph and d3-force

Source: https://context7.com/dash14/v-network-graph/llms.txt

Install the v-network-graph package using npm. d3-force is an optional peer dependency required only for the ForceLayout.

```bash
npm install v-network-graph
# d3-force is an optional peer dependency needed only for ForceLayout
npm install d3-force
```

--------------------------------

### Install v-network-graph with npm

Source: https://github.com/dash14/v-network-graph/blob/main/README.md

Install the v-network-graph package using npm. This command is typically run in your project's root directory.

```sh
npm install v-network-graph
```

--------------------------------

### Setup v-network-graph in main.ts

Source: https://github.com/dash14/v-network-graph/blob/main/README.md

Integrate v-network-graph into your Vue 3 application by importing the library and its CSS, then using it with createApp. Ensure this is done before mounting your app.

```ts
// main.ts
import { createApp } from "vue"
import VNetworkGraph from "v-network-graph"
import "v-network-graph/lib/style.css"
import App from "./App.vue"

const app = createApp(App)

app.use(VNetworkGraph)
app.mount("#app")
```

--------------------------------

### Implement Custom Circle Layout Handler

Source: https://context7.com/dash14/v-network-graph/llms.txt

Create a custom layout by implementing the LayoutHandler interface. This example arranges nodes in a circle. Ensure to import necessary types from 'v-network-graph'.

```typescript
import type { LayoutHandler, LayoutActivateParameters } from "v-network-graph"

class CircleLayout implements LayoutHandler {
  activate({ nodePositions, nodes }: LayoutActivateParameters): void {
    const ids = Object.keys(nodes.value)
    const n = ids.length
    ids.forEach((id, i) => {
      const angle = (2 * Math.PI * i) / n
      nodePositions.value[id] = {
        x: Math.cos(angle) * 200,
        y: Math.sin(angle) * 200,
      }
    })
  }
  deactivate(): void {}
}

const configs = defineConfigs({
  view: { layoutHandler: new CircleLayout() },
})
```

--------------------------------

### Get Full Configuration Object

Source: https://context7.com/dash14/v-network-graph/llms.txt

Use getFullConfigs to merge a partial user config with defaults. Useful for inspecting resolved values.

```typescript
import { getFullConfigs } from "v-network-graph"

const full = getFullConfigs({
  node: { normal: { radius: 20, color: "#ff0000" } },
})

console.log(full.view.minZoomLevel)        // 0.1
console.log(full.view.maxZoomLevel)        // 64
console.log(full.edge.type)                // "straight"
console.log(full.node.label.direction)     // "south"

```

--------------------------------

### Import Core Types from v-network-graph

Source: https://context7.com/dash14/v-network-graph/llms.txt

Imports all core types for graph data, layout, layers, events, configurations, and component instances from the 'v-network-graph' library. Ensure this library is installed.

```typescript
import type {
  // Graph data
  Node,
  Nodes,
  Edge,
  Edges,
  Path,
  Paths,
  InputPaths,

  // Layout
  Position,
  FixablePosition,
  NodePositions,
  Layouts,
  UserLayouts,

  // Layers
  Layers,
  LayerPosition,
  LayerName,

  // Events
  Events,
  EventHandlers,
  NodeEvent,
  EdgeEvent,
  PathEvent,
  ViewEvent,

  // Config types
  Configs,
  UserConfigs,
  ViewConfig,
  NodeConfig,
  EdgeConfig,
  PathConfig,
  ShapeStyle,
  StrokeStyle,
  MarkerStyle,
  LabelStyle,
  NodeLabelStyle,

  // Enums
  NodeLabelDirection,
  ViewMode,

  // Component instance
  VNetworkGraphInstance,
  Instance,
  Box,
  Sizes,
  Point,

  // Layout handler
  LayoutHandler,
  LayoutActivateParameters,
} from "v-network-graph"
```

--------------------------------

### Basic v-network-graph Usage

Source: https://github.com/dash14/v-network-graph/blob/main/README.md

Implement a basic network graph by defining nodes and edges in your Vue component's script setup and rendering them using the v-network-graph component in the template. Styles can be applied via CSS.

```vue
<script setup lang="ts">
  const nodes = {
    node1: { name: "Node 1" },
    node2: { name: "Node 2" },
    node3: { name: "Node 3" },
    node4: { name: "Node 4" },
  }
  const edges = {
    edge1: { source: "node1", target: "node2" },
    edge2: { source: "node2", target: "node3" },
    edge3: { source: "node3", target: "node4" },
  }
</script>

<template>
  <v-network-graph
    class="graph"
    :nodes="nodes"
    :edges="edges"
  />
</template>

<style>
.graph {
  width: 800px;
  height: 600px;
  border: 1px solid #000;
}
</style>
```

--------------------------------

### Initialize with GridLayout

Source: https://context7.com/dash14/v-network-graph/llms.txt

Use new GridLayout({ grid: 20 }) to snap node positions to a pixel grid on drag. Extends SimpleLayout.

```typescript
import { defineConfigs, GridLayout } from "v-network-graph"

const configs = defineConfigs({
  view: {
    layoutHandler: new GridLayout({ grid: 20 }),  // snap to 20px grid
  },
})

```

--------------------------------

### ForceLayout Configuration

Source: https://context7.com/dash14/v-network-graph/llms.txt

Demonstrates how to import and configure the ForceLayout for physics-based node positioning. It requires the 'd3-force' peer dependency.

```APIDOC
## ForceLayout Configuration

Physics-based force-directed layout using `d3-force`. Requires the optional peer dependency `d3-force`. Nodes settle into stable positions automatically.

```ts
// Import from the separate sub-path to keep d3-force out of the main bundle
import { ForceLayout } from "v-network-graph/lib/force-layout"
import { defineConfigs } from "v-network-graph"

const configs = defineConfigs({
  view: {
    layoutHandler: new ForceLayout({
      positionFixedByDrag: false,          // unpin nodes after drag
      positionFixedByClickWithAltKey: true, // Alt+click to pin/unpin
      noAutoRestartSimulation: false,       // restart on graph changes
      createSimulation: (d3, nodes, edges) => {
        // Custom d3-force simulation
        const forceLink = d3.forceLink(edges).id((d: any) => d.id).distance(120)
        return d3
          .forceSimulation(nodes)
          .force("edge",   forceLink)
          .force("charge", d3.forceManyBody().strength(-400))
          .force("center", d3.forceCenter())
          .alphaMin(0.001)
      },
    }),
  },
})
```
```

--------------------------------

### Initialize with SimpleLayout

Source: https://context7.com/dash14/v-network-graph/llms.txt

Set the layoutHandler in configs.view to new SimpleLayout() for the default layout. Places nodes at the center and avoids collisions.

```typescript
import { defineConfigs, SimpleLayout } from "v-network-graph"

const configs = defineConfigs({
  view: {
    layoutHandler: new SimpleLayout(),
  },
})

```

--------------------------------

### Custom LayoutHandler Implementation

Source: https://context7.com/dash14/v-network-graph/llms.txt

Shows how to implement the `LayoutHandler` interface to create a custom layout algorithm, such as a circular layout.

```APIDOC
## Custom `LayoutHandler`

Implement the `LayoutHandler` interface to build fully custom layout logic.

```ts
import type { LayoutHandler, LayoutActivateParameters } from "v-network-graph"

class CircleLayout implements LayoutHandler {
  activate({ nodePositions, nodes }: LayoutActivateParameters): void {
    const ids = Object.keys(nodes.value)
    const n = ids.length
    ids.forEach((id, i) => {
      const angle = (2 * Math.PI * i) / n
      nodePositions.value[id] = {
        x: Math.cos(angle) * 200,
        y: Math.sin(angle) * 200,
      }
    })
  }
  deactivate(): void {}
}

const configs = defineConfigs({
  view: { layoutHandler: new CircleLayout() },
})
```
```

--------------------------------

### Basic v-network-graph Component Usage

Source: https://context7.com/dash14/v-network-graph/llms.txt

Demonstrates the basic usage of the `<v-network-graph>` component with nodes, edges, layouts, configurations, and event handlers. Supports v-model bindings for selected nodes and zoom level.

```vue
<script setup lang="ts">
import { ref, reactive } from "vue"
import { VNetworkGraph, defineConfigs } from "v-network-graph"
import type { Nodes, Edges, Layouts, EventHandlers } from "v-network-graph"
import "v-network-graph/lib/style.css"

const nodes: Nodes = {
  node1: { name: "Alice" },
  node2: { name: "Bob" },
  node3: { name: "Carol" },
}

const edges: Edges = {
  edge1: { source: "node1", target: "node2" },
  edge2: { source: "node2", target: "node3" },
  edge3: { source: "node3", target: "node1" },
}

const layouts = reactive<Layouts>({
  nodes: {
    node1: { x: 0,   y: 0 },
    node2: { x: 200, y: 0 },
    node3: { x: 100, y: 150 },
  },
})

const selectedNodes = ref<string[]>([])
const zoomLevel    = ref(1)

const eventHandlers: EventHandlers = {
  "node:click": ({ node, event }) => {
    console.log("clicked node:", node, event)
  },
  "view:zoom": z => console.log("zoom:", z),
}

const configs = defineConfigs({
  node: {
    normal:   { radius: 20, color: "#4488ff" },
    hover:    { radius: 22, color: "#2266dd" },
    selected: { radius: 22, color: "#ff8800" },
    label:    { visible: true, fontSize: 12, direction: "south" },
  },
  edge: {
    normal:   { width: 2, color: "#aaaacc" },
    selected: { width: 3, color: "#ff8800" },
  },
})
</script>

<template>
  <v-network-graph
    style="width: 800px; height: 600px; border: 1px solid #ccc"
    :nodes="nodes"
    :edges="edges"
    :layouts="layouts"
    :configs="configs"
    :event-handlers="eventHandlers"
    v-model:selected-nodes="selectedNodes"
    v-model:zoom-level="zoomLevel"
  />
</template>
```

--------------------------------

### Define Node and Edge Configurations

Source: https://context7.com/dash14/v-network-graph/llms.txt

Use defineConfigs to create typed partial configurations for nodes and edges. Supports literal values or functions for dynamic styling based on node/edge properties.

```typescript
import { defineConfigs } from "v-network-graph"
import type { Node, Edge } from "v-network-graph"

interface MyNode extends Node {
  type: "server" | "client" | "gateway"
  active: boolean
}

interface MyEdge extends Edge {
  latency: number
}

const configs = defineConfigs<MyNode, MyEdge>({
  view: {
    scalingObjects: true,
    zoomEnabled: true,
    minZoomLevel: 0.2,
    maxZoomLevel: 16,
    autoPanAndZoomOnLoad: "fit-content",
    fitContentMargin: "10%",
    grid: {
      visible: true,
      interval: 20,
      thickIncrements: 5,
      line:  { color: "#e8e8e8", width: 1, dasharray: 1 },
      thick: { color: "#cccccc", width: 1 },
    },
  },
  node: {
    normal: {
      type: "circle",
      radius: node => node.type === "gateway" ? 24 : 16,
      color: node => {
        if (!node.active) return "#aaaaaa"
        return node.type === "server" ? "#4466cc"
             : node.type === "gateway" ? "#cc4444"
             : "#44aa66"
      },
      strokeWidth: 2,
      strokeColor: node => node.active ? "#ffffff" : "#888888",
    },
    draggable: true,
    selectable: true,
    label: {
      visible: true,
      fontSize: 11,
      direction: "south",
      directionAutoAdjustment: true,
      text: node => node.name ?? "",
    },
    focusring: { visible: true, width: 4, padding: 3, color: "#ffcc00" },
    zOrder: { enabled: true, bringToFrontOnHover: true, bringToFrontOnSelected: true, zIndex: 0 },
  },
  edge: {
    normal: {
      width: edge => Math.max(1, 5 - edge.latency / 20),
      color: edge => edge.latency > 100 ? "#ff4444" : "#4466cc",
      dasharray: 0,
      linecap: "round",
    },
    type: "curve",
    gap: 6,
    marker: {
      target: { type: "arrow", width: 4, height: 4, margin: -1, offset: 0, units: "strokeWidth", color: null },
      source: { type: "none", width: 4, height: 4, margin: -1, offset: 0, units: "strokeWidth", color: null },
    },
    selectable: true,
    label: { fontSize: 10, color: "#555", margin: 4, padding: 4 },
  },
  path: {
    visible: true,
    clickable: true,
    hoverable: true,
    end: "edgeOfNode",
    normal: { width: 8, color: "#2962ff88", linecap: "round", linejoin: "round", animate: false, animationSpeed: 50 },
    hover:  { width: 10, color: "#2962ffaa", linecap: "round", linejoin: "round", animate: false, animationSpeed: 50 },
    selectable: true,
  },
})

```

--------------------------------

### Configure Force-Directed Layout with d3-force

Source: https://context7.com/dash14/v-network-graph/llms.txt

Use the ForceLayout for physics-based node positioning. Import from the separate sub-path to keep d3-force out of the main bundle. Customize the d3-force simulation by providing a createSimulation function.

```typescript
// Import from the separate sub-path to keep d3-force out of the main bundle
import { ForceLayout } from "v-network-graph/lib/force-layout"
import { defineConfigs } from "v-network-graph"

const configs = defineConfigs({
  view: {
    layoutHandler: new ForceLayout({
      positionFixedByDrag: false,          // unpin nodes after drag
      positionFixedByClickWithAltKey: true, // Alt+click to pin/unpin
      noAutoRestartSimulation: false,       // restart on graph changes
      createSimulation: (d3, nodes, edges) => {
        // Custom d3-force simulation
        const forceLink = d3.forceLink(edges).id((d: any) => d.id).distance(120)
        return d3
          .forceSimulation(nodes)
          .force("edge",   forceLink)
          .force("charge", d3.forceManyBody().strength(-400))
          .force("center", d3.forceCenter())
          .alphaMin(0.001)
      },
    }),
  },
})
```

--------------------------------

### Create Self-Referential Configurations

Source: https://context7.com/dash14/v-network-graph/llms.txt

Use withSelf to create configuration objects where later fields can reference earlier fields. Avoids repetition for hover/selected states derived from normal state.

```typescript
import { withSelf, defineConfigs } from "v-network-graph"

const configs = defineConfigs({
  node: withSelf(self => ({
    normal:   { type: "circle", radius: 16, color: "#4466cc", strokeWidth: 0, strokeColor: "#000" },
    hover:    {
      radius: node => (self.normal.radius as number) + 4,
      color: "#2244aa",
    },
    selected: {
      radius: node => (self.normal.radius as number) + 4,
      color: "#ff8800",
      strokeWidth: 2,
      strokeColor: "#cc6600",
    },
    draggable: true,
    selectable: true,
  })),
})

```

--------------------------------

### Component Instance Methods

Source: https://context7.com/dash14/v-network-graph/llms.txt

Details the methods available on the VNetworkGraph component instance, accessed via a template ref, for controlling view, zoom, pan, and exporting SVG.

```APIDOC
## Component Instance Methods

Obtained via a template ref on `<v-network-graph>`. All methods are exposed through `defineExpose`.

```vue
<script setup lang="ts">
import { ref } from "vue"
import { VNetworkGraph } from "v-network-graph"
import type { VNetworkGraphInstance } from "v-network-graph"

const graph = ref<VNetworkGraphInstance>()

async function handleExport() {
  if (!graph.value) return

  // Fit all content into view with optional margin override
  await graph.value.fitToContents({ margin: "5%" })

  // Pan to center without changing zoom
  await graph.value.panToCenter()

  // Programmatic zoom
  graph.value.zoomIn()
  graph.value.zoomOut()

  // Absolute pan to SVG coordinate
  graph.value.panTo({ x: 100, y: 200 })

  // Relative pan
  graph.value.panBy({ x: 50, y: 0 })

  // Get current pan vector
  const pan = graph.value.getPan()   // { x: number, y: number }

  // Get SVG dimensions and viewBox
  const sizes = graph.value.getSizes()
  // { width, height, viewBox: { x, y, width, height } }

  // Get/set the visible viewport box
  const box = graph.value.getViewBox()
  // { top, bottom, left, right }
  graph.value.setViewBox({ top: -100, bottom: 500, left: -100, right: 700 })

  // Coordinate translation
  const svgPoint = graph.value.translateFromDomToSvgCoordinates({ x: 400, y: 300 })
  const domPoint = graph.value.translateFromSvgToDomCoordinates({ x: 0, y: 0 })

  // Export SVG as string
  const svgText = await graph.value.exportAsSvgText()

  // Export SVG as Element (for further manipulation or download)
  const svgEl = await graph.value.exportAsSvgElement({ /* ExportOptions */ })

  // Animate positions with CSS transition for a duration
  await graph.value.transitionWhile(async () => {
    // mutate layouts here; positions will animate
    layouts.nodes.node1 = { x: 300, y: 300 }
  })

  // Box selection API
  graph.value.startBoxSelection()
  // ... user drags ...
  graph.value.stopBoxSelection()
}
</script>

<template>
  <v-network-graph ref="graph" :nodes="nodes" :edges="edges" :layouts="layouts" />
  <button @click="handleExport">Fit & Export</button>
</template>
```
```

--------------------------------

### Defining and Configuring Paths

Source: https://context7.com/dash14/v-network-graph/llms.txt

Paths are defined by referencing edge IDs in sequence. Use `defineConfigs` to customize path appearance for normal, hover, and selected states.

```vue
<script setup lang="ts">
import { ref } from "vue"
import { defineConfigs } from "v-network-graph"
import type { Nodes, Edges, Layouts, InputPaths } from "v-network-graph"

const nodes: Nodes = {
  n1: { name: "A" }, n2: { name: "B" }, n3: { name: "C" }, n4: { name: "D" },
}
const edges: Edges = {
  e1: { source: "n1", target: "n2" },
  e2: { source: "n2", target: "n3" },
  e3: { source: "n3", target: "n4" },
  e4: { source: "n1", target: "n4" },
}
const layouts: Layouts = {
  nodes: { n1: {x:0,y:0}, n2:{x:200,y:0}, n3:{x:200,y:200}, n4:{x:0,y:200} }
}

// Paths reference edge IDs in traversal order
const paths: InputPaths = {
  path1: { edges: ["e1", "e2", "e3"] },  // A → B → C → D
  path2: { edges: ["e4"] },              // A → D (shortcut)
}

const selectedPaths = ref<string[]>([])

const configs = defineConfigs({
  path: {
    visible: true,
    clickable: true,
    hoverable: true,
    end: "edgeOfNode",
    curveInNode: false,
    normal:   { width: 8, color: "#2962ff66", linecap: "round", linejoin: "round", animate: false, animationSpeed: 50 },
    hover:    { width: 10, color: "#2962ffaa", linecap: "round", linejoin: "round", animate: false, animationSpeed: 50 },
    selected: { width: 10, color: "#ff6d00aa", dasharray: "6 12", linecap: "round", linejoin: "round", animate: false, animationSpeed: 50 },
    selectable: true,
  },
})
</script>

<template>
  <v-network-graph
    :nodes="nodes" :edges="edges" :layouts="layouts" :paths="paths"
    :configs="configs" v-model:selected-paths="selectedPaths"
    style="width:600px;height:400px"
  />
  <p>Selected paths: {{ selectedPaths }}</p>
</template>
```

--------------------------------

### Control Graph Viewport and Export SVG

Source: https://context7.com/dash14/v-network-graph/llms.txt

Utilize component instance methods to manipulate the graph's view and export its content. Obtain the instance via a template ref. Methods include fitting to content, panning, zooming, and translating coordinates.

```vue
<script setup lang="ts">
import { ref } from "vue"
import { VNetworkGraph } from "v-network-graph"
import type { VNetworkGraphInstance } from "v-network-graph"

const graph = ref<VNetworkGraphInstance>()

async function handleExport() {
  if (!graph.value) return

  // Fit all content into view with optional margin override
  await graph.value.fitToContents({ margin: "5%" })

  // Pan to center without changing zoom
  await graph.value.panToCenter()

  // Programmatic zoom
  graph.value.zoomIn()
  graph.value.zoomOut()

  // Absolute pan to SVG coordinate
  graph.value.panTo({ x: 100, y: 200 })

  // Relative pan
  graph.value.panBy({ x: 50, y: 0 })

  // Get current pan vector
  const pan = graph.value.getPan()   // { x: number, y: number }

  // Get SVG dimensions and viewBox
  const sizes = graph.value.getSizes()
  // { width, height, viewBox: { x, y, width, height } }

  // Get/set the visible viewport box
  const box = graph.value.getViewBox()
  // { top, bottom, left, right }
  graph.value.setViewBox({ top: -100, bottom: 500, left: -100, right: 700 })

  // Coordinate translation
  const svgPoint = graph.value.translateFromDomToSvgCoordinates({ x: 400, y: 300 })
  const domPoint = graph.value.translateFromSvgToDomCoordinates({ x: 0, y: 0 })

  // Export SVG as string
  const svgText = await graph.value.exportAsSvgText()

  // Export SVG as Element (for further manipulation or download)
  const svgEl = await graph.value.exportAsSvgElement({ /* ExportOptions */ })

  // Animate positions with CSS transition for a duration
  await graph.value.transitionWhile(async () => {
    // mutate layouts here; positions will animate
    layouts.nodes.node1 = { x: 300, y: 300 }
  })

  // Box selection API
  graph.value.startBoxSelection()
  // ... user drags ...
  graph.value.stopBoxSelection()
}
</script>

<template>
  <v-network-graph ref="graph" :nodes="nodes" :edges="edges" :layouts="layouts" />
  <button @click="handleExport">Fit & Export</button>
</template>
```

--------------------------------

### Per-component Registration of v-network-graph

Source: https://context7.com/dash14/v-network-graph/llms.txt

Register the v-network-graph component on a per-component basis for tree-shaking benefits. Remember to import the component and its CSS.

```typescript
// Per-component registration (tree-shakeable)
import { VNetworkGraph } from "v-network-graph"
import "v-network-graph/lib/style.css"
```

--------------------------------

### Handling Graph Events with eventHandlers

Source: https://context7.com/dash14/v-network-graph/llms.txt

Use the `eventHandlers` prop to map event names to callback functions. All events are typed, and a catch-all handler `*` can capture any event.

```vue
<script setup lang="ts">
import type { EventHandlers, NodeEvent, EdgeEvent, PathEvent } from "v-network-graph"

const eventHandlers: EventHandlers = {
  // View lifecycle
  "view:load":   ()       => console.log("graph loaded"),
  "view:unload": ()       => console.log("graph unloaded"),
  "view:zoom":   z        => console.log("zoom level:", z),
  "view:pan":    ({ x, y }) => console.log("pan:", x, y),
  "view:fit":    ()       => console.log("fit-to-contents triggered"),
  "view:resize": ({ width, height }) => console.log("resized:", width, height),
  "view:click":  ({ event }) => console.log("canvas click", event.clientX),

  // Node events
  "node:click":       ({ node, event })        => console.log("node clicked:", node),
  "node:dblclick":    ({ node, event })        => console.log("node dblclicked:", node),
  "node:pointerover": ({ node })               => console.log("hover in:", node),
  "node:pointerout":  ({ node })               => console.log("hover out:", node),
  "node:contextmenu": ({ node, event })        => { event.preventDefault(); showMenu(node) },
  "node:dragstart":   positions               => console.log("drag start", positions),
  "node:pointermove": positions               => console.log("dragging", positions),
  "node:dragend":     positions               => console.log("drag end", positions),
  "node:select":      ids                     => console.log("selected nodes:", ids),

  // Edge events
  "edge:click":  ev => {
    if (ev.summarized) {
      console.log("summarized edges clicked:", ev.edges)
    } else {
      console.log("single edge clicked:", ev.edge)
    }
  },
  "edge:select": ids => console.log("selected edges:", ids),

  // Path events
  "path:click":  ({ path }) => console.log("path clicked:", path),
  "path:select": ids        => console.log("selected paths:", ids),

  // Catch-all handler
  "*": (type, event) => console.log("event:", type, event),
}

function showMenu(nodeId: string) { /* ... */ }
</script>

<template>
  <v-network-graph :nodes="nodes" :edges="edges" :event-handlers="eventHandlers" />
</template>
```

--------------------------------

### Import ForceLayout Types

Source: https://context7.com/dash14/v-network-graph/llms.txt

Imports specific types for the ForceLayout, such as parameters and data structures for nodes and edges. This import is separate from the core types.

```typescript
// ForceLayout types (separate import)
import type { ForceLayoutParameters, ForceNodeDatum, ForceEdgeDatum } from "v-network-graph/lib/force-layout"
```

--------------------------------

### Global Registration of v-network-graph

Source: https://context7.com/dash14/v-network-graph/llms.txt

Register the v-network-graph component globally in your Vue application's main entry file. Ensure to import the necessary CSS.

```typescript
// main.ts – global registration
import { createApp } from "vue"
import VNetworkGraph from "v-network-graph"
import "v-network-graph/lib/style.css"
import App from "./App.vue"

const app = createApp(App)
app.use(VNetworkGraph)   // registers <v-network-graph> globally
app.mount("#app")
```

--------------------------------

### Nuxt 3 CSS Configuration

Source: https://github.com/dash14/v-network-graph/blob/main/README.md

Add the v-network-graph CSS to your Nuxt 3 project by including it in the `css` array within `nuxt.config.ts`. This ensures the component's styles are loaded.

```ts
// nuxt.config.ts
import { defineNuxtConfig } from "nuxt3"

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
  css: ["v-network-graph/lib/style.css"],
})
```

--------------------------------

### Define Custom Layers in V-Network-Graph

Source: https://context7.com/dash14/v-network-graph/llms.txt

Map custom slot names to layer positions to control rendering order. Use 'nodes' for layers on top of nodes and 'background' for layers in the background.

```vue
<script setup lang="ts">
import { defineConfigs } from "v-network-graph"
import type { Layers, Nodes, Edges, Layouts } from "v-network-graph"

const nodes: Nodes = { n1: { name: "Hub" }, n2: { name: "Leaf" } }
const edges: Edges = { e1: { source: "n1", target: "n2" } }
const layouts: Layouts = { nodes: { n1: { x: 0, y: 0 }, n2: { x: 200, y: 100 } } }

// Map slot names to layer positions
const layers: Layers = {
  "my-badge-layer": "nodes",       // rendered on top of nodes layer
  "my-bg-layer":    "background",  // rendered in background viewport
}
</script>

<template>
  <v-network-graph :nodes="nodes" :edges="edges" :layouts="layouts" :layers="layers"
    style="width:600px;height:400px">
    <!-- Custom badge overlay (scale prop provided) -->
    <template #my-badge-layer="{ scale }">
      <circle cx="0" cy="0" r="6" fill="red" />
      <text x="0" y="4" text-anchor="middle" font-size="8" fill="white">!</text>
    </template>

    <!-- Custom background pattern -->
    <template #my-bg-layer>
      <rect x="-5000" y="-5000" width="10000" height="10000" fill="#f8f8ff" />
    </template>
  </v-network-graph>
</template>
```

--------------------------------

### Nuxt 3 Plugin for v-network-graph

Source: https://github.com/dash14/v-network-graph/blob/main/README.md

Create a Nuxt 3 plugin to register v-network-graph with your Vue application. This allows the component to be used throughout your Nuxt project.

```ts
// plugins/v-network-graph.ts
import { defineNuxtPlugin } from "#app"
import VNetworkGraph from "v-network-graph"

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(VNetworkGraph)
})
```

--------------------------------

### Access V-Network-Graph Internal States with useStates

Source: https://context7.com/dash14/v-network-graph/llms.txt

The `useStates` composable provides read-only access to the graph's internal rendering states, such as node positions and edge geometries. It must be called within a component rendered as a slot child of VNetworkGraph.

```typescript
<script setup lang="ts">
// Must be called inside a component rendered as a slot child of VNetworkGraph
import { useStates } from "v-network-graph"

const states = useStates()

// Access current node layout positions
console.log(states.layouts.nodes)

// Iterate z-ordered node states
for (const nodeState of states.nodeZOrderedList.value) {
  console.log(nodeState.id, nodeState.shape, nodeState.selected, nodeState.hovered)
}

// Access edge computed geometry
for (const [edgeId, edgeState] of Object.entries(states.edgeStates)) {
  console.log(edgeId, edgeState.position, edgeState.line.value)
}
</script>
```

--------------------------------

### Render Custom Edge Labels in V-Network-Graph

Source: https://context7.com/dash14/v-network-graph/llms.txt

Add custom labels to edges using the `edge-label` slot. This slot provides edge-specific data and props for positioning and styling the label component.

```vue
<template>
  <v-network-graph :nodes="nodes" :edges="edges" :layouts="layouts" style="width:600px;height:400px">
    <template #edge-label="{ edgeId, edge, ...labelProps }">
      <v-edge-label :text="edge.label" align="center" vertical-align="above" v-bind="labelProps" />
    </template>
  </v-network-graph>
</template>
```

--------------------------------

### Customize Node Labels in V-Network-Graph

Source: https://context7.com/dash14/v-network-graph/llms.txt

Modify the default node label by using the `override-node-label` slot. This allows for custom formatting and display of node information, including dynamic properties.

```vue
<template>
  <v-network-graph :nodes="nodes" :edges="edges" :layouts="layouts" style="width:600px;height:400px">
    <template #override-node-label="{ nodeId, x, y, scale, config, node }">
      <text :x="x" :y="y" :font-size="12 * scale" fill="#333" text-anchor="middle">
        {{ node.name }} ({{ node.type }})
      </text>
    </template>
  </v-network-graph>
</template>
```

--------------------------------

### Override Default Node Rendering in V-Network-Graph

Source: https://context7.com/dash14/v-network-graph/llms.txt

Replace the default node shape with a custom SVG element by using the `override-node` slot. This slot provides access to node data and rendering properties.

```vue
<template>
  <v-network-graph :nodes="nodes" :edges="edges" :layouts="layouts" style="width:600px;height:400px">
    <template #override-node="{ nodeId, scale, config, node }">
      <!-- Render a custom SVG shape instead of the default circle/rect -->
      <image
        :href="node.avatarUrl"
        :x="-20 * scale" :y="-20 * scale"
        :width="40 * scale" :height="40 * scale"
      />
    </template>
  </v-network-graph>
</template>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.