1

I have added this simple example from apexcharts.com. Pretty sure the imports are correct. I am not referencing window anywhere. My whole app just come to a halt when adding this file. I believe it has to do with the SSR or Nuxt configs.

Error message

<template>
  <div id="chart">
    <apexchart
      type="donut"
      width="380"
      :options="chartOptions"
      :series="series"
    ></apexchart>
  </div>
</template>

<script>
import VueApexCharts from "vue-apexcharts";

export default {
  name: "Donut",
  components: {
    apexchart: VueApexCharts,
  },
  data() {
    return {
      data: {
        series: [44, 55, 41, 17, 15],
        chartOptions: {
          chart: {
            type: "donut",
          },
          responsive: [
            {
              breakpoint: 480,
              options: {
                chart: {
                  width: 200,
                },
                legend: {
                  position: "bottom",
                },
              },
            },
          ],
        },
      },
    };
  },
};
</script>
kissu
  • 40,416
  • 14
  • 65
  • 133
Salsa Steve
  • 89
  • 3
  • 10
  • Does this answer your question? [How to fix navigator / window / document is undefined in Nuxt](https://stackoverflow.com/questions/67751476/how-to-fix-navigator-window-document-is-undefined-in-nuxt) – kissu Apr 14 '22 at 08:03
  • Please update your question with your latest tries, so that we see how far you achieved so far. – kissu Apr 14 '22 at 08:04

2 Answers2

3

As explained in my linked answer (last sentence, with the direct component syntax), here is how you make a proper working setup:

<template>
  <div id="chart">
    <client-only>
      <apexchart
        type="donut"
        width="380"
        :options="chartOptions"
        :series="series"
      ></apexchart>
    </client-only>
  </div>
</template>

<script>
export default {
  name: 'Donut',
  components: {
    [process.browser && 'apexchart']: () => import('vue-apexcharts'),
  },
  data() {
    return {
      series: [44, 55, 41, 17, 15],
      chartOptions: {
        chart: {
          type: 'donut',
        },
        responsive: [
          {
            breakpoint: 480,
            options: {
              chart: {
                width: 200,
              },
              legend: {
                position: 'bottom',
              },
            },
          },
        ],
      },
    }
  },
}
</script>

I've also removed a data who was nesting the whole configuration, already inside of data(). This was causing a non-match in terms of props as shown in the browser console errors.

kissu
  • 40,416
  • 14
  • 65
  • 133
2

Wrap your component in nuxt's <client-only> component. That will prevent SSR/SSG breaking when attempting to reference the nonexistent window object.

E.g.

<client-only>
  <chart-component />
</client-only>
kissu
  • 40,416
  • 14
  • 65
  • 133
Daniel Storey
  • 825
  • 4
  • 8
  • Unfortunately that didn't work. @daniel – Salsa Steve Apr 14 '22 at 05:04
  • Duplicate question. Solution here: https://stackoverflow.com/questions/59347414/why-is-my-client-only-component-in-nuxt-complaining-that-window-is-not-define – Daniel Storey Apr 14 '22 at 05:34
  • [Github answer kinda worked](https://github.com/apexcharts/vue-apexcharts/issues/34#issuecomment-622649144) still getting `ReferenceError: window is not defined` in the console but works in the browser. – Salsa Steve Apr 14 '22 at 05:36
  • You gotta do if check if(process.client) https://github.com/apexcharts/vue-apexcharts/issues/34#issuecomment-544191308 – norbekoff Apr 14 '22 at 09:51