Nuxt.js：視窗未定義 apexcharts/vue-apexcharts

Question

我從 apexcharts.com 新增了這個簡單的範例。很確定導入是正確的。我沒有在任何地方引用視窗。添加此文件時，我的整個應用程式就停止了。我相信這與 SSR 或 Nuxt 配置有關。

<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

正如我的連結答案中所解釋的（最後一句，使用直接元件語法），以下是如何製作正確的工作設定：

sssccc

我還刪除了一個 data，它嵌套了整個配置，已經在 data() 內部。這導致了 props 不匹配，如瀏覽器控制台錯誤所示。