I added this simple example from apexcharts.com. Pretty sure the import is correct. I don't reference window anywhere. When adding this file my entire application stops. I believe this has something to do with SSR or Nuxt configuration.
<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>
Wrap your component in nuxt's
<client-only>
component. This will prevent SSR/SSG from breaking when trying to reference a non-existentwindow
object.For example
As explained in my linked answer (last sentence, using direct component syntax), here's how to make a correct working setup:
I also removed a
data
which nested the entire configuration, already insidedata()
. This resulted in a props mismatch, as shown in the browser console error.