How we can use this with Nuxtjs

[umardraz]

Hi,

How we can use vue-plotly with NuxtJS, would you please help me

[alee]

Late reply so you probably don't need this anymore but with Nuxt 2 you can do something like this:

... your template code ...
 <client-only placeholder="Loading...">
        <Plotly
          ref="plot"
          :data="timeSeriesData"
          :layout="layoutMetadata"
          :options="options"
          @click="updatePlotlyYear"
        />
</client-only>
...

import { Component, Prop, Watch } from "nuxt-property-decorator";

@Component({
  components: {
    // load time series plotly component lazily to avoid document is not defined errors
    // https://stackoverflow.com/a/50458090
    Plotly: () => import("vue-plotly").then((p) => p.Plotly),
  },
}

full source code file here:

https://github.com/openskope/skopeui/blob/5eb4b19568a5507c0f4e960ed1bd5a369be57b53/app/components/dataset/TimeSeriesPlot.vue

[andreemic]

nuxt-property-decorator

any idea for Nuxt 3?

[vicentecastroa]

@andreemic I Hope you have already solved it. I installed plotly.js-dist and put it all together (events, camelize function, methods, main component) in a new component under my components folder. Just copy and paste and it worked.