0
557
VistasNuxt.js: la ventana no está definida apexcharts/vue-apexcharts
He agregado este ejemplo simple deapexcharts.com . Bastante seguro de que las importaciones son correctas. No estoy haciendo referencia a la ventana en ninguna parte. Toda mi aplicación se detiene al agregar este archivo. Creo que tiene que ver con las configuraciones SSR o 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>2 Respuestas
Responde la pregunta0
Como se explica en mi respuesta vinculada (última oración, con la sintaxis del componente directo), así es como se realiza una configuración de trabajo adecuada:
<template> <div id="chart"> <client-only> <apexchart type="donut" width="380" :options="chartOptions" :series="series" ></apexchart> </client-only> </div> </template> <script> export default { name: 'Donut', components: { [process.browser && 'apexchart']: () => import('vue-apexcharts'), }, data() { return { series: [44, 55, 41, 17, 15], chartOptions: { chart: { type: 'donut', }, responsive: [ { breakpoint: 480, options: { chart: { width: 200, }, legend: { position: 'bottom', }, }, }, ], }, } }, } </script> También eliminé un data que anidaba toda la configuración, ya dentro de data() . Esto estaba provocando una falta de coincidencia en términos de accesorios, como se muestra en los errores de la consola del navegador.
0
Envuelva su componente en el componente <client-only> de nuxt. Eso evitará que SSR/SSG se rompa al intentar hacer referencia al objeto de window inexistente.
P.ej
<client-only> <chart-component /> </client-only>