Vue 2 + CLI 3 + Plotly + .json single page component

I am trying to understand how to integrate Plotly.js into a Vue 2 component but I am getting stuck on importing the .json data file and also I am not sure what the structure would be.

Plotly Playroom

I have already implemented the Plotly plot I want I just don’t know how to display it using Vue (if it would help I can post the plot’s code and the example data).

It would help if you can create a small sample on codesandbox

I am not sure how to do that but I created a public repo on GitHub, would that be ok?

Well you can import json like a js file since webpack (and with it Vue CLI) supports that.

You would have an element in the template with a ref (a marker to access it from your JS) that will serve as the element for the plot

<div ref="plotlyEl"></div>
import plotlyData from './data.json'
import Plotly from 'plotly' // or whatever the correct import is
export default {
  data: () => ({
    plotlyData,
  }),
  mounted {
    const el = this.$refs.plotlyEl
    Plotly.newPlot( el, /* ... */)
  }

I am not sure I understand how to structure my code. In which part of the cript should I import, parse and then build the plot because using this :

I get this :

You are asking about Plotly but now the code that you shared last uses OpenLayers (ol). Are those connected? I’m not familiar with OpenLayers …

Also, what are those <vl-.....> components? Are they related to Plotly or OpenLayers? Where do they come from?

Maybe do what you proposed first: share the raw js code of the Plotly that you want to build (ideally a simplied example) and we figure out how to build that in Vue.

Once that has been cleared up, we can talk about how to make that work in the context of these other things you need to add around it.

I separated them now, but the v-map components are part of the vuelayers plugin which is a wrapper of OpenLayers andused to generate maps (another thing that I would need to integrate with Vue js). As for the Plotly code here its is:
https://github.com/itsgifnotjiff/Plotly-VAQUUM-Demo
It’s simple example but well configured and I cleaned up the Vue code a little bit to make it easier as well which can be found here :
https://github.com/itsgifnotjiff/Vue-Plotly-OpenLayers-Test
As you can see I managed to make both a very simple Plotly example work and a very simple OpenLayers work but it’s not very Vue like and I am not sure how to progress to example such as the ones I have posted.

I have been able to fix this by doing the calculations in a seperate JS script and exporting the data,layout and config and binding it to the Plotly component (imported from the Vue-Plotly library https://david-desmaisons.github.io/vue-plotly/?ref=madewithvuejs.com ) now I I need to figure out how to integrate the OpenLayers 6 WMS layer with vuelayers.

I managed to figure it out but I am still stuck on the sync, play and GetFeatures functionality from my example at ( https://github.com/itsgifnotjiff/CMC-Demo ).
Would love for someone to check if I am doing things in the correct Vue way at least. Thank you people.
Here is the project again ( https://github.com/itsgifnotjiff/Vue-Plotly-OpenLayers-Test )