Nuxt.js : la fenêtre n'est pas définie apexcharts/vue-apexcharts
P粉366946380
P粉366946380 2023-11-09 22:07:08
0
2
733

J'ai ajouté cet exemple simple d'apexcharts.com. Je suis presque sûr que l'importation est correcte. Je ne fais référence à la fenêtre nulle part. Lors de l'ajout de ce fichier, toute mon application s'arrête. Je pense que cela a quelque chose à voir avec la configuration SSR ou 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>


P粉366946380
P粉366946380

répondre à tous(2)
P粉946437474

SSR/SSG se casse lors de l'emballage de votre composant dans un objet nuxt <client-only> 组件中。这将防止在尝试引用不存在的 window.

Par exemple


  

P粉834840856

Comme expliqué dans ma réponse liée (dernière phrase, en utilisant la syntaxe des composants directs), voici comment créer une configuration de travail correcte :



sssccc

J'en ai également retiré un data,它嵌套了整个配置,已经在 data() à l'intérieur. Cela a entraîné une inadéquation des accessoires, comme le montre l'erreur de la console du navigateur.

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal