Getting Started ​

Installation ​

Install with npm

bash
npm install v-network-graph

and setup in main.ts

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")

INFO

It is also possible to load it in other components without setting it in main.ts, as shown below.

vue
<!-- YourVueComponent.vue --> <script setup lang="ts">  import { VNetworkGraph } from "v-network-graph"  import "v-network-graph/lib/style.css"  ... </script>

Installation on Nuxt 3 project ​

Add css to nuxt.config.ts

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"], })

Make the plugin to plugins/v-network-graph.ts

ts
// plugins/v-network-graph.ts import { defineNuxtPlugin } from "#app" import VNetworkGraph from "v-network-graph"  export default defineNuxtPlugin(nuxtApp => {  nuxtApp.vueApp.use(VNetworkGraph) })

Usage ​

The basic usage is shown below.

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>

For detailed usage, please check out the following: