I recently came across this example on a website about apex charts and decided to implement it in my project. I made sure to import all the necessary dependencies correctly and didn't reference window anywhere in my code. However, upon adding the file containing this chart component, my entire application seemed to freeze. I suspect that the issue lies within the server-side rendering (SSR) or Nuxt configurations.
https://i.sstatic.net/tAC47.png
<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>