how to use this library within a regular vue js application?

[wanderernxa]

Hi, I want to incorporate this library into my regular vuejs application, the main components and vue files are not in Typescript. How to do I embed this into it? Since this library requires typescript?

thanks in advance.

[dash14]

Hi @wanderernxa,

It is not required to use TypeScript for v-network-graph, although the examples are only written in TypeScript. Basically, I think it works by writing the process as shown in the examples, using normal JavaScript notation without specifying the types of variables, etc.

For reference, here is an example of what Getting Started looks like without using TypeScript.

main.js

import { createApp } from 'vue'
import VNetworkGraph from 'v-network-graph'
import 'v-network-graph/lib/style.css'
import App from './App.vue'

createApp(App)
    .use(VNetworkGraph)
    .mount('#app')

Usage:

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

<script>
export default {
  setup() {
    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" },
    }
    return { nodes, edges }
  }
}
</script>

I hope this helps you. Best Regards,

[wanderernxa]

That worked perfectly....thank you so much for the quick response!