How to use it on vue.js？

[shanty1]

The tutorial examples include js-based and react-based. I sincerely ask for a tutorial on how to use 3d-force-graph on vue.

[vasturiano]

@shanty1 sorry I don't have enough knowledge of vue.js to best advise how to do that integration. Possibly this is a question better asked in a vue forum since this component follows a generic format of web components.

[SvenC56]

@shanty1 were you able to use this plugin in vue.js?

[matthewmcneely]

@SvenC56 Here's an example of the Basic example in the most simplest VueJS example: https://codepen.io/matthewmcneely/pen/QWGQVYK

[SvenC56]

Hey @matthewmcneely,

thank you for the provided example! I am trying to integrate this plugin into Nuxt.js. However on SSR Page Load I get this error:

[Vue warn]: Failed to resolve async component: () => __webpack_require__.e(/*! import() | components/logo */ "components/logo").then(__webpack_require__.bind(null, /*! ../../components/Logo.vue */ "./components/Logo.vue")).then(c => c.default || c) 15:13:24
Reason: SyntaxError: Cannot use import statement outside a module

I already put the component into a <client-only> element. But it seems that this error is related to the es6 module provided by 3d-force-graph.

Did you tried to integrate this application into Nuxt?

Edit:

I already tried to add 3d-force-graph to the transpile section. But nothing changed. However I do only get this error if I open the page with the component directly. If I change from another page to the page containing the component no error is thrown.

[matthewmcneely]

@SvenC56 No, I was just experimenting with Vue and this project to see how they reacted together. Although from the error message you provided, it doesn't seem as though the issue is with 3d-force-graph, but your logo component. Just a hunch.

[tobegit3hub]

Here is the vue component that you can use. Refer to https://github.com/zjfcool/vue-force-graph .