vue-plotly
vue-plotly copied to clipboard
Usage with Nuxt
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.
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.
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.
@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?
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
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?
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 ( [email protected]) 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 https://github.com/statnett/vue-plotly/issues/26#issuecomment-616005018, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKU23LAEPLMVTKQJVP6LZU3RNJKRZANCNFSM4JONBGXQ .
hrm, I don't know why that would be, sorry
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
@umardraz It looks like you need to install fs
, right?
No it was not fs issue. I am susing webpack so I simply did this and it worked
config.node = {
fs: 'empty'
}
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.