Nuxt.js: tetingkap tidak ditakrifkan apexcharts/vue-apexcharts

Question

Saya menambah contoh mudah ini daripada apexcharts.com. Agak pasti import itu betul. Saya tidak merujuk tetingkap di mana-mana. Apabila menambah fail ini seluruh aplikasi saya berhenti. Saya percaya ini ada kaitan dengan konfigurasi SSR atau 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

SSR/SSG pecah apabila membungkus komponen anda dalam objek nuxt <client-only> 组件中。这将防止在尝试引用不存在的 window.

Sebagai contoh

Answer 2

Seperti yang dijelaskan dalam jawapan terpaut saya (ayat terakhir, menggunakan sintaks komponen langsung), berikut ialah cara untuk membuat persediaan berfungsi yang betul:

sssccc

Saya juga mengeluarkan satu data，它嵌套了整个配置，已经在 data() di dalam. Ini mengakibatkan ketidakpadanan prop, seperti yang ditunjukkan dalam ralat konsol penyemak imbas.