I have an application with nuxt.js as a framework and it's running well in development mode. However, when I deployed to the server for production, it's show "window is not defined".
I think it's because highcharts-vue.min.js
module not loaded in components so shows this error but I'm not sure about that. I attach some code and screen shoot results after deploying on the server
<template>
<highcharts class="hc" :options="chartOptions" ref="chart">
</highcharts>
</template>
<script>
import {Chart} from 'highcharts-vue'
export default {
name:"ForecastCuaca",
components: {
highcharts: Chart
},
data() {
return {
data_cuaca:[],
chartOptions: {
chart: {
type: 'spline',
backgroundColor: 'transparent',
marginTop:100
},
title: {
text: 'Prakiraan Cuaca Kota Kupang',
style:{
"color": "#ebeefd",
"fontSize": "22px"
}
},
subtitle: {
text: 'Source: openweathermap.org',
style:{
"color": "#ebeefd",
}
},
xAxis: {
categories: ['Tanggal'],
labels:{
style:{
color:"#ebeefd"
}
}
},
yAxis: {
title: {
text: 'Suhu'
},
labels: {
formatter: function () {
return this.value + '°';
},
style:{
color:"#ebeefd"
}
},
style:{
"color": "#ebeefd",
}
},
tooltip: {
formatter: function () {
return 'Suhu : ' + this.y + '° C<br /><b>' + this.x + '</b>';
}
},
plotOptions: {
spline: {
marker: {
radius: 4,
lineColor: '#666666',
lineWidth: 1
}
}
},
series: [{
name: 'Kota Kupang',
marker: {
symbol: 'square'
},
data: [
10
],
style:{
"color": "#ebeefd",
}
}
],
credits:{
enabled:false
}
},
title: '',
}
},
methods:{
generate_data(datax){
const self = this;
self.data_cuaca = datax
self.chartOptions.xAxis.categories = []
self.chartOptions.series[0].data = []
let ganjil = 0;
for (let index = 0; index < self.data_cuaca.length; index++) {
ganjil++;
const element = self.data_cuaca[index];
self.chartOptions.xAxis.categories.push(element.waktu_indonesia)
if (ganjil % 2 == 1) {
const iconx = element.weather[0].icon+'.png';
const data_series = {
y:element.main.temp,
marker: {
symbol: "url(http://openweathermap.org/img/w/"+iconx+")"
}
}
self.chartOptions.series[0].data.push(data_series)
}else{
self.chartOptions.series[0].data.push(element.main.temp)
}
}
}
}
}
</script>