Usage with Nuxt

[jeffp123]

To use with Nuxt 2.10.0, I had to do the following to avoid "document is not defined":

Make a new file in plugins called vue-plotly.js and put this in it:

import Vue from 'vue';
import vPlotly from '@statnett/vue-plotly';

const VuePlotly = {
  install(Vue) {
    Vue.component('vue-plotly', vPlotly);
  },
};
Vue.use(VuePlotly);
export default VuePlotly;

And add this line to nuxt.config.js (or update plugins)

  plugins: [{ src: '~plugins/vue-plotly', mode: 'client' }],

Then, you can use <vue-plotly/> anywhere without having to import it.

---

Prior to discovering this solution, I had wrapped my chart component in <client-only/>, and was loading that component like this:

components: {
    // See here: https://stackoverflow.com/a/50458090/107083
    graph: () => import('@/components/Graph.vue'),
  },

This also worked, but I would get a warning. The above way seems "more correct".

I'm curious if anybody wants to comment on pros/cons of either approach, but am mainly putting this here in case others are stuck with this issue.

[jeffp123]

As for reporting this as an "issue", it would be good if vue-plotly included this information in the readme or documentation. I would guess that this is a common use-case is with Nuxt and documentation that demonstrates Nuxt-compatibility would be useful.

[jeffp123]

It appears that I still need to wrap <vue-plotly/> in <client-only/> to avoid the warning "The client-side rendered virtual DOM tree is not matching server-rendered content."

I'm not 100% if that is correct, but seems to make sense.

[SumNeuron]

@chaimpeck You do not have to wrap in client-only... only if you are trying to bind data server side. If you async data on mount youll be fine. Anyway, statnett doesn't seem too keen on helping with issues :P

@chaimpeck You do not have to wrap in client-only... only if you are trying to bind data server side. If you async data on mount youll be fine. Anyway, statnett doesn't seem too keen on helping with issues :P

I'm not pulling from an external data source (yet anyway, just getting the syntax worked out). I did have to add <client only> as mentioned and plugins: [{ src: '~plugins/vue-plotly', mode: 'client' }], in order to get this to work and avoid the errors.

Since I am a neophyte and you appear to have more background I would appreciate feedback, if you have it, on whether this would be the expected behavior and if I am missing something?

[MiltonCobo]

Hello, i'm trying to use vue-plotly in a nuxt project. I followed your advice, created the vue-plotly.js file at plugins, and add to the nuxt.config.js file, but still i get the error
---Uncaught TypeError: Cannot read property 'Config' of vue-plotly.umd.js?04d1:95906 undefined---
Any new information?
Thanks

[jeffp123]

Hrm, I don't have any more info on this. The above worked for me, but I haven't gone back to it in a while. Maybe a different version?

[MiltonCobo]

Your solution really works!. I was using also MathJax.js (for latex), which was the problem, and I still don't know a solution for that. Curiously, when I use vue-plotly the data and layout could not be defined directly (in the data() function), I had to define it in a function called in mounted(). Do you know why? Thanks. El sáb., 18 de abr. de 2020 a la(s) 22:53, chaimpeck ( notifications@github.com) escribió:

…

Hrm, I don't have any more info on this. The above worked for me, but I haven't gone back to it in a while. Maybe a different version? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#26 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKU23LAEPLMVTKQJVP6LZU3RNJKRZANCNFSM4JONBGXQ> .

[jeffp123]

hrm, I don't know why that would be, sorry

[umardraz]

Hello I am trying to use this with nuxtjs and getting this error

ERROR  Failed to compile with 2 errors 
This dependency was not found:  

* fs in ./node_modules/image-size/lib/index.js, ./node_modules/image-size/lib/types/tiff.js  
* To install it, you can run: npm install --save fs  
* Waiting for file changes

Would you please help me

[jeffp123]

@umardraz It looks like you need to install fs, right?

[umardraz]

No it was not fs issue. I am susing webpack so I simply did this and it worked

config.node = {
    fs: 'empty'
}

[amoose136]

No it was not fs issue. I am susing webpack so I simply did this and it worked

config.node = {
    fs: 'empty'
}

Where did you add that snippet? I am getting the same error.