SSR issue with the ChartPie

[amjadkhan896]

Hi,
I am using vue-d2b for my project to show the PieChart. I my plugin folder i am loading the code is

import Vue from 'vue'

//import { ChartPie } from 'vue-d2b'

  var Vued2b = require('vue-d2b');

 Vue.use(Vued2b);

I already registered my plugin also in nuxt.config.js like

  {src:'~/plugins/vue-d2b', ssr: false },

But i am still facing the issue of " Unknown custom element: - did you register the component correctly" in the console.
Any suggestion for this.
Thanks

[kevinwarne]

Hey,

There is no need to do Vue.use(Vued2b). Vue d2b is not strictly a vue plugin it is a collection of vue components.

So you can import the components like:

  import { ChartPie } from 'vue-d2b'

And then register them in the vue instance like:

  export default {
    components: {
      ChartAxis
    }
  }

You can refer here for more specifics on rendering the vue d2b pie chart: http://docs.d2bjs.org/vue-d2b/#/pie

[kevinwarne]

One more not on this you can also register the component globally by doing:

  import { ChartPie } from 'vue-d2b'
  Vue.component('chart-axis', ChartAxis)

[amjadkhan896]

Thanks @kevinwarne,
The first solution you provide failed. The second solution worked for me, But in the production environment.

In the dev environment, I am facing the below error as I attached.
Is there a way to resolve the below error. Thanks once again for your response

[kevinwarne]

Hmm, I haven't used vue-d2b with a SSR implementation yet. But I think I'm beginning to see the problem.

With nuxt you can escape from ssr rendering with the no-ssr tag:

<no-ssr>
  <chart-pie></chart-pie>
</no-ssr>

One more post related to your specific error is here vuejs-templates/webpack#215. Since vue-d2b does have some javascript included templates I've gone ahead moved it all to .vue files which should remove that error you were receiving. Update to the latest vue-d2b version 1.0.15.

Cheers

[amjadkhan896]

Thanks, @kevinwarne. I updated my code And it works perfectly.

[kevinwarne]

Good to hear! I'll close this now.

[ikluhsman]

I know this is closed and not related to vue-d2b, but to make it easy for future viewers as this was a Nuxt issue, if you're using nuxt >v2.9.0 use client-only instead of no-ssr. https://nuxtjs.org/api/components-client-only/