Nuxt.js: Fenster ist nicht definiert apexcharts/vue-apexcharts

Question

Ich habe dieses einfache Beispiel von apexcharts.com hinzugefügt. Ich bin mir ziemlich sicher, dass der Import korrekt ist. Ich verweise nirgendwo auf window. Beim Hinzufügen dieser Datei stoppt meine gesamte Anwendung. Ich glaube, das hängt mit der SSR- oder Nuxt-Konfiguration zusammen.

<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

将您的组件包装在 nuxt 的 <client-only> 组件中。这将防止在尝试引用不存在的 window 对象时 SSR/SSG 中断。

例如

Answer 2

正如我的链接答案中所解释的（最后一句，使用直接组件语法），以下是如何制作正确的工作设置：

我还删除了一个 data，它嵌套了整个配置，已经在 data() 内部。这导致了 props 不匹配，如浏览器控制台错误所示。