Nuxt.js: window is not defined apexcharts/vue-apexcharts

Question

I added this simple example from apexcharts.com. Pretty sure the import is correct. I don't reference window anywhere. When adding this file my entire application stops. I believe this has something to do with SSR or Nuxt configuration.

<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>

Answer 1

Wrap your component in nuxt's <client-only> component. This will prevent SSR/SSG from breaking when trying to reference a non-existent window object.

For example

<client-only>
  <chart-component>
</chart-component></client-only>

Answer 2

As explained in my linked answer (last sentence, using direct component syntax), here's how to make a correct working setup:

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

sssccc

I also removed a data which nested the entire configuration, already inside data(). This resulted in a props mismatch, as shown in the browser console error.