Nuxt.js: Fenster ist nicht definiert apexcharts/vue-apexcharts
P粉366946380
P粉366946380 2023-11-09 22:07:08
0
2
735

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>


P粉366946380
P粉366946380

Antworte allen(2)
P粉946437474

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

例如


  

P粉834840856

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




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

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage